@orfium/ictinus 5.43.8 → 5.44.0

package/dist/vanilla/src/data-table/DataTableHeaderCell.js

@@ -2,17 +2,161 @@ import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { forwardRef } from 'react';
 import { ActionsContent } from '../actions/ActionsContent.js';
 import { ActionsRoot } from '../actions/ActionsRoot.js';
+import { Button } from '../button/Button.js';
+import '../button/Button-css.js';
 import '../components/Controls/Radio/Radio.js';
 import '../components/Controls/Radio/components/RadioGroup/RadioGroup.js';
 import '../components/Controls/Radio/components/RadioGroup/RadioGroupContext.js';
 import '../components/Controls/CheckBox/CheckBox.js';
 import Switch from '../components/Controls/Switch/Switch.js';
-import IconButton from '../components/IconButton/IconButton.js';
-import { Icon } from '../icon/Icon.js';
+import '../icons/AccountIcon.js';
+import '../icons/AlbumIcon.js';
+import '../icons/AnalyticsIcon.js';
+import '../icons/AppsIcon.js';
+import { ArrowDownIcon } from '../icons/ArrowDownIcon.js';
+import '../icons/ArrowLeftIcon.js';
+import '../icons/ArrowRightIcon.js';
+import { ArrowUpIcon } from '../icons/ArrowUpIcon.js';
+import '../icons/ArtistIcon.js';
+import '../icons/AssetIcon.js';
+import '../icons/AudioIcon.js';
+import '../icons/AudioOffIcon.js';
+import '../icons/BookmarkIcon.js';
+import '../icons/BookmarkOffIcon.js';
+import '../icons/BroadcastIcon.js';
+import '../icons/CalendarIcon.js';
+import '../icons/CatalogIcon.js';
+import '../icons/ChannelIcon.js';
+import '../icons/ChatIcon.js';
+import '../icons/CheckIcon.js';
+import '../icons/ChevronDownIcon.js';
+import '../icons/ChevronLeftIcon.js';
+import '../icons/ChevronRightIcon.js';
+import '../icons/ChevronUpIcon.js';
+import '../icons/CinemaIcon.js';
+import '../icons/ClaimIcon.js';
+import '../icons/CloseIcon.js';
+import '../icons/ColumnChooserIcon.js';
+import '../icons/CompositionIcon.js';
+import '../icons/ConcertIcon.js';
+import '../icons/ConflictIcon.js';
+import '../icons/ConvertIcon.js';
+import '../icons/CopyIcon.js';
+import '../icons/CueSheetIcon.js';
+import '../icons/DashboardIcon.js';
+import '../icons/DatasetIcon.js';
+import '../icons/DeleteIcon.js';
+import '../icons/DeliveryIcon.js';
+import '../icons/DetailsIcon.js';
+import '../icons/DigitalIcon.js';
+import '../icons/DistributionIcon.js';
+import '../icons/DownloadIcon.js';
+import '../icons/EarningsIcon.js';
+import '../icons/EditIcon.js';
+import '../icons/EntitiesIcon.js';
+import '../icons/ErrorIcon.js';
+import '../icons/ExternalLinkIcon.js';
+import '../icons/EyeIcon.js';
+import '../icons/EyeOffIcon.js';
+import '../icons/FavoriteIcon.js';
+import '../icons/FavoriteOffIcon.js';
+import '../icons/FileIcon.js';
+import '../icons/FilterIcon.js';
+import '../icons/FlagIcon.js';
+import '../icons/FlagOffIcon.js';
+import '../icons/ForwardIcon.js';
+import { FreezeIcon } from '../icons/FreezeIcon.js';
+import '../icons/HelpIcon.js';
+import '../icons/ImageIcon.js';
+import '../icons/ImageOffIcon.js';
+import '../icons/IncomeIcon.js';
+import { InformationalIcon } from '../icons/InformationalIcon.js';
+import '../icons/InsightIcon.js';
+import '../icons/InvoiceIcon.js';
+import '../icons/IssueIcon.js';
+import '../icons/KeywordIcon.js';
+import '../icons/LanguageIcon.js';
+import '../icons/LegalIcon.js';
+import '../icons/LicenseIcon.js';
+import '../icons/LinkIcon.js';
+import '../icons/LocationIcon.js';
+import '../icons/LockIcon.js';
+import '../icons/LoginIcon.js';
+import '../icons/LogoutIcon.js';
+import '../icons/MailIcon.js';
+import '../icons/ManualIcon.js';
+import '../icons/MediaFileIcon.js';
+import '../icons/MenuIcon.js';
+import '../icons/MinusIcon.js';
+import { MoreOptionsIcon } from '../icons/MoreOptionsIcon.js';
+import '../icons/NextIcon.js';
+import '../icons/NotificationIcon.js';
+import '../icons/OrganizationIcon.js';
+import '../icons/PageFirstIcon.js';
+import '../icons/PageLastIcon.js';
+import '../icons/PairIcon.js';
+import '../icons/PauseIcon.js';
+import '../icons/PendingIcon.js';
+import '../icons/PlaycountIcon.js';
+import '../icons/PlayIcon.js';
+import '../icons/PlusIcon.js';
+import '../icons/PolicyIcon.js';
+import '../icons/PreviousIcon.js';
+import '../icons/PublicPerformanceIcon.js';
+import '../icons/PublisherIcon.js';
+import '../icons/RadioIcon.js';
+import '../icons/RecordingIcon.js';
+import '../icons/RecordLabelIcon.js';
+import '../icons/RedoIcon.js';
+import '../icons/RefreshIcon.js';
+import '../icons/ReportIcon.js';
+import '../icons/RestoreIcon.js';
+import '../icons/ResumeIcon.js';
+import '../icons/ReviewIcon.js';
+import '../icons/RewindIcon.js';
+import '../icons/RoleIcon.js';
+import '../icons/SearchFilledIcon.js';
+import '../icons/SearchIcon.js';
+import '../icons/SettingsIcon.js';
+import '../icons/ShareIcon.js';
+import { SortAscendingIcon } from '../icons/SortAscendingIcon.js';
+import { SortDescendingIcon } from '../icons/SortDescendingIcon.js';
+import { SortIcon } from '../icons/SortIcon.js';
+import '../icons/StatusIndicatorIcon.js';
+import '../icons/StopIcon.js';
+import '../icons/SuccessIcon.js';
+import '../icons/TagIcon.js';
+import '../icons/TelevisionIcon.js';
+import '../icons/ThumbsDownIcon.js';
+import '../icons/ThumbsUpIcon.js';
+import '../icons/TrendingDownIcon.js';
+import '../icons/TrendingUpIcon.js';
+import '../icons/TriangleDownIcon.js';
+import '../icons/TriangleLeftIcon.js';
+import '../icons/TriangleRightIcon.js';
+import '../icons/TriangleUpIcon.js';
+import '../icons/UndoIcon.js';
+import '../icons/UnfreezeIcon.js';
+import '../icons/UnlinkIcon.js';
+import '../icons/UnlockIcon.js';
+import '../icons/UnpairIcon.js';
+import '../icons/UnverifiedIcon.js';
+import '../icons/UpdateIcon.js';
+import '../icons/UploadIcon.js';
+import '../icons/UsageIcon.js';
+import '../icons/UserIcon.js';
+import '../icons/UsersIcon.js';
+import '../icons/VerifiedIcon.js';
+import '../icons/VideoIcon.js';
+import '../icons/VideoOffIcon.js';
+import '../icons/WarningIcon.js';
+import '../icons/WorkIcon.js';
+import '../icons/WriterIcon.js';
+import '../icons/YouTubeIcon.js';
 import { cn } from '../utils/cn.js';
 import { Box } from '../../Box/Box.js';
 import '../sprinkles/sprinkles.js';
