@reshape-biotech/design-system 2.4.2 → 2.5.1

package/dist/components/icons/PrincipalIcon.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SupportedPrincipalIcons } from '.';
+type Props = {
+    principal: SupportedPrincipalIcons;
+    withBackground?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const PrincipalIcon: import("svelte").Component<Props, {}, "">;
+type PrincipalIcon = ReturnType<typeof PrincipalIcon>;
+export default PrincipalIcon;

package/dist/components/icons/custom/Halo.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 16 16"
+  fill={color === 'inherit' ? 'currentColor' : textColor[color]}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M5.75676 2.08573C5.74306 2.18334 5.74874 2.28269 5.77346 2.37811C5.82345 2.5705 5.94776 2.73518 6.1191 2.83596C6.29043 2.93675 6.49477 2.96539 6.68721 2.91561C7.54813 2.69363 8.45129 2.69363 9.31221 2.91561C9.40845 2.94307 9.50922 2.951 9.60857 2.93892C9.70793 2.92684 9.80386 2.89499 9.89071 2.84526C9.97757 2.79553 10.0536 2.72892 10.1143 2.64935C10.175 2.56978 10.2192 2.47887 10.2442 2.38196C10.2692 2.28506 10.2746 2.18412 10.26 2.08511C10.2455 1.98609 10.2112 1.89099 10.1593 1.80542C10.1074 1.71985 10.0389 1.64553 9.95779 1.58685C9.87672 1.52817 9.78472 1.48631 9.68721 1.46373C8.58036 1.17794 7.41906 1.17794 6.31221 1.46373C6.21677 1.48834 6.12711 1.53153 6.04837 1.59081C5.96962 1.6501 5.90334 1.72432 5.8533 1.80925C5.80327 1.89417 5.77046 1.98812 5.75676 2.08573Z"
+  />
+  <path
+    d="M1.49596 6.19373C1.80219 5.0925 2.3828 4.08697 3.18346 3.27123C3.25245 3.20093 3.3346 3.14491 3.42524 3.10636C3.51587 3.06781 3.61321 3.0475 3.7117 3.04657C3.81019 3.04564 3.9079 3.06412 3.99924 3.10095C4.09059 3.13778 4.17379 3.19225 4.24409 3.26123C4.31438 3.33022 4.37041 3.41237 4.40895 3.50301C4.4475 3.59364 4.46782 3.69098 4.46875 3.78947C4.46968 3.88796 4.4512 3.98567 4.41437 4.07701C4.37753 4.16836 4.32307 4.25156 4.25409 4.32186C3.63135 4.95586 3.17975 5.73756 2.94159 6.59373C2.89785 6.75179 2.80352 6.89116 2.67303 6.99049C2.54254 7.08983 2.38308 7.14366 2.21909 7.14373C2.15152 7.14367 2.08427 7.13463 2.01909 7.11686C1.9241 7.09062 1.83522 7.04593 1.75752 6.98533C1.67982 6.92474 1.61482 6.84942 1.56624 6.76369C1.51766 6.67796 1.48645 6.5835 1.47439 6.4857C1.46233 6.38791 1.46966 6.28869 1.49596 6.19373Z"
+  />
+  <path
+    d="M2.58493 8.96394C2.75673 9.05872 2.88454 9.21706 2.94096 9.40498C3.17786 10.2612 3.62816 11.0433 4.24971 11.6781C4.37681 11.8218 4.444 12.0088 4.43747 12.2005C4.43095 12.3922 4.3512 12.5742 4.21463 12.7089C4.07806 12.8436 3.89505 12.9209 3.70324 12.9248C3.51144 12.9287 3.32543 12.859 3.18346 12.73C2.3824 11.9141 1.80175 10.908 1.49596 9.80623C1.44741 9.61612 1.47529 9.41456 1.57362 9.24476C1.67195 9.07497 1.83291 8.95048 2.02197 8.89798C2.21102 8.84548 2.41313 8.86916 2.58493 8.96394Z"
+  />
+  <path
+    d="M6.68721 13.0844C7.54809 13.3066 8.45133 13.3066 9.31221 13.0844C9.40845 13.0569 9.50922 13.049 9.60857 13.061C9.70793 13.0731 9.80386 13.105 9.89071 13.1547C9.97757 13.2044 10.0536 13.271 10.1143 13.3506C10.175 13.4302 10.2192 13.5211 10.2442 13.618C10.2692 13.7149 10.2746 13.8158 10.26 13.9149C10.2455 14.0139 10.2112 14.109 10.1593 14.1945C10.1074 14.2801 10.0389 14.3544 9.95779 14.4131C9.87672 14.4718 9.78472 14.5137 9.68721 14.5362C8.58036 14.822 7.41906 14.822 6.31221 14.5362C6.21471 14.5137 6.1227 14.4718 6.04163 14.4131C5.96055 14.3544 5.89204 14.2801 5.84013 14.1945C5.78823 14.109 5.75397 14.0139 5.73939 13.9149C5.7248 13.8158 5.73018 13.7149 5.75521 13.618C5.78024 13.5211 5.82441 13.4302 5.88512 13.3506C5.94583 13.271 6.02186 13.2044 6.10871 13.1547C6.19557 13.105 6.2915 13.0731 6.39085 13.061C6.4902 13.049 6.59097 13.0569 6.68721 13.0844Z"
+  />
+  <path
+    d="M13.4142 8.95472C13.5866 8.85668 13.7909 8.83093 13.9822 8.88311H13.9816C14.0768 8.90907 14.1659 8.95357 14.2439 9.01405C14.3219 9.07454 14.3872 9.14982 14.436 9.23557C14.4848 9.32133 14.5163 9.41588 14.5285 9.5138C14.5407 9.61173 14.5335 9.7111 14.5072 9.80623C14.2008 10.9076 13.6203 11.9133 12.8197 12.7294C12.6803 12.8712 12.4902 12.9519 12.2913 12.9537C12.0924 12.9555 11.901 12.8781 11.7591 12.7387C11.6172 12.5993 11.5365 12.4093 11.5347 12.2104C11.533 12.0115 11.6103 11.82 11.7497 11.6781C12.3724 11.0441 12.824 10.2624 13.0622 9.40623C13.1152 9.2151 13.2418 9.05276 13.4142 8.95472Z"
+  />
+  <path
+    d="M13.4151 7.03602C13.2433 6.94124 13.1155 6.7829 13.0591 6.59498H13.0585C12.8216 5.73874 12.3713 4.95663 11.7497 4.32186C11.675 4.25309 11.615 4.16986 11.5733 4.07721C11.5317 3.98456 11.5094 3.88442 11.5076 3.78287C11.5059 3.68132 11.5247 3.58047 11.5631 3.48643C11.6015 3.3924 11.6586 3.30714 11.7309 3.23584C11.8033 3.16453 11.8893 3.10865 11.9839 3.0716C12.0785 3.03455 12.1796 3.01709 12.2811 3.02028C12.3826 3.02347 12.4824 3.04725 12.5745 3.09017C12.6665 3.1331 12.7489 3.19427 12.8166 3.26998C13.6176 4.0859 14.1983 5.09195 14.5041 6.19373C14.5526 6.38384 14.5248 6.5854 14.4264 6.7552C14.3281 6.92499 14.1671 7.04948 13.9781 7.10198C13.789 7.15448 13.5869 7.1308 13.4151 7.03602Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.99976 4.25C5.92869 4.25 4.24976 5.92893 4.24976 8C4.24976 10.0711 5.92869 11.75 7.99976 11.75C10.0708 11.75 11.7498 10.0711 11.7498 8C11.7498 5.92893 10.0708 4.25 7.99976 4.25ZM5.74976 8C5.74976 6.75736 6.75712 5.75 7.99976 5.75C9.2424 5.75 10.2498 6.75736 10.2498 8C10.2498 9.24264 9.2424 10.25 7.99976 10.25C6.75712 10.25 5.74976 9.24264 5.74976 8Z"
+  />
+</svg>

package/dist/components/icons/custom/Halo.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const Halo: import("svelte").Component<$$ComponentProps, {}, "">;
+type Halo = ReturnType<typeof Halo>;
+export default Halo;

package/dist/components/icons/custom/LightBottomHighIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M15.5 16V15C15.5 13.3431 14.1569 12 12.5 12C10.8431 12 9.5 13.3431 9.5 15V16"
+    stroke-width="1.5"
+  />
+  <path d="M4.25736 7.17142L8.5 11.4141" stroke-width="1.5" />
+  <path d="M20.7426 7.17142L16.5 11.4141" stroke-width="1.5" />
+  <path d="M1.5 15L7.5 15" stroke-width="1.5" />
+  <path d="M23.5 15L17.5 15" stroke-width="1.5" />
+  <path d="M12.5 3L12.5 10" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightBottomHighIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightBottomHighIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightBottomHighIcon = ReturnType<typeof LightBottomHighIcon>;
+export default LightBottomHighIcon;

package/dist/components/icons/custom/LightBottomLowIcon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path d="M15 16V15C15 13.3431 13.6569 12 12 12C10.3431 12 9 13.3431 9 15V16" stroke-width="1.5" />
+  <path d="M6.58579 10L8 11.4142" stroke-width="1.5" />
+  <path d="M17.4142 10L16 11.4142" stroke-width="1.5" />
+  <path d="M5 15L7 15" stroke-width="1.5" />
+  <path d="M19 15L17 15" stroke-width="1.5" />
+  <path d="M12 8L12 10" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightBottomLowIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightBottomLowIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightBottomLowIcon = ReturnType<typeof LightBottomLowIcon>;
+export default LightBottomLowIcon;

package/dist/components/icons/custom/LightBottomMediumIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M15.5 16V15C15.5 13.3431 14.1569 12 12.5 12C10.8431 12 9.5 13.3431 9.5 15V16"
+    stroke-width="1.5"
+  />
+  <path d="M5.67157 8.58564L8.5 11.4141" stroke-width="1.5" />
+  <path d="M19.3284 8.58564L16.5 11.4141" stroke-width="1.5" />
+  <path d="M3.5 15L7.5 15" stroke-width="1.5" />
+  <path d="M21.5 15L17.5 15" stroke-width="1.5" />
+  <path d="M12.5 6L12.5 10" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightBottomMediumIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightBottomMediumIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightBottomMediumIcon = ReturnType<typeof LightBottomMediumIcon>;
+export default LightBottomMediumIcon;

package/dist/components/icons/custom/LightTopHighIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M9.5 8L9.5 9C9.5 10.6569 10.8431 12 12.5 12C14.1569 12 15.5 10.6569 15.5 9L15.5 8"
+    stroke-width="1.5"
+  />
+  <path d="M20.7426 16.8286L16.5 12.5859" stroke-width="1.5" />
+  <path d="M4.25736 16.8286L8.5 12.5859" stroke-width="1.5" />
+  <path d="M23.5 9L17.5 9" stroke-width="1.5" />
+  <path d="M1.5 9L7.5 9" stroke-width="1.5" />
+  <path d="M12.5 21L12.5 14" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightTopHighIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightTopHighIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightTopHighIcon = ReturnType<typeof LightTopHighIcon>;
+export default LightTopHighIcon;

package/dist/components/icons/custom/LightTopLowIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M9.5 8L9.5 9C9.5 10.6569 10.8431 12 12.5 12C14.1569 12 15.5 10.6569 15.5 9L15.5 8"
+    stroke-width="1.5"
+  />
+  <path d="M17.9142 14.0002L16.5 12.5859" stroke-width="1.5" />
+  <path d="M7.08579 14.0002L8.5 12.5859" stroke-width="1.5" />
+  <path d="M19.5 9L17.5 9" stroke-width="1.5" />
+  <path d="M5.5 9L7.5 9" stroke-width="1.5" />
+  <path d="M12.5 16L12.5 14" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightTopLowIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightTopLowIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightTopLowIcon = ReturnType<typeof LightTopLowIcon>;
+export default LightTopLowIcon;

package/dist/components/icons/custom/LightTopMediumIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M9.5 8L9.5 9C9.5 10.6569 10.8431 12 12.5 12C14.1569 12 15.5 10.6569 15.5 9L15.5 8"
+    stroke-width="1.5"
+  />
+  <path d="M19.3284 15.4144L16.5 12.5859" stroke-width="1.5" />
+  <path d="M5.67157 15.4144L8.5 12.5859" stroke-width="1.5" />
+  <path d="M21.5 9L17.5 9" stroke-width="1.5" />
+  <path d="M3.5 9L7.5 9" stroke-width="1.5" />
+  <path d="M12.5 18L12.5 14" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightTopMediumIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightTopMediumIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightTopMediumIcon = ReturnType<typeof LightTopMediumIcon>;
+export default LightTopMediumIcon;

package/dist/components/icons/custom/Well.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 16 16"
+  fill={color === 'inherit' ? 'currentColor' : textColor[color]}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M6.5 10.25C6.5 10.6642 6.16421 11 5.75 11C5.33579 11 5 10.6642 5 10.25C5 9.83579 5.33579 9.5 5.75 9.5C6.16421 9.5 6.5 9.83579 6.5 10.25Z"
+  />
+  <path
+    d="M10.5 8C11.0523 8 11.5 7.55228 11.5 7C11.5 6.44772 11.0523 6 10.5 6C9.94771 6 9.5 6.44772 9.5 7C9.5 7.55228 9.94771 8 10.5 8Z"
+  />
+  <path
+    d="M11 10.25C11 10.9404 10.4404 11.5 9.75 11.5C9.05964 11.5 8.5 10.9404 8.5 10.25C8.5 9.55964 9.05964 9 9.75 9C10.4404 9 11 9.55964 11 10.25Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.25 4.25C5.14543 4.25 4.25 5.14543 4.25 6.25C4.25 7.35457 5.14543 8.25 6.25 8.25C7.35457 8.25 8.25 7.35457 8.25 6.25C8.25 5.14543 7.35457 4.25 6.25 4.25ZM5.75 6.25C5.75 5.97386 5.97386 5.75 6.25 5.75C6.52614 5.75 6.75 5.97386 6.75 6.25C6.75 6.52614 6.52614 6.75 6.25 6.75C5.97386 6.75 5.75 6.52614 5.75 6.25Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1.25 7.99766C1.25127 4.27081 4.27286 1.25 8 1.25C11.7271 1.25 14.7486 4.27069 14.75 7.99743L14.75 8L14.7499 8.04138C14.7277 11.7367 11.7362 14.728 8.04081 14.7499C8.01175 14.7501 7.98269 14.75 7.95362 14.7498C4.24846 14.7249 1.25229 11.7148 1.25 8.00426L1.25 7.99766ZM8 13.25C6.96165 13.25 5.94662 12.9421 5.08326 12.3652C4.2199 11.7883 3.547 10.9684 3.14964 10.0091C2.75228 9.04978 2.64831 7.99418 2.85088 6.97578C3.05345 5.95738 3.55347 5.02191 4.28769 4.28769C5.02192 3.55346 5.95738 3.05345 6.97578 2.85088C7.30274 2.78584 7.63354 2.7524 7.96375 2.75012L8 2.75L8.03076 2.75009C8.70653 2.75405 9.3786 2.88848 10.0091 3.14963C10.9684 3.54699 11.7883 4.2199 12.3652 5.08326C12.9348 5.93567 13.2422 6.93595 13.2499 7.96054L13.25 8C13.2485 9.39193 12.6949 10.7264 11.7107 11.7107C10.7264 12.6949 9.39193 13.2485 8 13.25Z"
+  />
+</svg>

package/dist/components/icons/custom/Well.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const Well: import("svelte").Component<$$ComponentProps, {}, "">;
+type Well = ReturnType<typeof Well>;
+export default Well;

package/dist/components/icons/custom/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Halo } from './Halo.svelte';
+export { default as Well } from './Well.svelte';
+export { default as LightBottomHighIcon } from './LightBottomHighIcon.svelte';
+export { default as LightBottomLowIcon } from './LightBottomLowIcon.svelte';
+export { default as LightBottomMediumIcon } from './LightBottomMediumIcon.svelte';
+export { default as LightTopHighIcon } from './LightTopHighIcon.svelte';
+export { default as LightTopLowIcon } from './LightTopLowIcon.svelte';
+export { default as LightTopMediumIcon } from './LightTopMediumIcon.svelte';
+export type CustomIconName = 'Halo' | 'Well' | 'LightBottomHighIcon' | 'LightBottomLowIcon' | 'LightBottomMediumIcon' | 'LightTopHighIcon' | 'LightTopLowIcon' | 'LightTopMediumIcon';

