@stratakit/structures 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # Changelog
 
+## 0.4.0
+
+### Breaking changes
+
+- [#888](https://github.com/iTwin/design-system/pull/888): `Toolbar.Item` component no longer automatically uses the large version of the icon.
+
+  `#icon-large` must now be explicitly added to the URL to select the large icons from `@stratakit/icons`. For example:
+
+  ```diff
+    <Toolbar.Item
+  -   render={<IconButton icon={placeholderIcon} />}
+  +   render={<IconButton icon={`${placeholderIcon}#icon-large`} />}
+    />
+  ```
+
+- [#900](https://github.com/iTwin/design-system/pull/900): Renamed `Tabs.Root` component to `Tabs.Provider`.
+
+  ```diff
+  - <Tabs.Root>
+  + <Tabs.Provider>
+      <Tabs.TabList>…</Tabs.TabList>
+      <Tabs.TabPanel>…</Tabs.TabPanel>
+  - </Tabs.Root>
+  + </Tabs.Provider>
+  ```
+
+  This change makes StrataKit's naming convention more consistent. `Root` components always render a DOM element whereas `Provider` components have no underlying DOM element.
+
+- [#900](https://github.com/iTwin/design-system/pull/900): Renamed `DropdownMenu.Root` component to `DropdownMenu.Provider`.
+
+  ```diff
+  - <DropdownMenu.Root>
+  + <DropdownMenu.Provider>
+      <DropdownMenu.Button>…</DropdownMenu.Button>
+      <DropdownMenu.Content>…</DropdownMenu.Content>
+  - </DropdownMenu.Root>
+  + </DropdownMenu.Provider>
+  ```
+
+  This change makes StrataKit's naming convention more consistent. `Root` components always render a DOM element whereas `Provider` components have no underlying DOM element.
+
+### Non-breaking changes
+
+- [#903](https://github.com/iTwin/design-system/pull/903): Added proper styling for `Divider` rendered inside a `Toolbar.Group`.
+
+  ```tsx
+  <Toolbar.Group variant="solid">
+    <Toolbar.Item render={…} />
+    <Divider orientation="vertical" />
+    <Toolbar.Item render={…} />
+    <Toolbar.Item render={…} />
+  </Toolbar.Group>
+  ```
+
+- [#913](https://github.com/iTwin/design-system/pull/913): Updated internal CSS selectors in every component.
+- [#901](https://github.com/iTwin/design-system/pull/901): Added `orientation` prop to `Toolbar.Group` component. Set the `orientation` prop to `"vertical"` to display the toolbar vertically.
+- [#902](https://github.com/iTwin/design-system/pull/902): Updated active style of a ghost `IconButton` when used in a `Toolbar` component.
+- Updated dependencies:
+  - @stratakit/foundations@0.3.0
+  - @stratakit/bricks@0.4.0
+
+## 0.3.2
+
+- [#881](https://github.com/iTwin/design-system/pull/881): Updated CSS to use `--stratakit-space-` variables instead of hardcoded values in all components.
+  - Replaced hardcoded `rem` spacing values with new `px`-based variables in many components.
+- [#889](https://github.com/iTwin/design-system/pull/889): Fixed vertical centering of `Toolbar.Item`.
+- Updated dependencies:
+  - @stratakit/bricks@0.3.4
+  - @stratakit/foundations@0.2.3
+
 ## 0.3.1
 
 - [#870](https://github.com/iTwin/design-system/pull/870): Fixed an issue where `AccordionItem.Content` was being offset by decorations placed at the end of `AccordionItem.Header`. The content will now only include start indentation, and correctly stretch all the way up to the right edge.

package/dist/AccordionItem.js

@@ -39,8 +39,8 @@ const AccordionItemRoot = forwardRef(
           Role,
           {
             ...rest,
-            className: cx("\u{1F95D}-accordion-item", props.className),
-            "data-kiwi-open": open,
+            className: cx("\u{1F95D}AccordionItem", props.className),
+            "data-_sk-open": open,
             ref: forwardedRef
           }
         )
@@ -53,7 +53,7 @@ const AccordionItemHeader = forwardRef(
     Role,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-header", props.className),
+      className: cx("\u{1F95D}AccordionItemHeader", props.className),
       ref: forwardedRef
     }
   ) })
@@ -63,7 +63,7 @@ const AccordionItemButton = forwardRef(
     Disclosure,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-button", props.className),
+      className: cx("\u{1F95D}AccordionItemButton", props.className),
       ref: forwardedRef
     }
   )
@@ -74,7 +74,7 @@ const AccordionItemLabel = forwardRef(
     {
       ...props,
       variant: "body-sm",
-      className: cx("\u{1F95D}-accordion-item-label", props.className),
+      className: cx("\u{1F95D}AccordionItemLabel", props.className),
       ref: forwardedRef
     }
   )
@@ -84,7 +84,7 @@ const AccordionItemDecoration = forwardRef(
     Role,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-decoration", props.className),
+      className: cx("\u{1F95D}AccordionItemDecoration", props.className),
       ref: forwardedRef
     }
   )
@@ -95,13 +95,13 @@ const AccordionItemMarker = forwardRef(
     {
       ...props,
       variant: "ghost",
-      className: cx("\u{1F95D}-accordion-item-marker", props.className),
+      className: cx("\u{1F95D}AccordionItemMarker", props.className),
       ref: forwardedRef,
       children: props.children ?? /* @__PURE__ */ jsx(
         ChevronDown,
         {
           "aria-hidden": "true",
-          className: "\u{1F95D}-accordion-item-marker-chevron"
+          className: "\u{1F95D}AccordionItemMarkerChevron"
         }
       )
     }
@@ -112,7 +112,7 @@ const AccordionItemContent = forwardRef(
     DisclosureContent,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-content", props.className),
+      className: cx("\u{1F95D}AccordionItemContent", props.className),
       ref: forwardedRef
     }
   )
@@ -123,7 +123,7 @@ const AccordionItemHeading = forwardRef(
     {
       ...props,
       variant: "body-sm",
-      className: cx("\u{1F95D}-accordion-item-heading", props.className),
+      className: cx("\u{1F95D}AccordionItemHeading", props.className),
       ref: forwardedRef
     }
   )

package/dist/Banner.js

@@ -40,9 +40,9 @@ const BannerRoot = forwardRef((props, forwardedRef) => {
     Role,
     {
       ...rest,
-      "data-kiwi-tone": tone,
-      "data-kiwi-variant": variant,
-      className: cx("\u{1F95D}-banner", props.className),
+      "data-_sk-tone": tone,
+      "data-_sk-variant": variant,
+      className: cx("\u{1F95D}Banner", props.className),
       ref: forwardedRef
     }
   ) });
@@ -59,7 +59,7 @@ const BannerIcon = forwardRef((props, forwardedRef) => {
     {
       ...rest,
       render,
-      className: cx("\u{1F95D}-banner-icon", props.className),
+      className: cx("\u{1F95D}BannerIcon", props.className),
       ref: forwardedRef
     }
   );
@@ -80,7 +80,7 @@ const BannerLabel = forwardRef(
         id: labelId,
         render: /* @__PURE__ */ jsx("span", {}),
         ...props,
-        className: cx("\u{1F95D}-banner-label", props.className),
+        className: cx("\u{1F95D}BannerLabel", props.className),
         variant: "body-sm",
         ref: forwardedRef
       }
@@ -94,7 +94,7 @@ const BannerMessage = forwardRef(
       {
         ...props,
         variant: "body-sm",
-        className: cx("\u{1F95D}-banner-message", props.className),
+        className: cx("\u{1F95D}BannerMessage", props.className),
         ref: forwardedRef
       }
     );
@@ -106,7 +106,7 @@ const BannerActions = forwardRef(
       Role.div,
       {
         ...props,
-        className: cx("\u{1F95D}-banner-actions", props.className),
+        className: cx("\u{1F95D}BannerActions", props.className),
         ref: forwardedRef
       }
     );
@@ -123,7 +123,7 @@ const BannerDismissButton = forwardRef(
       {
         ...rest,
         id,
-        className: cx("\u{1F95D}-banner-dismiss-button", props.className),
+        className: cx("\u{1F95D}BannerDismissButton", props.className),
         variant: "ghost",
         label,
         "aria-labelledby": `${id} ${labelId || ""}`,

package/dist/Chip.js

@@ -36,9 +36,9 @@ const ChipRoot = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(ChipProvider, { children: /* @__PURE__ */ jsx(
     Role.div,
     {
-      "data-kiwi-variant": variant,
+      "data-_sk-variant": variant,
       ...rest,
-      className: cx("\u{1F95D}-chip", props.className),
+      className: cx("\u{1F95D}Chip", props.className),
       ref: forwardedRef
     }
   ) });
@@ -54,7 +54,7 @@ const ChipLabel = forwardRef((props, forwardedRef) => {
     {
       id: labelId,
       ...props,
-      className: cx("\u{1F95D}-chip-label", props.className),
+      className: cx("\u{1F95D}ChipLabel", props.className),
       ref: forwardedRef
     }
   );
@@ -72,7 +72,7 @@ const ChipDismissButton = forwardRef(
         "aria-labelledby": `${id} ${labelId}`,
         ...rest,
         label,
-        className: cx("\u{1F95D}-chip-dismiss-button", props.className),
+        className: cx("\u{1F95D}ChipDismissButton", props.className),
         variant: "ghost",
         labelVariant: "visually-hidden",
         icon: /* @__PURE__ */ jsx(Dismiss, {}),

package/dist/DEV/AccordionItem.js

@@ -39,8 +39,8 @@ const AccordionItemRoot = forwardRef(
           Role,
           {
             ...rest,
-            className: cx("\u{1F95D}-accordion-item", props.className),
-            "data-kiwi-open": open,
+            className: cx("\u{1F95D}AccordionItem", props.className),
+            "data-_sk-open": open,
             ref: forwardedRef
           }
         )
@@ -54,7 +54,7 @@ const AccordionItemHeader = forwardRef(
     Role,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-header", props.className),
+      className: cx("\u{1F95D}AccordionItemHeader", props.className),
       ref: forwardedRef
     }
   ) })
@@ -65,7 +65,7 @@ const AccordionItemButton = forwardRef(
     Disclosure,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-button", props.className),
+      className: cx("\u{1F95D}AccordionItemButton", props.className),
       ref: forwardedRef
     }
   )
@@ -77,7 +77,7 @@ const AccordionItemLabel = forwardRef(
     {
       ...props,
       variant: "body-sm",
-      className: cx("\u{1F95D}-accordion-item-label", props.className),
+      className: cx("\u{1F95D}AccordionItemLabel", props.className),
       ref: forwardedRef
     }
   )
@@ -88,7 +88,7 @@ const AccordionItemDecoration = forwardRef(
     Role,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-decoration", props.className),
+      className: cx("\u{1F95D}AccordionItemDecoration", props.className),
       ref: forwardedRef
     }
   )
@@ -100,13 +100,13 @@ const AccordionItemMarker = forwardRef(
     {
       ...props,
       variant: "ghost",
-      className: cx("\u{1F95D}-accordion-item-marker", props.className),
+      className: cx("\u{1F95D}AccordionItemMarker", props.className),
       ref: forwardedRef,
       children: props.children ?? /* @__PURE__ */ jsx(
         ChevronDown,
         {
           "aria-hidden": "true",
-          className: "\u{1F95D}-accordion-item-marker-chevron"
+          className: "\u{1F95D}AccordionItemMarkerChevron"
         }
       )
     }
@@ -118,7 +118,7 @@ const AccordionItemContent = forwardRef(
     DisclosureContent,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-content", props.className),
+      className: cx("\u{1F95D}AccordionItemContent", props.className),
       ref: forwardedRef
     }
   )
@@ -130,7 +130,7 @@ const AccordionItemHeading = forwardRef(
     {
       ...props,
       variant: "body-sm",
-      className: cx("\u{1F95D}-accordion-item-heading", props.className),
+      className: cx("\u{1F95D}AccordionItemHeading", props.className),
       ref: forwardedRef
     }
   )

package/dist/DEV/Banner.js

@@ -40,9 +40,9 @@ const BannerRoot = forwardRef((props, forwardedRef) => {
     Role,
     {
       ...rest,
-      "data-kiwi-tone": tone,
-      "data-kiwi-variant": variant,
-      className: cx("\u{1F95D}-banner", props.className),
+      "data-_sk-tone": tone,
+      "data-_sk-variant": variant,
+      className: cx("\u{1F95D}Banner", props.className),
       ref: forwardedRef
     }
   ) });
@@ -60,7 +60,7 @@ const BannerIcon = forwardRef((props, forwardedRef) => {
     {
       ...rest,
       render,
-      className: cx("\u{1F95D}-banner-icon", props.className),
+      className: cx("\u{1F95D}BannerIcon", props.className),
       ref: forwardedRef
     }
   );
@@ -82,7 +82,7 @@ const BannerLabel = forwardRef(
         id: labelId,
         render: /* @__PURE__ */ jsx("span", {}),
         ...props,
-        className: cx("\u{1F95D}-banner-label", props.className),
+        className: cx("\u{1F95D}BannerLabel", props.className),
         variant: "body-sm",
         ref: forwardedRef
       }
@@ -97,7 +97,7 @@ const BannerMessage = forwardRef(
       {
         ...props,
         variant: "body-sm",
-        className: cx("\u{1F95D}-banner-message", props.className),
+        className: cx("\u{1F95D}BannerMessage", props.className),
         ref: forwardedRef
       }
     );
@@ -110,7 +110,7 @@ const BannerActions = forwardRef(
       Role.div,
       {
         ...props,
-        className: cx("\u{1F95D}-banner-actions", props.className),
+        className: cx("\u{1F95D}BannerActions", props.className),
         ref: forwardedRef
       }
     );
@@ -128,7 +128,7 @@ const BannerDismissButton = forwardRef(
       {
         ...rest,
         id,
-        className: cx("\u{1F95D}-banner-dismiss-button", props.className),
+        className: cx("\u{1F95D}BannerDismissButton", props.className),
         variant: "ghost",
         label,
         "aria-labelledby": `${id} ${labelId || ""}`,

package/dist/DEV/Chip.js

@@ -36,9 +36,9 @@ const ChipRoot = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(ChipProvider, { children: /* @__PURE__ */ jsx(
     Role.div,
     {
-      "data-kiwi-variant": variant,
+      "data-_sk-variant": variant,
       ...rest,
-      className: cx("\u{1F95D}-chip", props.className),
+      className: cx("\u{1F95D}Chip", props.className),
       ref: forwardedRef
     }
   ) });
@@ -55,7 +55,7 @@ const ChipLabel = forwardRef((props, forwardedRef) => {
     {
       id: labelId,
       ...props,
-      className: cx("\u{1F95D}-chip-label", props.className),
+      className: cx("\u{1F95D}ChipLabel", props.className),
       ref: forwardedRef
     }
   );
@@ -74,7 +74,7 @@ const ChipDismissButton = forwardRef(
         "aria-labelledby": `${id} ${labelId}`,
         ...rest,
         label,
-        className: cx("\u{1F95D}-chip-dismiss-button", props.className),
+        className: cx("\u{1F95D}ChipDismissButton", props.className),
         variant: "ghost",
         labelVariant: "visually-hidden",
         icon: /* @__PURE__ */ jsx(Dismiss, {}),

package/dist/DEV/DropdownMenu.js

@@ -25,7 +25,7 @@ import {
 import cx from "classnames";
 import { Checkmark } from "./~utils.icons.js";
 import * as ListItem from "./~utils.ListItem.js";
-function DropdownMenuRoot(props) {
+function DropdownMenuProvider(props) {
   const {
     children,
     placement,
@@ -45,7 +45,7 @@ function DropdownMenuRoot(props) {
     }
   );
 }
-DEV: DropdownMenuRoot.displayName = "DropdownMenu.Root";
+DEV: DropdownMenuProvider.displayName = "DropdownMenu.Provider";
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
     const context = useMenuContext();
@@ -61,7 +61,7 @@ const DropdownMenuContent = forwardRef(
         gutter: 4,
         style: { ...popoverProps.style, ...props.style },
         wrapperProps: { popover: popoverProps.popover },
-        className: cx("\u{1F95D}-dropdown-menu", props.className),
+        className: cx("\u{1F95D}DropdownMenu", props.className),
         ref: forwardedRef
       }
     );
@@ -81,7 +81,7 @@ const DropdownMenuButton = forwardRef(
           children,
           /* @__PURE__ */ jsx(DisclosureArrow, {})
         ] }),
-        className: cx("\u{1F95D}-dropdown-menu-button", props.className),
+        className: cx("\u{1F95D}DropdownMenuButton", props.className),
         "data-has-popover-open": open || void 0,
         ref: forwardedRef
       }
@@ -106,7 +106,7 @@ const DropdownMenuItem = forwardRef(
                 accessibleWhenDisabled: true,
                 "aria-describedby": dotId,
                 ...rest,
-                className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+                className: cx("\u{1F95D}DropdownMenuItem", props.className),
                 ref: forwardedRef
               }
             )
@@ -119,7 +119,7 @@ const DropdownMenuItem = forwardRef(
           unstable_dot ? /* @__PURE__ */ jsx(
             ListItem.Decoration,
             {
-              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-dropdown-menu-item-dot", children: unstable_dot })
+              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}DropdownMenuItemDot", children: unstable_dot })
             }
           ) : null
         ]
@@ -141,7 +141,7 @@ const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
     {
       render: /* @__PURE__ */ jsx("span", {}),
       ...rest,
-      className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
+      className: cx("\u{1F95D}DropdownMenuItemShortcuts", props.className),
       ref: forwardedRef,
       children: shortcutKeys.map(({ key, isSymbol }, index) => {
         if (isSymbol) {
@@ -209,7 +209,7 @@ const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
             {
               accessibleWhenDisabled: true,
               ...rest,
-              className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+              className: cx("\u{1F95D}DropdownMenuItem", props.className),
               ref: forwardedRef
             }
           )
@@ -221,7 +221,7 @@ const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
         /* @__PURE__ */ jsx(
           ListItem.Decoration,
           {
-            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}DropdownMenuCheckmark" })
           }
         )
       ]
@@ -234,5 +234,5 @@ export {
   DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
-  DropdownMenuRoot as Root
+  DropdownMenuProvider as Provider
 };

package/dist/DEV/ErrorRegion.js

@@ -40,7 +40,7 @@ const ErrorRegionRoot = forwardRef(
     const pulse = () => {
       const el = containerRef.current;
       if (!el) return;
-      const id = "--\u{1F95D}error-region-pulse";
+      const id = "--\u{1F95D}ErrorRegion-pulse";
       const animations = el.getAnimations({ subtree: true });
       if (animations.find((animation) => animation.id === id)) return;
       el.animate(
@@ -87,24 +87,24 @@ const ErrorRegionRoot = forwardRef(
         {
           ...rest,
           "aria-labelledby": sectionLabelledBy,
-          className: cx("\u{1F95D}-error-region", props.className),
-          "data-kiwi-visible": !!label,
-          "data-kiwi-expanded": open,
+          className: cx("\u{1F95D}ErrorRegion", props.className),
+          "data-_sk-visible": !!label,
+          "data-_sk-expanded": open,
           ref: forwardedRef,
-          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}-error-region-container", ref: containerRef, children: [
+          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}ErrorRegionContainer", ref: containerRef, children: [
             /* @__PURE__ */ jsxs(
               DialogDisclosure,
               {
-                className: "\u{1F95D}-error-region-header",
+                className: "\u{1F95D}ErrorRegionHeader",
                 render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
                 children: [
-                  /* @__PURE__ */ jsx(StatusIcon, { tone: "attention", className: "\u{1F95D}-error-region-icon" }),
+                  /* @__PURE__ */ jsx(StatusIcon, { tone: "attention", className: "\u{1F95D}ErrorRegionIcon" }),
                   /* @__PURE__ */ jsx(
                     Text,
                     {
                       render: /* @__PURE__ */ jsx("span", {}),
                       id: labelId,
-                      className: "\u{1F95D}-error-region-label",
+                      className: "\u{1F95D}ErrorRegionLabel",
                       variant: "body-sm",
                       children: label
                     }
@@ -116,7 +116,7 @@ const ErrorRegionRoot = forwardRef(
             /* @__PURE__ */ jsx(
               Dialog,
               {
-                className: "\u{1F95D}-error-region-dialog",
+                className: "\u{1F95D}ErrorRegionDialog",
                 portal: false,
                 modal: false,
                 autoFocusOnShow: false,
@@ -125,7 +125,7 @@ const ErrorRegionRoot = forwardRef(
                   Collection,
                   {
                     store,
-                    className: "\u{1F95D}-error-region-items",
+                    className: "\u{1F95D}ErrorRegionItems",
                     role: "list",
                     children: items
                   }
@@ -153,11 +153,11 @@ const ErrorRegionItem = forwardRef(
       {
         ...rest,
         role: "listitem",
-        className: cx("\u{1F95D}-error-region-item", props.className),
+        className: cx("\u{1F95D}ErrorRegionItem", props.className),
         ref: forwardedRef,
         children: [
           /* @__PURE__ */ jsx(Text, { id: messageId, variant: "body-sm", children: message }),
-          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
+          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}ErrorRegionItemActions", children: actions })
         ]
       }
     );

package/dist/DEV/Table.js

@@ -20,7 +20,7 @@ const HtmlTable = forwardRef((props, forwardedRef) => {
       render: /* @__PURE__ */ jsx("table", {}),
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}-table", props.className)
+      className: cx("\u{1F95D}Table", props.className)
     }
   ) });
 });
@@ -39,7 +39,7 @@ const CustomTable = forwardRef(
         "aria-labelledby": captionId,
         ...props,
         ref: forwardedRef,
-        className: cx("\u{1F95D}-table", props.className)
+        className: cx("\u{1F95D}Table", props.className)
       }
     ) });
   }
@@ -57,7 +57,7 @@ const TableHeader = forwardRef(
         role,
         ...props,
         ref: forwardedRef,
-        className: cx("\u{1F95D}-table-header", props.className)
+        className: cx("\u{1F95D}TableHeader", props.className)
       }
     ) });
   }
@@ -73,7 +73,7 @@ const TableBody = forwardRef((props, forwardedRef) => {
       role: void 0,
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}-table-body", props.className)
+      className: cx("\u{1F95D}TableBody", props.className)
     }
   );
 });
@@ -89,7 +89,7 @@ const TableRow = forwardRef((props, forwardedRef) => {
       role,
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}-table-row", props.className)
+      className: cx("\u{1F95D}TableRow", props.className)
     }
   );
 });
@@ -113,7 +113,7 @@ const TableCaption = forwardRef(
         ...rest,
         id,
         ref: useMergedRefs(forwardedRef, captionIdRef),
-        className: cx("\u{1F95D}-table-caption", props.className)
+        className: cx("\u{1F95D}TableCaption", props.className)
       }
     );
   }
@@ -135,7 +135,7 @@ const TableCell = forwardRef((props, forwardedRef) => {
       role,
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}-table-cell", props.className)
+      className: cx("\u{1F95D}TableCell", props.className)
     }
   );
 });

package/dist/DEV/Tabs.js

@@ -9,7 +9,7 @@ import {
 import cx from "classnames";
 const supportsAnchorPositioning = isBrowser && CSS?.supports("anchor-name: --foo");
 const prefersReducedMotion = () => isBrowser && window.matchMedia("(prefers-reduced-motion)").matches;
-function Tabs(props) {
+function TabsProvider(props) {
   const {
     defaultSelectedId,
     selectedId,
@@ -57,15 +57,15 @@ function Tabs(props) {
     }
   );
 }
-DEV: Tabs.displayName = "Tabs.Root";
+DEV: TabsProvider.displayName = "Tabs.Provider";
 const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   return /* @__PURE__ */ jsx(
     AkTab.TabList,
     {
       ...rest,
-      "data-kiwi-tone": tone,
-      className: cx("\u{1F95D}-tab-list", props.className),
+      "data-_sk-tone": tone,
+      className: cx("\u{1F95D}TabList", props.className),
       ref: forwardedRef
     }
   );
@@ -77,7 +77,7 @@ const Tab = forwardRef((props, forwardedRef) => {
     {
       accessibleWhenDisabled: true,
       ...props,
-      className: cx("\u{1F95D}-tab", props.className),
+      className: cx("\u{1F95D}Tab", props.className),
       ref: forwardedRef
     }
   );
@@ -88,14 +88,14 @@ const TabPanel = forwardRef((props, forwardedRef) => {
     AkTab.TabPanel,
     {
       ...props,
-      className: cx("\u{1F95D}-tab-panel", props.className),
+      className: cx("\u{1F95D}TabPanel", props.className),
       ref: forwardedRef
     }
   );
 });
 DEV: TabPanel.displayName = "Tabs.TabPanel";
 export {
-  Tabs as Root,
+  TabsProvider as Provider,
   Tab,
   TabList,
   TabPanel