-import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator } from '../../Menu/Menu.js';
+import { Menu, MenuContent, MenuItem, MenuSeparator } from '../../Menu/Menu.js';
 import '../../Table/Table.js';
 import '../../Table/TableBody.js';
 import '../../Table/TableCell.js';
@@ -81,7 +225,7 @@ const DataTableHeaderCell = forwardRef(
                   /* @__PURE__ */ jsx(TooltipContent, { children })
                 ] }),
                 header.column.columnDef.meta?.tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", size: "3", children: /* @__PURE__ */ jsx(Icon, { name: "informational", size: "xs", color: "secondary" }) }) }),
+                  /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(InformationalIcon, { size: "xs", color: "secondary", flexShrink: "0" }) }),
                   /* @__PURE__ */ jsx(TooltipContent, { maxW: "22", children: header.column.columnDef.meta.tooltip })
                 ] }),
                 header.column.getCanSort() && /* @__PURE__ */ jsxs(
@@ -94,12 +238,15 @@ const DataTableHeaderCell = forwardRef(
                     flexDirection: flexDir,
                     children: [
                       /* @__PURE__ */ jsx(
-                        IconButton,
+                        Button,
                         {
-                          onClick: () => header.column.toggleSorting(void 0, header.column.getCanMultiSort()),
-                          type: "tertiary",
+                          "aria-label": "sort",
+                          variant: "tertiary",
                           size: "compact",
-                          iconName: getSortIcon(sortDir)
+                          iconOnly: true,
+                          circle: true,
+                          onPress: () => header.column.toggleSorting(void 0, header.column.getCanMultiSort()),
+                          children: sortDir === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : sortDir === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : /* @__PURE__ */ jsx(SortIcon, {})
                         }
                       ),
                       header.column.getCanMultiSort() && header.column.getSortIndex() > -1 && /* @__PURE__ */ jsx(
@@ -118,15 +265,25 @@ const DataTableHeaderCell = forwardRef(
                 )
               ] }),
               (header.column.getCanSort() || header.column.getCanPin()) && /* @__PURE__ */ jsx(ActionsContent, { visible: sortDir ? "always" : "if-needed", children: /* @__PURE__ */ jsxs(Menu, { children: [
-                /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(IconButton, { type: "tertiary", size: "compact", iconName: "moreOptions" }) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": "Column options",
+                    variant: "tertiary",
+                    size: "compact",
+                    iconOnly: true,
+                    circle: true,
+                    children: /* @__PURE__ */ jsx(MoreOptionsIcon, {})
+                  }
+                ),
                 /* @__PURE__ */ jsxs(MenuContent, { style: { minWidth: "220px" }, children: [
                   header.column.getCanSort() && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(true), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "sortDescending" }),
+                      /* @__PURE__ */ jsx(SortDescendingIcon, { flexShrink: "0" }),
                       /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort descending (z-a)" })
                     ] }) }),
                     /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(false), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "sortAscending" }),
+                      /* @__PURE__ */ jsx(SortAscendingIcon, { flexShrink: "0" }),
                       /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort ascending (a-z)" })
                     ] }) })
                   ] }),
@@ -140,7 +297,7 @@ const DataTableHeaderCell = forwardRef(
                           header.column.pin(isPinnedLeft ? false : "left");
                         },
                         children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", w: "full", children: [
