{"version":3,"mappings":";muBAqDQA,EAAW,UACRA,EAAQ,YACPA,EAAQ,iCAHVA,EAAa,iHACfA,EAAW,gBACRA,EAAQ,iBACPA,EAAQ,wTAPXC,EAAW,OAAQD,EAAS,qCACpBA,EAAO,YAFxBE,EAgBKC,EAAAC,EAAAC,CAAA,+CAXKL,EAAa,iSACfA,EAAW,gBACRA,EAAQ,iBACPA,EAAQ,iDANHA,EAAO,2KAzCX,KAAAM,EAAiE,WAAAC,EAMjE,MAAAC,CAAA,EAAAD,GAMA,QAAAE,EAAmB,IAAAF,EAExB,MAAAG,EAAA,CACJ,KAAM,OACN,QAAS,GACT,MAAO,GACP,OAAQ,GACR,MAAO,GACP,GAAI,IAOF,IAAAC,GAE4BH,UAC9BI,EAAA,EAAAD,GAAA,MAAAE,otLAAA,WAAAC,CAAA,cAAyD,WAG1CN,EAAK,QAAQ,aAAeO,GAAQA,EAAI,QAAQ,IAAK,EAAE,EAAE,gBAGtE,IAAAC,EAAA,QAAoBV,CAAI,sUADzBM,EAAA,EAAAK,EAAWP,EAAUJ,CAAI","names":["ctx","classNames","insert_hydration","target","div","anchor","size","$$props","icon","circled","iconSizes","iconComponent","$$invalidate","__variableDynamicImportRuntimeHelper","icon2","str","iconClass","iconSize"],"ignoreList":[],"sources":["../../../../../../src/lib/components/atoms/Icon/Icon.svelte"],"sourcesContent":["<script lang=\"ts\">\n\timport classNames from \"classnames\";\n\timport type { SvelteComponent } from \"svelte\";\n\n  /**\n   * Specify the size of the icon\n   * @type string\n   */\n  export let size: \"full\" | \"default\" | \"small\" | \"middle\" | \"large\" | \"xl\" = \"default\";\n\n  /**\n   * Specify the icon name\n   * @type string\n   */\n  export let icon: string;\n\n  /**\n   * Specify if the icon should be circled\n   * @type boolean\n   */\n  export let circled: boolean = false;\n\n  const iconSizes = {\n    full: \"100%\",\n    default: 24,\n    small: 16,\n    middle: 20,\n    large: 32,\n    xl: 36\n  }\n\n  /**\n   * Icon component\n   * @type ConstructorOfATypedSvelteComponent\n   */\n  let iconComponent: typeof SvelteComponent;\n\n  const getIconComponent = async (icon: string) => {\n    iconComponent = (await import(`./icons/${icon}.svelte`)).default;\n  };\n\n  getIconComponent(icon.replace(/(^\\w|-\\w)/g, (str) => str.replace('-', '').toUpperCase()));\n\n  $: iconSize = iconSizes[size]\n  let iconClass = `size-${size}`;\n</script>\n\n<div\n  class={classNames('icon', iconClass)}\n  class:circled={circled}\n>\n  <svelte:component\n    this={iconComponent}\n    {...$$restProps}\n    width={iconSize}\n    height={iconSize}\n    fill=\"currentColor\"\n    on:click\n    on:mouseover\n    on:focus\n    on:mouseenter\n    on:mouseleave\n  />\n</div>\n\n<style type=\"text/scss\" lang=\"scss\" scoped>\n  .icon {\n    @apply relative;\n    @apply inline-flex;\n    @apply items-center justify-center;\n\n    &.circled {\n      @apply rounded-full;\n      @apply bg-gray-300;\n      @apply p-2;\n    }\n\n    &.size-full {\n      @apply w-full h-full;\n    }\n\n    &.size-default {\n      @apply w-6 h-6;\n    }\n\n    &.size-small {\n      @apply w-4 h-4;\n    }\n\n    &.size-middle {\n      @apply w-5 h-5;\n    }\n\n    &.size-large {\n      @apply w-8 h-8;\n    }\n\n    &.size-xl {\n      @apply w-10 h-10;\n    }\n  }\n\n\t:global(.icon) {\n\t\t& svg {\n\t\t\t@apply w-full h-full;\n\t\t\t@apply transition-colors;\n\t\t}\n\t}\n</style>"],"file":"_app/immutable/chunks/Icon.D6I22fuM.js"}