package/dist/components/icons/custom/index.js

@@ -0,0 +1,8 @@
+export { default as Halo } from './Halo.svelte';
+export { default as Well } from './Well.svelte';
+export { default as LightBottomHighIcon } from './LightBottomHighIcon.svelte';
+export { default as LightBottomLowIcon } from './LightBottomLowIcon.svelte';
+export { default as LightBottomMediumIcon } from './LightBottomMediumIcon.svelte';
+export { default as LightTopHighIcon } from './LightTopHighIcon.svelte';
+export { default as LightTopLowIcon } from './LightTopLowIcon.svelte';
+export { default as LightTopMediumIcon } from './LightTopMediumIcon.svelte';

package/dist/components/icons/index.d.ts

@@ -0,0 +1,29 @@
+import type { IconComponentProps } from 'phosphor-svelte';
+import type { Component } from 'svelte';
+import type { textColor, backgroundColor } from './../../tokens';
+export * from './custom';
+import type { CustomIconName } from './custom';
+export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
+export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'CraneTower' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'EyeSlash' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type AllIconName = IconName | CustomIconName;
+export declare const iconMap: Record<IconName, PhosphorIconProps>;
+export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
+export type BackgroundClass = `bg-${keyof typeof backgroundColor}`;
+export type IconColor = keyof typeof textColor;
+export type SupportedAnalysisModelIcons = 'pipeline_halos' | 'pipeline_large_colonies' | 'pipeline_microbial_colonies' | 'pipeline_small_colonies' | 'sgs_enteros' | 'general_germination_rate_with_tracking' | 'general_germination_rate_without_tracking' | 'pipeline_insects' | 'pipeline_colony_formation' | 'pipeline_radial_growth' | 'syngenta_health_score_crw' | 'pipeline_seed_germination' | 'syngenta_health_score_faw' | 'syngenta_health_score_sbl' | 'unilever_cfu_count_lowres';
+export type SupportedPrincipalIcons = 'user' | 'group' | 'organization';
+export { default as Icon } from './Icon.svelte';
+export type IconProps = {
+    iconName: IconName;
+    color?: IconColor | 'inherit';
+    weight?: 'fill' | 'light' | 'regular' | 'thin' | 'bold' | 'duotone';
+    size?: number | string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+export type CustomIconProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+    class?: string;
+};