-                          /* @__PURE__ */ jsx(Icon, { name: "freeze" }),
+                          /* @__PURE__ */ jsx(FreezeIcon, { flexShrink: "0" }),
                           /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Freeze column (left)" }),
                           /* @__PURE__ */ jsx(Box, { flex: "1" }),
                           /* @__PURE__ */ jsx(
@@ -161,7 +318,7 @@ const DataTableHeaderCell = forwardRef(
                           header.column.pin(isPinnedRight ? false : "right");
                         },
                         children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", w: "full", children: [
-                          /* @__PURE__ */ jsx(Icon, { name: "freeze" }),
+                          /* @__PURE__ */ jsx(FreezeIcon, { flexShrink: "0" }),
                           /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Freeze column (right)" }),
                           /* @__PURE__ */ jsx(Box, { flex: "1" }),
                           /* @__PURE__ */ jsx(
@@ -190,10 +347,5 @@ const getAriaSort = (canSort, sortDir) => {
   if (sortDir === false) return "none";
   return sortDir === "asc" ? "ascending" : "descending";
 };
-const getSortIcon = (sortDir) => {
-  if (sortDir === "asc") return "arrowUp";
-  if (sortDir === "desc") return "arrowDown";
-  return "sort";
-};
 
 export { DataTableHeaderCell };

package/dist/vanilla/src/icon/Icon.js

@@ -144,15 +144,9 @@ import { WorkIcon } from '../icons/WorkIcon.js';
 import { WriterIcon } from '../icons/WriterIcon.js';
 import { YouTubeIcon } from '../icons/YouTubeIcon.js';
 
-const SIZE = {
-  xs: "3",
-  sm: "4",
-  md: "5",
-  lg: "6"
-};
 function Icon({ name, size = "md", ...props }) {
   const IconComponent = ICONS[name];
-  return /* @__PURE__ */ jsx(IconComponent, { size: SIZE[size], ...props });
+  return /* @__PURE__ */ jsx(IconComponent, { size, ...props });
 }
 const ICONS = {
   account: AccountIcon,

package/dist/vanilla/src/icons/AccountIcon.js

@@ -1,15 +1,14 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function AccountIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M5.10531 13.9746C5.83023 13.4459 6.6012 13.0396 7.41823 12.7558C8.23525 12.472 9.09584 12.3301 10 12.3301C10.9042 12.3301 11.7647 12.472 12.5818 12.7558C13.3988 13.0396 14.1698 13.4459 14.8947 13.9746C15.3776 13.3792 15.7376 12.7551 15.9746 12.1023C16.2116 11.4496 16.3301 10.7488 16.3301 10C16.3301 8.26537 15.7088 6.77669 14.466 5.53397C13.2233 4.29125 11.7346 3.66989 10 3.66989C8.26537 3.66989 6.77669 4.29125 5.53397 5.53397C4.29125 6.77669 3.66989 8.26537 3.66989 10C3.66989 10.7488 3.78839 11.4496 4.02538 12.1023C4.26238 12.7551 4.62236 13.3792 5.10531 13.9746ZM10.0016 11.0485C9.16208 11.0485 8.45358 10.7603 7.87603 10.1838C7.29849 9.60727 7.00972 8.89928 7.00972 8.0598C7.00972 7.22033 7.29797 6.51182 7.87448 5.93428C8.45097 5.35674 9.15896 5.06797 9.99845 5.06797C10.8379 5.06797 11.5464 5.35622 12.124 5.93273C12.7015 6.50922 12.9903 7.21721 12.9903 8.05669C12.9903 8.89617 12.702 9.60467 12.1255 10.1822C11.549 10.7598 10.841 11.0485 10.0016 11.0485ZM10 18C8.91062 18 7.87803 17.7894 6.90223 17.3683C5.92642 16.9472 5.07753 16.3739 4.35556 15.6484C3.63359 14.9229 3.06051 14.0724 2.63631 13.0971C2.2121 12.1217 2 11.0861 2 9.99029C2 8.89444 2.2121 7.86209 2.63631 6.89322C3.06051 5.92433 3.63359 5.07714 4.35556 4.35164C5.07753 3.62615 5.92642 3.05284 6.90223 2.63171C7.87803 2.21057 8.91386 2 10.0097 2C11.1056 2 12.1379 2.2121 13.1068 2.63631C14.0757 3.06051 14.9213 3.63382 15.6438 4.35624C16.3662 5.07867 16.9395 5.92381 17.3637 6.89164C17.7879 7.85948 18 8.8956 18 10C18 11.0894 17.7894 12.122 17.3683 13.0978C16.9472 14.0736 16.3739 14.9225 15.6484 15.6444C14.9229 16.3664 14.0762 16.9395 13.1084 17.3637C12.1405 17.7879 11.1044 18 10 18Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const AccountIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M5.10531 13.9746C5.83023 13.4459 6.6012 13.0396 7.41823 12.7558C8.23525 12.472 9.09584 12.3301 10 12.3301C10.9042 12.3301 11.7647 12.472 12.5818 12.7558C13.3988 13.0396 14.1698 13.4459 14.8947 13.9746C15.3776 13.3792 15.7376 12.7551 15.9746 12.1023C16.2116 11.4496 16.3301 10.7488 16.3301 10C16.3301 8.26537 15.7088 6.77669 14.466 5.53397C13.2233 4.29125 11.7346 3.66989 10 3.66989C8.26537 3.66989 6.77669 4.29125 5.53397 5.53397C4.29125 6.77669 3.66989 8.26537 3.66989 10C3.66989 10.7488 3.78839 11.4496 4.02538 12.1023C4.26238 12.7551 4.62236 13.3792 5.10531 13.9746ZM10.0016 11.0485C9.16208 11.0485 8.45358 10.7603 7.87603 10.1838C7.29849 9.60727 7.00972 8.89928 7.00972 8.0598C7.00972 7.22033 7.29797 6.51182 7.87448 5.93428C8.45097 5.35674 9.15896 5.06797 9.99845 5.06797C10.8379 5.06797 11.5464 5.35622 12.124 5.93273C12.7015 6.50922 12.9903 7.21721 12.9903 8.05669C12.9903 8.89617 12.702 9.60467 12.1255 10.1822C11.549 10.7598 10.841 11.0485 10.0016 11.0485ZM10 18C8.91062 18 7.87803 17.7894 6.90223 17.3683C5.92642 16.9472 5.07753 16.3739 4.35556 15.6484C3.63359 14.9229 3.06051 14.0724 2.63631 13.0971C2.2121 12.1217 2 11.0861 2 9.99029C2 8.89444 2.2121 7.86209 2.63631 6.89322C3.06051 5.92433 3.63359 5.07714 4.35556 4.35164C5.07753 3.62615 5.92642 3.05284 6.90223 2.63171C7.87803 2.21057 8.91386 2 10.0097 2C11.1056 2 12.1379 2.2121 13.1068 2.63631C14.0757 3.06051 14.9213 3.63382 15.6438 4.35624C16.3662 5.07867 16.9395 5.92381 17.3637 6.89164C17.7879 7.85948 18 8.8956 18 10C18 11.0894 17.7894 12.122 17.3683 13.0978C16.9472 14.0736 16.3739 14.9225 15.6484 15.6444C14.9229 16.3664 14.0762 16.9395 13.1084 17.3637C12.1405 17.7879 11.1044 18 10 18Z",
+    fill: "currentColor"
+  }
+) }) }));
+AccountIcon.displayName = "AccountIcon";
 
 export { AccountIcon };

package/dist/vanilla/src/icons/AlbumIcon.js

@@ -1,17 +1,16 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function AlbumIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M9.99986 7.6001C8.6799 7.6001 7.59994 8.68006 7.59994 10C7.59994 11.32 8.6799 12.3999 9.99986 12.3999C11.3198 12.3999 12.3998 11.32 12.3998 10C12.3998 8.68006 11.3198 7.6001 9.99986 7.6001ZM10 2C5.5924 2 2 5.5924 2 10C2 14.4076 5.59163 18 10 18C14.4076 18 18 14.4084 18 10C18 5.5924 14.4076 2 10 2ZM9.99994 13.9996C7.79201 13.9996 6.00033 12.2079 6.00033 10C6.00033 7.79208 7.79201 6.00039 9.99994 6.00039C12.2079 6.00039 13.9996 7.79208 13.9996 10C13.9996 12.2079 12.2079 13.9996 9.99994 13.9996Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const AlbumIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.99986 7.6001C8.6799 7.6001 7.59994 8.68006 7.59994 10C7.59994 11.32 8.6799 12.3999 9.99986 12.3999C11.3198 12.3999 12.3998 11.32 12.3998 10C12.3998 8.68006 11.3198 7.6001 9.99986 7.6001ZM10 2C5.5924 2 2 5.5924 2 10C2 14.4076 5.59163 18 10 18C14.4076 18 18 14.4084 18 10C18 5.5924 14.4076 2 10 2ZM9.99994 13.9996C7.79201 13.9996 6.00033 12.2079 6.00033 10C6.00033 7.79208 7.79201 6.00039 9.99994 6.00039C12.2079 6.00039 13.9996 7.79208 13.9996 10C13.9996 12.2079 12.2079 13.9996 9.99994 13.9996Z",
+    fill: "currentColor"
+  }
+) }) }));
+AlbumIcon.displayName = "AlbumIcon";
 
 export { AlbumIcon };

package/dist/vanilla/src/icons/AnalyticsIcon.js

@@ -1,15 +1,14 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function AnalyticsIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M2.99531 17.5C2.71987 17.5 2.48513 17.4013 2.29108 17.2038C2.09703 17.0064 2 16.7675 2 16.4873C2 16.207 2.09703 15.9682 2.29108 15.7707C2.48513 15.5732 2.71987 15.4745 2.99531 15.4745H17.0047C17.2801 15.4745 17.5149 15.5732 17.7089 15.7707C17.903 15.9682 18 16.207 18 16.4873C18 16.7675 17.903 17.0064 17.7089 17.2038C17.5149 17.4013 17.2801 17.5 17.0047 17.5H2.99531ZM4.00939 14.328C3.62858 14.328 3.3049 14.1924 3.03835 13.9212C2.77178 13.6499 2.6385 13.3206 2.6385 12.9331V10.0096C2.6385 9.62208 2.77178 9.29273 3.03835 9.0215C3.3049 8.75027 3.62858 8.61465 4.00939 8.61465C4.3902 8.61465 4.71388 8.75027 4.98043 9.0215C5.247 9.29273 5.38028 9.62208 5.38028 10.0096V12.9331C5.38028 13.3206 5.247 13.6499 4.98043 13.9212C4.71388 14.1924 4.3902 14.328 4.00939 14.328ZM7.99061 14.328C7.6098 14.328 7.28612 14.1924 7.01957 13.9212C6.753 13.6499 6.61972 13.3206 6.61972 12.9331V6.1879C6.61972 5.80042 6.753 5.47107 7.01957 5.19985C7.28612 4.92861 7.6098 4.79299 7.99061 4.79299C8.37142 4.79299 8.6951 4.92861 8.96165 5.19985C9.22822 5.47107 9.3615 5.80042 9.3615 6.1879V12.9331C9.3615 13.3206 9.22822 13.6499 8.96165 13.9212C8.6951 14.1924 8.37142 14.328 7.99061 14.328ZM11.9906 14.328C11.6098 14.328 11.2861 14.1924 11.0196 13.9212C10.753 13.6499 10.6197 13.3206 10.6197 12.9331V8.48089C10.6197 8.09341 10.753 7.76406 11.0196 7.49284C11.2861 7.2216 11.6098 7.08599 11.9906 7.08599C12.3714 7.08599 12.6951 7.2216 12.9617 7.49284C13.2282 7.76406 13.3615 8.09341 13.3615 8.48089V12.9331C13.3615 13.3206 13.2282 13.6499 12.9617 13.9212C12.6951 14.1924 12.3714 14.328 11.9906 14.328ZM15.9906 14.328C15.6098 14.328 15.2861 14.1924 15.0196 13.9212C14.753 13.6499 14.6197 13.3206 14.6197 12.9331V3.8949C14.6197 3.50743 14.753 3.17808 15.0196 2.90685C15.2861 2.63562 15.6098 2.5 15.9906 2.5C16.3714 2.5 16.6951 2.63562 16.9617 2.90685C17.2282 3.17808 17.3615 3.50743 17.3615 3.8949V12.9331C17.3615 13.3206 17.2282 13.6499 16.9617 13.9212C16.6951 14.1924 16.3714 14.328 15.9906 14.328Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const AnalyticsIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M2.99531 17.5C2.71987 17.5 2.48513 17.4013 2.29108 17.2038C2.09703 17.0064 2 16.7675 2 16.4873C2 16.207 2.09703 15.9682 2.29108 15.7707C2.48513 15.5732 2.71987 15.4745 2.99531 15.4745H17.0047C17.2801 15.4745 17.5149 15.5732 17.7089 15.7707C17.903 15.9682 18 16.207 18 16.4873C18 16.7675 17.903 17.0064 17.7089 17.2038C17.5149 17.4013 17.2801 17.5 17.0047 17.5H2.99531ZM4.00939 14.328C3.62858 14.328 3.3049 14.1924 3.03835 13.9212C2.77178 13.6499 2.6385 13.3206 2.6385 12.9331V10.0096C2.6385 9.62208 2.77178 9.29273 3.03835 9.0215C3.3049 8.75027 3.62858 8.61465 4.00939 8.61465C4.3902 8.61465 4.71388 8.75027 4.98043 9.0215C5.247 9.29273 5.38028 9.62208 5.38028 10.0096V12.9331C5.38028 13.3206 5.247 13.6499 4.98043 13.9212C4.71388 14.1924 4.3902 14.328 4.00939 14.328ZM7.99061 14.328C7.6098 14.328 7.28612 14.1924 7.01957 13.9212C6.753 13.6499 6.61972 13.3206 6.61972 12.9331V6.1879C6.61972 5.80042 6.753 5.47107 7.01957 5.19985C7.28612 4.92861 7.6098 4.79299 7.99061 4.79299C8.37142 4.79299 8.6951 4.92861 8.96165 5.19985C9.22822 5.47107 9.3615 5.80042 9.3615 6.1879V12.9331C9.3615 13.3206 9.22822 13.6499 8.96165 13.9212C8.6951 14.1924 8.37142 14.328 7.99061 14.328ZM11.9906 14.328C11.6098 14.328 11.2861 14.1924 11.0196 13.9212C10.753 13.6499 10.6197 13.3206 10.6197 12.9331V8.48089C10.6197 8.09341 10.753 7.76406 11.0196 7.49284C11.2861 7.2216 11.6098 7.08599 11.9906 7.08599C12.3714 7.08599 12.6951 7.2216 12.9617 7.49284C13.2282 7.76406 13.3615 8.09341 13.3615 8.48089V12.9331C13.3615 13.3206 13.2282 13.6499 12.9617 13.9212C12.6951 14.1924 12.3714 14.328 11.9906 14.328ZM15.9906 14.328C15.6098 14.328 15.2861 14.1924 15.0196 13.9212C14.753 13.6499 14.6197 13.3206 14.6197 12.9331V3.8949C14.6197 3.50743 14.753 3.17808 15.0196 2.90685C15.2861 2.63562 15.6098 2.5 15.9906 2.5C16.3714 2.5 16.6951 2.63562 16.9617 2.90685C17.2282 3.17808 17.3615 3.50743 17.3615 3.8949V12.9331C17.3615 13.3206 17.2282 13.6499 16.9617 13.9212C16.6951 14.1924 16.3714 14.328 15.9906 14.328Z",
+    fill: "currentColor"
+  }
+) }) }));
+AnalyticsIcon.displayName = "AnalyticsIcon";
 
 export { AnalyticsIcon };

package/dist/vanilla/src/icons/AppsIcon.js