package/dist/components/icons/index.js

@@ -0,0 +1,249 @@
+import Aperture from 'phosphor-svelte/lib/Aperture';
+import Archive from 'phosphor-svelte/lib/Archive';
+import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
+import ArrowCounterClockwise from 'phosphor-svelte/lib/ArrowCounterClockwise';
+import ArrowRight from 'phosphor-svelte/lib/ArrowRight';
+import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
+import ArrowUpLeft from 'phosphor-svelte/lib/ArrowUpLeft';
+import ArrowUUpLeft from 'phosphor-svelte/lib/ArrowUUpLeft';
+import Barcode from 'phosphor-svelte/lib/Barcode';
+import Bell from 'phosphor-svelte/lib/Bell';
+import BookOpen from 'phosphor-svelte/lib/BookOpen';
+import BookOpenText from 'phosphor-svelte/lib/BookOpenText';
+import BowlingBall from 'phosphor-svelte/lib/BowlingBall';
+import BugBeetle from 'phosphor-svelte/lib/BugBeetle';
+import Calendar from 'phosphor-svelte/lib/Calendar';
+import CalendarBlank from 'phosphor-svelte/lib/CalendarBlank';
+import Camera from 'phosphor-svelte/lib/CameraSlash';
+import CameraSlash from 'phosphor-svelte/lib/CameraSlash';
+import CaretDown from 'phosphor-svelte/lib/CaretDown';
+import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
+import CaretRight from 'phosphor-svelte/lib/CaretRight';
+import CaretUp from 'phosphor-svelte/lib/CaretUp';
+import CaretUpDown from 'phosphor-svelte/lib/CaretUpDown';
+import ChatTeardropDots from 'phosphor-svelte/lib/ChatTeardropDots';
+import Check from 'phosphor-svelte/lib/Check';
+import CheckCircle from 'phosphor-svelte/lib/CheckCircle';
+import CheckFat from 'phosphor-svelte/lib/CheckFat';
+import Circle from 'phosphor-svelte/lib/Circle';
+import CircleDashed from 'phosphor-svelte/lib/CircleDashed';
+import CircleHalf from 'phosphor-svelte/lib/CircleHalf';
+import CirclesFour from 'phosphor-svelte/lib/CirclesFour';
+import CirclesThreePlus from 'phosphor-svelte/lib/CirclesThreePlus';
+import Clock from 'phosphor-svelte/lib/Clock';
+import ClockCountdown from 'phosphor-svelte/lib/ClockCountdown';
+import Copy from 'phosphor-svelte/lib/Copy';
+import Crop from 'phosphor-svelte/lib/Crop';
+import Cube from 'phosphor-svelte/lib/Cube';
+import CursorClick from 'phosphor-svelte/lib/CursorClick';
+import CraneTower from 'phosphor-svelte/lib/CraneTower';
+import Database from 'phosphor-svelte/lib/Database';
+import Dna from 'phosphor-svelte/lib/Dna';
+import DotsThree from 'phosphor-svelte/lib/DotsThree';
+import DotsThreeOutlineVertical from 'phosphor-svelte/lib/DotsThreeOutlineVertical';
+import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
+import Drop from 'phosphor-svelte/lib/Drop';
+import EnvelopeSimple from 'phosphor-svelte/lib/EnvelopeSimple';
+import Eye from 'phosphor-svelte/lib/Eye';
+import Eyedropper from 'phosphor-svelte/lib/Eyedropper';
+import EyeSlash from 'phosphor-svelte/lib/EyeSlash';
+import FileCsv from 'phosphor-svelte/lib/FileCsv';
+import Flag from 'phosphor-svelte/lib/Flag';
+import Flask from 'phosphor-svelte/lib/Flask';
+import Folder from 'phosphor-svelte/lib/Folder';
+import FolderDashed from 'phosphor-svelte/lib/FolderDashed';
+import FolderSimplePlus from 'phosphor-svelte/lib/FolderSimplePlus';
+import FunnelSimple from 'phosphor-svelte/lib/FunnelSimple';
+import Gear from 'phosphor-svelte/lib/Gear';
+import GlobeSimple from 'phosphor-svelte/lib/GlobeSimple';
+import GlobeSimpleX from 'phosphor-svelte/lib/GlobeSimpleX';
+import GridFour from 'phosphor-svelte/lib/GridFour';
+import Hash from 'phosphor-svelte/lib/Hash';
+import House from 'phosphor-svelte/lib/House';
+import ImageSquare from 'phosphor-svelte/lib/ImageSquare';
+import ImagesSquare from 'phosphor-svelte/lib/ImagesSquare';
+import Info from 'phosphor-svelte/lib/Info';
+import Lock from 'phosphor-svelte/lib/Lock';
+import LineSegments from 'phosphor-svelte/lib/LineSegments';
+import List from 'phosphor-svelte/lib/List';
+import ListMagnifyingGlass from 'phosphor-svelte/lib/ListMagnifyingGlass';
+import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
+import MegaphoneSimple from 'phosphor-svelte/lib/MegaphoneSimple';
+import MicrosoftExcelLogo from 'phosphor-svelte/lib/MicrosoftExcelLogo';
+import Moon from 'phosphor-svelte/lib/Moon';
+import Minus from 'phosphor-svelte/lib/Minus';
+import Pause from 'phosphor-svelte/lib/Pause';
+import Palette from 'phosphor-svelte/lib/Palette';
+import Pencil from 'phosphor-svelte/lib/Pencil';
+import PencilSimple from 'phosphor-svelte/lib/PencilSimple';
+import Percent from 'phosphor-svelte/lib/Percent';
+import Phone from 'phosphor-svelte/lib/Phone';
+import Plant from 'phosphor-svelte/lib/Plant';
+import Play from 'phosphor-svelte/lib/Play';
+import Plus from 'phosphor-svelte/lib/Plus';
+import PlusMinus from 'phosphor-svelte/lib/PlusMinus';
+import Ruler from 'phosphor-svelte/lib/Ruler';
+import Question from 'phosphor-svelte/lib/Question';
+import SealCheck from 'phosphor-svelte/lib/SealCheck';
+import RadioButton from 'phosphor-svelte/lib/RadioButton';
+import SealQuestion from 'phosphor-svelte/lib/SealQuestion';
+import SealWarning from 'phosphor-svelte/lib/SealWarning';
+import SelectionAll from 'phosphor-svelte/lib/SelectionAll';
+import Share from 'phosphor-svelte/lib/Share';
+import SidebarSimple from 'phosphor-svelte/lib/SidebarSimple';
+import SignIn from 'phosphor-svelte/lib/SignIn';
+import SignOut from 'phosphor-svelte/lib/SignOut';
+import SkipBack from 'phosphor-svelte/lib/SkipBack';
+import SkipForward from 'phosphor-svelte/lib/SkipForward';
+import SortAscending from 'phosphor-svelte/lib/SortAscending';
+import Sparkle from 'phosphor-svelte/lib/Sparkle';
+import SpinnerGap from 'phosphor-svelte/lib/SpinnerGap';
+import SquaresFour from 'phosphor-svelte/lib/SquaresFour';
+import Star from 'phosphor-svelte/lib/Star';
+import Stop from 'phosphor-svelte/lib/Stop';
+import StopCircle from 'phosphor-svelte/lib/StopCircle';
+import Sun from 'phosphor-svelte/lib/Sun';
+import Table from 'phosphor-svelte/lib/Table';
+import Link from 'phosphor-svelte/lib/Link';
+import Tag from 'phosphor-svelte/lib/Tag';
+import Target from 'phosphor-svelte/lib/Target';
+import TestTube from 'phosphor-svelte/lib/TestTube';
+import Trash from 'phosphor-svelte/lib/Trash';
+import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
+import TreeStructure from 'phosphor-svelte/lib/TreeStructure';
+import UserCircle from 'phosphor-svelte/lib/UserCircle';
+import UserPlus from 'phosphor-svelte/lib/UserPlus';
+import Video from 'phosphor-svelte/lib/Video';
+import Warning from 'phosphor-svelte/lib/Warning';
+import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
+import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
+import X from 'phosphor-svelte/lib/X';
+// Custom Icons
+export * from './custom';
+export const iconMap = {
+    Aperture,
+    Archive,
+    ArrowFatLineRight,
+    ArrowCounterClockwise,
+    ArrowRight,
+    ArrowUpRight,
+    ArrowUpLeft,
+    ArrowUUpLeft,
+    Barcode,
+    Bell,
+    BookOpen,
+    BookOpenText,
+    BowlingBall,
+    BugBeetle,
+    Calendar,
+    CalendarBlank,
+    Camera,
+    CameraSlash,
+    CaretDown,
+    CaretLeft,
+    CaretRight,
+    CaretUp,
+    CaretUpDown,
+    ChatTeardropDots,
+    Check,
+    CheckCircle,
+    CheckFat,
+    Circle,
+    CircleDashed,
+    CircleHalf,
+    CirclesFour,
+    CirclesThreePlus,
+    Clock,
+    ClockCountdown,
+    Copy,
+    Crop,
+    Cube,
+    CursorClick,
+    CraneTower,
+    Database,
+    Dna,
+    DotsThree,
+    DotsThreeOutlineVertical,
+    DownloadSimple,
+    Drop,
+    EnvelopeSimple,
+    Eye,
+    Eyedropper,
+    EyeSlash,
+    FileCsv,
+    Flag,
+    Flask,
+    Folder,
+    FolderDashed,
+    FolderSimplePlus,
+    FunnelSimple,
+    Gear,
+    GlobeSimple,
+    GlobeSimpleX,
+    GridFour,
+    Hash,
+    House,
+    ImageSquare,
+    ImagesSquare,
+    Info,
+    Lock,
+    LineSegments,
+    List,
+    Link,
+    ListMagnifyingGlass,
+    MagnifyingGlass,
+    MegaphoneSimple,
+    MicrosoftExcelLogo,
+    Moon,
+    Minus,
+    Palette,
+    Pause,
+    Pencil,
+    PencilSimple,
+    Percent,
+    Phone,
+    Plant,
+    Play,
+    Plus,
+    PlusMinus,
+    RadioButton,
+    Ruler,
+    Question,
+    SealCheck,
+    SealQuestion,
+    SealWarning,
+    SelectionAll,
+    Share,
+    SidebarSimple,
+    SignIn,
+    SignOut,
+    SkipBack,
+    SkipForward,
+    SortAscending,
+    Sparkle,
+    SpinnerGap,
+    SquaresFour,
+    Star,
+    Stop,
+    StopCircle,
+    Sun,
+    Table,
+    Tag,
+    Target,
+    TestTube,
+    Trash,
+    TrashSimple,
+    TreeStructure,
+    UserCircle,
+    UserPlus,
+    Video,
+    Warning,
+    WarningCircle,
+    WifiSlash,
+    X,
+};
+export function renderIcon(iconName) {
+    const Icon = iconMap[iconName];
+    return Icon;
+}
+export { default as Icon } from './Icon.svelte';

package/dist/components/icons/types.js

@@ -0,0 +1 @@
+"use strict";