@@ -1,15 +1,14 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function AppsIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M4.71078 17C4.2265 17 3.8203 16.8344 3.49217 16.5031C3.16406 16.1718 3 15.764 3 15.2797C3 14.7954 3.16565 14.3892 3.49694 14.0611C3.82822 13.733 4.236 13.5689 4.72027 13.5689C5.20455 13.5689 5.61075 13.7346 5.93888 14.0659C6.267 14.3972 6.43106 14.8049 6.43106 15.2892C6.43106 15.7735 6.26541 16.1797 5.93411 16.5078C5.60283 16.8359 5.19506 17 4.71078 17ZM9.99525 17C9.51098 17 9.10477 16.8344 8.77664 16.5031C8.44853 16.1718 8.28447 15.764 8.28447 15.2797C8.28447 14.7954 8.45012 14.3892 8.78141 14.0611C9.11269 13.733 9.52047 13.5689 10.0047 13.5689C10.489 13.5689 10.8952 13.7346 11.2234 14.0659C11.5515 14.3972 11.7155 14.8049 11.7155 15.2892C11.7155 15.7735 11.5499 16.1797 11.2186 16.5078C10.8873 16.8359 10.4795 17 9.99525 17ZM15.2797 17C14.7955 17 14.3892 16.8344 14.0611 16.5031C13.733 16.1718 13.5689 15.764 13.5689 15.2797C13.5689 14.7954 13.7346 14.3892 14.0659 14.0611C14.3972 13.733 14.8049 13.5689 15.2892 13.5689C15.7735 13.5689 16.1797 13.7346 16.5078 14.0659C16.8359 14.3972 17 14.8049 17 15.2892C17 15.7735 16.8344 16.1797 16.5031 16.5078C16.1718 16.8359 15.764 17 15.2797 17ZM4.71078 11.7155C4.2265 11.7155 3.8203 11.5499 3.49217 11.2186C3.16406 10.8873 3 10.4795 3 9.99525C3 9.51098 3.16565 9.10478 3.49694 8.77665C3.82822 8.44853 4.236 8.28447 4.72027 8.28447C5.20455 8.28447 5.61075 8.45012 5.93888 8.78141C6.267 9.11269 6.43106 9.52047 6.43106 10.0047C6.43106 10.489 6.26541 10.8952 5.93411 11.2234C5.60283 11.5515 5.19506 11.7155 4.71078 11.7155ZM9.99525 11.7155C9.51098 11.7155 9.10477 11.5499 8.77664 11.2186C8.44853 10.8873 8.28447 10.4795 8.28447 9.99525C8.28447 9.51098 8.45012 9.10478 8.78141 8.77665C9.11269 8.44853 9.52047 8.28447 10.0047 8.28447C10.489 8.28447 10.8952 8.45012 11.2234 8.78141C11.5515 9.11269 11.7155 9.52047 11.7155 10.0047C11.7155 10.489 11.5499 10.8952 11.2186 11.2234C10.8873 11.5515 10.4795 11.7155 9.99525 11.7155ZM15.2797 11.7155C14.7955 11.7155 14.3892 11.5499 14.0611 11.2186C13.733 10.8873 13.5689 10.4795 13.5689 9.99525C13.5689 9.51098 13.7346 9.10478 14.0659 8.77665C14.3972 8.44853 14.8049 8.28447 15.2892 8.28447C15.7735 8.28447 16.1797 8.45012 16.5078 8.78141C16.8359 9.11269 17 9.52047 17 10.0047C17 10.489 16.8344 10.8952 16.5031 11.2234C16.1718 11.5515 15.764 11.7155 15.2797 11.7155ZM4.71078 6.43106C4.2265 6.43106 3.8203 6.26541 3.49217 5.93411C3.16406 5.60283 3 5.19506 3 4.71078C3 4.22651 3.16565 3.8203 3.49694 3.49217C3.82822 3.16406 4.236 3 4.72027 3C5.20455 3 5.61075 3.16565 5.93888 3.49694C6.267 3.82822 6.43106 4.236 6.43106 4.72027C6.43106 5.20455 6.26541 5.61075 5.93411 5.93888C5.60283 6.267 5.19506 6.43106 4.71078 6.43106ZM9.99525 6.43106C9.51098 6.43106 9.10477 6.26541 8.77664 5.93411C8.44853 5.60283 8.28447 5.19506 8.28447 4.71078C8.28447 4.22651 8.45012 3.8203 8.78141 3.49217C9.11269 3.16406 9.52047 3 10.0047 3C10.489 3 10.8952 3.16565 11.2234 3.49694C11.5515 3.82822 11.7155 4.236 11.7155 4.72027C11.7155 5.20455 11.5499 5.61075 11.2186 5.93888C10.8873 6.267 10.4795 6.43106 9.99525 6.43106ZM15.2797 6.43106C14.7955 6.43106 14.3892 6.26541 14.0611 5.93411C13.733 5.60283 13.5689 5.19506 13.5689 4.71078C13.5689 4.22651 13.7346 3.8203 14.0659 3.49217C14.3972 3.16406 14.8049 3 15.2892 3C15.7735 3 16.1797 3.16565 16.5078 3.49694C16.8359 3.82822 17 4.236 17 4.72027C17 5.20455 16.8344 5.61075 16.5031 5.93888C16.1718 6.267 15.764 6.43106 15.2797 6.43106Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const AppsIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M4.71078 17C4.2265 17 3.8203 16.8344 3.49217 16.5031C3.16406 16.1718 3 15.764 3 15.2797C3 14.7954 3.16565 14.3892 3.49694 14.0611C3.82822 13.733 4.236 13.5689 4.72027 13.5689C5.20455 13.5689 5.61075 13.7346 5.93888 14.0659C6.267 14.3972 6.43106 14.8049 6.43106 15.2892C6.43106 15.7735 6.26541 16.1797 5.93411 16.5078C5.60283 16.8359 5.19506 17 4.71078 17ZM9.99525 17C9.51098 17 9.10477 16.8344 8.77664 16.5031C8.44853 16.1718 8.28447 15.764 8.28447 15.2797C8.28447 14.7954 8.45012 14.3892 8.78141 14.0611C9.11269 13.733 9.52047 13.5689 10.0047 13.5689C10.489 13.5689 10.8952 13.7346 11.2234 14.0659C11.5515 14.3972 11.7155 14.8049 11.7155 15.2892C11.7155 15.7735 11.5499 16.1797 11.2186 16.5078C10.8873 16.8359 10.4795 17 9.99525 17ZM15.2797 17C14.7955 17 14.3892 16.8344 14.0611 16.5031C13.733 16.1718 13.5689 15.764 13.5689 15.2797C13.5689 14.7954 13.7346 14.3892 14.0659 14.0611C14.3972 13.733 14.8049 13.5689 15.2892 13.5689C15.7735 13.5689 16.1797 13.7346 16.5078 14.0659C16.8359 14.3972 17 14.8049 17 15.2892C17 15.7735 16.8344 16.1797 16.5031 16.5078C16.1718 16.8359 15.764 17 15.2797 17ZM4.71078 11.7155C4.2265 11.7155 3.8203 11.5499 3.49217 11.2186C3.16406 10.8873 3 10.4795 3 9.99525C3 9.51098 3.16565 9.10478 3.49694 8.77665C3.82822 8.44853 4.236 8.28447 4.72027 8.28447C5.20455 8.28447 5.61075 8.45012 5.93888 8.78141C6.267 9.11269 6.43106 9.52047 6.43106 10.0047C6.43106 10.489 6.26541 10.8952 5.93411 11.2234C5.60283 11.5515 5.19506 11.7155 4.71078 11.7155ZM9.99525 11.7155C9.51098 11.7155 9.10477 11.5499 8.77664 11.2186C8.44853 10.8873 8.28447 10.4795 8.28447 9.99525C8.28447 9.51098 8.45012 9.10478 8.78141 8.77665C9.11269 8.44853 9.52047 8.28447 10.0047 8.28447C10.489 8.28447 10.8952 8.45012 11.2234 8.78141C11.5515 9.11269 11.7155 9.52047 11.7155 10.0047C11.7155 10.489 11.5499 10.8952 11.2186 11.2234C10.8873 11.5515 10.4795 11.7155 9.99525 11.7155ZM15.2797 11.7155C14.7955 11.7155 14.3892 11.5499 14.0611 11.2186C13.733 10.8873 13.5689 10.4795 13.5689 9.99525C13.5689 9.51098 13.7346 9.10478 14.0659 8.77665C14.3972 8.44853 14.8049 8.28447 15.2892 8.28447C15.7735 8.28447 16.1797 8.45012 16.5078 8.78141C16.8359 9.11269 17 9.52047 17 10.0047C17 10.489 16.8344 10.8952 16.5031 11.2234C16.1718 11.5515 15.764 11.7155 15.2797 11.7155ZM4.71078 6.43106C4.2265 6.43106 3.8203 6.26541 3.49217 5.93411C3.16406 5.60283 3 5.19506 3 4.71078C3 4.22651 3.16565 3.8203 3.49694 3.49217C3.82822 3.16406 4.236 3 4.72027 3C5.20455 3 5.61075 3.16565 5.93888 3.49694C6.267 3.82822 6.43106 4.236 6.43106 4.72027C6.43106 5.20455 6.26541 5.61075 5.93411 5.93888C5.60283 6.267 5.19506 6.43106 4.71078 6.43106ZM9.99525 6.43106C9.51098 6.43106 9.10477 6.26541 8.77664 5.93411C8.44853 5.60283 8.28447 5.19506 8.28447 4.71078C8.28447 4.22651 8.45012 3.8203 8.78141 3.49217C9.11269 3.16406 9.52047 3 10.0047 3C10.489 3 10.8952 3.16565 11.2234 3.49694C11.5515 3.82822 11.7155 4.236 11.7155 4.72027C11.7155 5.20455 11.5499 5.61075 11.2186 5.93888C10.8873 6.267 10.4795 6.43106 9.99525 6.43106ZM15.2797 6.43106C14.7955 6.43106 14.3892 6.26541 14.0611 5.93411C13.733 5.60283 13.5689 5.19506 13.5689 4.71078C13.5689 4.22651 13.7346 3.8203 14.0659 3.49217C14.3972 3.16406 14.8049 3 15.2892 3C15.7735 3 16.1797 3.16565 16.5078 3.49694C16.8359 3.82822 17 4.236 17 4.72027C17 5.20455 16.8344 5.61075 16.5031 5.93888C16.1718 6.267 15.764 6.43106 15.2797 6.43106Z",
+    fill: "currentColor"
+  }
+) }) }));
+AppsIcon.displayName = "AppsIcon";
 
 export { AppsIcon };

package/dist/vanilla/src/icons/ArrowDownIcon.js

@@ -1,15 +1,14 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function ArrowDownIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M15.7443 10.7719L10.6663 15.7328C10.5687 15.8281 10.464 15.8965 10.3522 15.9379C10.2403 15.9793 10.1253 16 10.007 16C9.88872 16 9.77366 15.9793 9.66182 15.9379C9.54995 15.8965 9.44524 15.8281 9.34768 15.7328L4.24311 10.7459C4.07261 10.5794 3.99179 10.3892 4.00066 10.1755C4.00954 9.96173 4.09922 9.77157 4.26971 9.605C4.44513 9.43845 4.64544 9.35637 4.87063 9.35877C5.09582 9.36119 5.29366 9.44567 5.46416 9.61223L9.18064 13.243V4.8073C9.18064 4.58489 9.26145 4.39474 9.42307 4.23685C9.58469 4.07895 9.77933 4 10.007 4C10.2346 4 10.4293 4.07895 10.5909 4.23685C10.7525 4.39474 10.8333 4.58489 10.8333 4.8073V13.243L14.5764 9.58623C14.7469 9.41967 14.9403 9.34072 15.1566 9.34938C15.373 9.35806 15.5688 9.44567 15.7443 9.61223C15.9148 9.78361 16 9.97809 16 10.1957C16 10.4133 15.9148 10.6054 15.7443 10.7719Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const ArrowDownIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M15.7443 10.7719L10.6663 15.7328C10.5687 15.8281 10.464 15.8965 10.3522 15.9379C10.2403 15.9793 10.1253 16 10.007 16C9.88872 16 9.77366 15.9793 9.66182 15.9379C9.54995 15.8965 9.44524 15.8281 9.34768 15.7328L4.24311 10.7459C4.07261 10.5794 3.99179 10.3892 4.00066 10.1755C4.00954 9.96173 4.09922 9.77157 4.26971 9.605C4.44513 9.43845 4.64544 9.35637 4.87063 9.35877C5.09582 9.36119 5.29366 9.44567 5.46416 9.61223L9.18064 13.243V4.8073C9.18064 4.58489 9.26145 4.39474 9.42307 4.23685C9.58469 4.07895 9.77933 4 10.007 4C10.2346 4 10.4293 4.07895 10.5909 4.23685C10.7525 4.39474 10.8333 4.58489 10.8333 4.8073V13.243L14.5764 9.58623C14.7469 9.41967 14.9403 9.34072 15.1566 9.34938C15.373 9.35806 15.5688 9.44567 15.7443 9.61223C15.9148 9.78361 16 9.97809 16 10.1957C16 10.4133 15.9148 10.6054 15.7443 10.7719Z",
+    fill: "currentColor"
+  }
+) }) }));
+ArrowDownIcon.displayName = "ArrowDownIcon";
 
 export { ArrowDownIcon };

package/dist/vanilla/src/icons/ArrowLeftIcon.js

@@ -1,15 +1,14 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function ArrowLeftIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M8.72808 15.7443L3.76717 10.6663C3.67185 10.5687 3.60349 10.464 3.56209 10.3522C3.5207 10.2403 3.5 10.1253 3.5 10.007C3.5 9.88872 3.5207 9.77366 3.56209 9.66182C3.60349 9.54995 3.67185 9.44524 3.76717 9.34768L8.75406 4.24311C8.92063 4.07261 9.11079 3.99179 9.32454 4.00066C9.53827 4.00954 9.72843 4.09922 9.895 4.26971C10.0616 4.44513 10.1436 4.64544 10.1412 4.87063C10.1388 5.09582 10.0543 5.29366 9.88777 5.46416L6.25696 9.18064H14.6927C14.9151 9.18064 15.1053 9.26145 15.2632 9.42307C15.4211 9.58469 15.5 9.77933 15.5 10.007C15.5 10.2346 15.4211 10.4293 15.2632 10.5909C15.1053 10.7525 14.9151 10.8333 14.6927 10.8333H6.25696L9.91377 14.5764C10.0803 14.7469 10.1593 14.9403 10.1506 15.1566C10.1419 15.373 10.0543 15.5688 9.88777 15.7443C9.71639 15.9148 9.52191 16 9.30432 16C9.08672 16 8.89464 15.9148 8.72808 15.7443Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const ArrowLeftIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M8.72808 15.7443L3.76717 10.6663C3.67185 10.5687 3.60349 10.464 3.56209 10.3522C3.5207 10.2403 3.5 10.1253 3.5 10.007C3.5 9.88872 3.5207 9.77366 3.56209 9.66182C3.60349 9.54995 3.67185 9.44524 3.76717 9.34768L8.75406 4.24311C8.92063 4.07261 9.11079 3.99179 9.32454 4.00066C9.53827 4.00954 9.72843 4.09922 9.895 4.26971C10.0616 4.44513 10.1436 4.64544 10.1412 4.87063C10.1388 5.09582 10.0543 5.29366 9.88777 5.46416L6.25696 9.18064H14.6927C14.9151 9.18064 15.1053 9.26145 15.2632 9.42307C15.4211 9.58469 15.5 9.77933 15.5 10.007C15.5 10.2346 15.4211 10.4293 15.2632 10.5909C15.1053 10.7525 14.9151 10.8333 14.6927 10.8333H6.25696L9.91377 14.5764C10.0803 14.7469 10.1593 14.9403 10.1506 15.1566C10.1419 15.373 10.0543 15.5688 9.88777 15.7443C9.71639 15.9148 9.52191 16 9.30432 16C9.08672 16 8.89464 15.9148 8.72808 15.7443Z",
+    fill: "currentColor"
+  }
+) }) }));
+ArrowLeftIcon.displayName = "ArrowLeftIcon";
 
 export { ArrowLeftIcon };

package/dist/vanilla/src/icons/ArrowRightIcon.js

@@ -1,15 +1,14 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function ArrowRightIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M10.7719 15.7443L15.7328 10.6663C15.8281 10.5687 15.8965 10.464 15.9379 10.3522C15.9793 10.2403 16 10.1253 16 10.007C16 9.88872 15.9793 9.77366 15.9379 9.66182C15.8965 9.54995 15.8281 9.44524 15.7328 9.34768L10.7459 4.24311C10.5794 4.07261 10.3892 3.99179 10.1755 4.00066C9.96173 4.00954 9.77157 4.09922 9.605 4.26971C9.43845 4.44513 9.35637 4.64544 9.35877 4.87063C9.36119 5.09582 9.44567 5.29366 9.61223 5.46416L13.243 9.18064H4.8073C4.58489 9.18064 4.39474 9.26145 4.23685 9.42307C4.07895 9.58469 4 9.77933 4 10.007C4 10.2346 4.07895 10.4293 4.23685 10.5909C4.39474 10.7525 4.58489 10.8333 4.8073 10.8333H13.243L9.58623 14.5764C9.41967 14.7469 9.34072 14.9403 9.34938 15.1566C9.35806 15.373 9.44567 15.5688 9.61223 15.7443C9.78361 15.9148 9.97809 16 10.1957 16C10.4133 16 10.6054 15.9148 10.7719 15.7443Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const ArrowRightIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M10.7719 15.7443L15.7328 10.6663C15.8281 10.5687 15.8965 10.464 15.9379 10.3522C15.9793 10.2403 16 10.1253 16 10.007C16 9.88872 15.9793 9.77366 15.9379 9.66182C15.8965 9.54995 15.8281 9.44524 15.7328 9.34768L10.7459 4.24311C10.5794 4.07261 10.3892 3.99179 10.1755 4.00066C9.96173 4.00954 9.77157 4.09922 9.605 4.26971C9.43845 4.44513 9.35637 4.64544 9.35877 4.87063C9.36119 5.09582 9.44567 5.29366 9.61223 5.46416L13.243 9.18064H4.8073C4.58489 9.18064 4.39474 9.26145 4.23685 9.42307C4.07895 9.58469 4 9.77933 4 10.007C4 10.2346 4.07895 10.4293 4.23685 10.5909C4.39474 10.7525 4.58489 10.8333 4.8073 10.8333H13.243L9.58623 14.5764C9.41967 14.7469 9.34072 14.9403 9.34938 15.1566C9.35806 15.373 9.44567 15.5688 9.61223 15.7443C9.78361 15.9148 9.97809 16 10.1957 16C10.4133 16 10.6054 15.9148 10.7719 15.7443Z",
+    fill: "currentColor"
+  }
+) }) }));
+ArrowRightIcon.displayName = "ArrowRightIcon";
 
 export { ArrowRightIcon };

package/dist/vanilla/src/icons/ArrowUpIcon.js

@@ -1,15 +1,14 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function ArrowUpIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M15.7443 9.22808L10.6663 4.26717C10.5687 4.17185 10.464 4.10349 10.3522 4.06209C10.2403 4.0207 10.1253 4 10.007 4C9.88872 4 9.77366 4.0207 9.66182 4.06209C9.54995 4.10349 9.44524 4.17185 9.34768 4.26717L4.24311 9.25406C4.07261 9.42063 3.99179 9.61079 4.00066 9.82454C4.00954 10.0383 4.09922 10.2284 4.26971 10.395C4.44513 10.5616 4.64544 10.6436 4.87063 10.6412C5.09582 10.6388 5.29366 10.5543 5.46416 10.3878L9.18064 6.75696V15.1927C9.18064 15.4151 9.26145 15.6053 9.42307 15.7632C9.58469 15.9211 9.77933 16 10.007 16C10.2346 16 10.4293 15.9211 10.5909 15.7632C10.7525 15.6053 10.8333 15.4151 10.8333 15.1927V6.75696L14.5764 10.4138C14.7469 10.5803 14.9403 10.6593 15.1566 10.6506C15.373 10.6419 15.5688 10.5543 15.7443 10.3878C15.9148 10.2164 16 10.0219 16 9.80432C16 9.58672 15.9148 9.39464 15.7443 9.22808Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const ArrowUpIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M15.7443 9.22808L10.6663 4.26717C10.5687 4.17185 10.464 4.10349 10.3522 4.06209C10.2403 4.0207 10.1253 4 10.007 4C9.88872 4 9.77366 4.0207 9.66182 4.06209C9.54995 4.10349 9.44524 4.17185 9.34768 4.26717L4.24311 9.25406C4.07261 9.42063 3.99179 9.61079 4.00066 9.82454C4.00954 10.0383 4.09922 10.2284 4.26971 10.395C4.44513 10.5616 4.64544 10.6436 4.87063 10.6412C5.09582 10.6388 5.29366 10.5543 5.46416 10.3878L9.18064 6.75696V15.1927C9.18064 15.4151 9.26145 15.6053 9.42307 15.7632C9.58469 15.9211 9.77933 16 10.007 16C10.2346 16 10.4293 15.9211 10.5909 15.7632C10.7525 15.6053 10.8333 15.4151 10.8333 15.1927V6.75696L14.5764 10.4138C14.7469 10.5803 14.9403 10.6593 15.1566 10.6506C15.373 10.6419 15.5688 10.5543 15.7443 10.3878C15.9148 10.2164 16 10.0219 16 9.80432C16 9.58672 15.9148 9.39464 15.7443 9.22808Z",
+    fill: "currentColor"
+  }
+) }) }));
+ArrowUpIcon.displayName = "ArrowUpIcon";
 
 export { ArrowUpIcon };

package/dist/vanilla/src/icons/ArtistIcon.js

@@ -1,15 +1,14 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function ArtistIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M5.30485 17.3949C5.12204 17.5329 4.93849 17.535 4.7542 17.4012C4.56991 17.2674 4.50494 17.0869 4.55929 16.8597L6.01039 11.8792L2.21442 9.00692C2.01877 8.86378 1.95701 8.67862 2.02914 8.45146C2.10128 8.22428 2.25444 8.11069 2.48864 8.11069H7.18876L8.69766 2.86877C8.7362 2.75777 8.79672 2.66856 8.87923 2.60114C8.96175 2.53371 9.05191 2.5 9.14973 2.5C9.24756 2.5 9.33772 2.53371 9.42023 2.60114C9.50274 2.66856 9.56327 2.75777 9.60181 2.86877L11.1107 8.11069H15.8108C16.045 8.11069 16.1982 8.22428 16.2703 8.45146C16.3425 8.67862 16.2807 8.86378 16.0851 9.00692L12.2891 11.8792L13.7402 16.8597C13.7945 17.0869 13.7296 17.2674 13.5453 17.4012C13.361 17.535 13.1774 17.5329 12.9946 17.3949L9.14973 14.3282L5.30485 17.3949ZM16.4171 17.1118L15.1083 16.0537L14.0307 12.3568L16.2615 10.6811H17.5791C17.6355 10.6811 17.7404 10.7973 17.8941 11.0296C18.0478 11.262 18.0342 11.4445 17.8534 11.5773L16.0836 12.9014L17.1552 16.5641C17.2046 16.7757 17.1051 16.9271 16.8565 17.0184C16.608 17.1097 16.4615 17.1408 16.4171 17.1118ZM12.2402 6.4925L11.6532 4.45113L12.1127 2.87653C12.1512 2.76555 12.2118 2.67764 12.2943 2.61281C12.3768 2.54797 12.467 2.51556 12.5648 2.51556C12.6626 2.51556 12.7528 2.54668 12.8353 2.60892C12.9178 2.67116 12.9783 2.76036 13.0169 2.87653L14.0485 6.4925H12.2402Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const ArtistIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M5.30485 17.3949C5.12204 17.5329 4.93849 17.535 4.7542 17.4012C4.56991 17.2674 4.50494 17.0869 4.55929 16.8597L6.01039 11.8792L2.21442 9.00692C2.01877 8.86378 1.95701 8.67862 2.02914 8.45146C2.10128 8.22428 2.25444 8.11069 2.48864 8.11069H7.18876L8.69766 2.86877C8.7362 2.75777 8.79672 2.66856 8.87923 2.60114C8.96175 2.53371 9.05191 2.5 9.14973 2.5C9.24756 2.5 9.33772 2.53371 9.42023 2.60114C9.50274 2.66856 9.56327 2.75777 9.60181 2.86877L11.1107 8.11069H15.8108C16.045 8.11069 16.1982 8.22428 16.2703 8.45146C16.3425 8.67862 16.2807 8.86378 16.0851 9.00692L12.2891 11.8792L13.7402 16.8597C13.7945 17.0869 13.7296 17.2674 13.5453 17.4012C13.361 17.535 13.1774 17.5329 12.9946 17.3949L9.14973 14.3282L5.30485 17.3949ZM16.4171 17.1118L15.1083 16.0537L14.0307 12.3568L16.2615 10.6811H17.5791C17.6355 10.6811 17.7404 10.7973 17.8941 11.0296C18.0478 11.262 18.0342 11.4445 17.8534 11.5773L16.0836 12.9014L17.1552 16.5641C17.2046 16.7757 17.1051 16.9271 16.8565 17.0184C16.608 17.1097 16.4615 17.1408 16.4171 17.1118ZM12.2402 6.4925L11.6532 4.45113L12.1127 2.87653C12.1512 2.76555 12.2118 2.67764 12.2943 2.61281C12.3768 2.54797 12.467 2.51556 12.5648 2.51556C12.6626 2.51556 12.7528 2.54668 12.8353 2.60892C12.9178 2.67116 12.9783 2.76036 13.0169 2.87653L14.0485 6.4925H12.2402Z",
+    fill: "currentColor"
+  }
+) }) }));
+ArtistIcon.displayName = "ArtistIcon";
 
 export { ArtistIcon };

package/dist/vanilla/src/icons/AssetIcon.js

@@ -1,15 +1,14 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Box } from '../../Box/Box.js';
-import '../sprinkles/sprinkles.js';
+import { forwardRef } from 'react';
+import { Icon } from './Icon.js';
 
-function AssetIcon(props) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, size: "4", ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M9.03299 15.7834C9.62917 15.7834 10.1326 15.5815 10.5432 15.1775C10.9538 14.7736 11.1591 14.2776 11.1591 13.6893V8.61173H12.7788C13.0108 8.61173 13.2079 8.53295 13.3702 8.3754C13.5325 8.21785 13.6136 8.02217 13.6136 7.78839C13.6136 7.5596 13.5325 7.36529 13.3702 7.20547C13.2079 7.04565 13.0108 6.96574 12.7788 6.96574H11.2924C11.0224 6.96574 10.7968 7.05504 10.6157 7.23363C10.4345 7.41222 10.3439 7.63459 10.3439 7.90076V12.0359C10.1571 11.8915 9.95126 11.7819 9.72651 11.7073C9.50176 11.6326 9.27273 11.5952 9.0394 11.5952C8.44142 11.5952 7.93712 11.797 7.52651 12.2006C7.1159 12.6041 6.9106 13.0998 6.9106 13.6875C6.9106 14.2752 7.11529 14.7715 7.52467 15.1763C7.93404 15.581 8.43682 15.7834 9.03299 15.7834ZM5.43638 18C4.89756 18 4.44013 17.8146 4.06408 17.4439C3.68803 17.0732 3.5 16.6223 3.5 16.0911V3.9089C3.5 3.37772 3.68803 2.92679 4.06408 2.55608C4.44013 2.18536 4.89756 2 5.43638 2H10.8682C11.094 2 11.3117 2.04239 11.5213 2.12717C11.7308 2.21193 11.9146 2.33285 12.0727 2.48992L16.003 6.40327C16.1624 6.55913 16.285 6.74034 16.371 6.9469C16.457 7.15348 16.5 7.36808 16.5 7.59071V16.0911C16.5 16.6223 16.312 17.0732 15.9359 17.4439C15.5599 17.8146 15.1024 18 14.5636 18H5.43638Z",
-      fill: "currentColor"
-    }
-  ) }) });
-}
+const AssetIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(Icon, { ref, ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M9.03299 15.7834C9.62917 15.7834 10.1326 15.5815 10.5432 15.1775C10.9538 14.7736 11.1591 14.2776 11.1591 13.6893V8.61173H12.7788C13.0108 8.61173 13.2079 8.53295 13.3702 8.3754C13.5325 8.21785 13.6136 8.02217 13.6136 7.78839C13.6136 7.5596 13.5325 7.36529 13.3702 7.20547C13.2079 7.04565 13.0108 6.96574 12.7788 6.96574H11.2924C11.0224 6.96574 10.7968 7.05504 10.6157 7.23363C10.4345 7.41222 10.3439 7.63459 10.3439 7.90076V12.0359C10.1571 11.8915 9.95126 11.7819 9.72651 11.7073C9.50176 11.6326 9.27273 11.5952 9.0394 11.5952C8.44142 11.5952 7.93712 11.797 7.52651 12.2006C7.1159 12.6041 6.9106 13.0998 6.9106 13.6875C6.9106 14.2752 7.11529 14.7715 7.52467 15.1763C7.93404 15.581 8.43682 15.7834 9.03299 15.7834ZM5.43638 18C4.89756 18 4.44013 17.8146 4.06408 17.4439C3.68803 17.0732 3.5 16.6223 3.5 16.0911V3.9089C3.5 3.37772 3.68803 2.92679 4.06408 2.55608C4.44013 2.18536 4.89756 2 5.43638 2H10.8682C11.094 2 11.3117 2.04239 11.5213 2.12717C11.7308 2.21193 11.9146 2.33285 12.0727 2.48992L16.003 6.40327C16.1624 6.55913 16.285 6.74034 16.371 6.9469C16.457 7.15348 16.5 7.36808 16.5 7.59071V16.0911C16.5 16.6223 16.312 17.0732 15.9359 17.4439C15.5599 17.8146 15.1024 18 14.5636 18H5.43638Z",
+    fill: "currentColor"
+  }
+) }) }));
+AssetIcon.displayName = "AssetIcon";
 
 export { AssetIcon };