@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/cjs/components/Select/common/SelectComponents.css

@@ -0,0 +1,296 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu, fieldText) */
+
+.select-value__CxDXF {
+  overflow: hidden;
+  flex: 1;
+  gap: inherit;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.select-trigger__k4Odp {
+  display: flex;
+  width: 100%;
+  min-height: var(--click-genericMenu-panel-size-height);
+  padding: var(--click-field-space-y) var(--click-field-space-x);
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-field-space-gap);
+  border: 1px solid var(--click-field-color-stroke-default);
+  border-radius: var(--click-field-radii-all);
+  background: var(--click-field-color-background-default);
+  color: var(--click-field-color-text-default);
+  font: var(--click-field-typography-fieldText-default);
+  cursor: pointer;
+}
+
+.select-trigger__k4Odp span:first-of-type {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.select-trigger__k4Odp:hover {
+  border: 1px solid var(--click-field-color-stroke-hover);
+  background: var(--click-field-color-background-hover);
+  color: var(--click-field-color-text-hover);
+}
+
+.select-trigger_error__fZGGT {
+  border: 1px solid var(--click-field-color-stroke-error);
+  background: var(--click-field-color-background-active);
+  color: var(--click-field-color-text-error);
+  font: var(--click-field-typography-fieldText-error);
+}
+
+.select-trigger_error__fZGGT:hover {
+  border: 1px solid var(--click-field-color-stroke-error);
+  color: var(--click-field-color-text-error);
+}
+
+/* stylelint-disable no-descending-specificity -- source order mirrors the
+   styled-components cascade: the focus/open active styling is followed by
+   focus-visible and disabled, matching the original template-literal order. */
+
+/*
+  The active (focus / open) styling is suppressed in the error state: the
+  styled-components original only emitted these rules in the non-error branch,
+  so an errored trigger keeps its error styling on focus/open.
+*/
+.select-trigger__k4Odp:not(.select-trigger_error__fZGGT):focus,
+.select-trigger__k4Odp:not(.select-trigger_error__fZGGT)[data-state='open'] {
+  border: 1px solid var(--click-field-color-stroke-active);
+  background: var(--click-field-color-background-active);
+  color: var(--click-field-color-text-active);
+  font: var(--click-field-typography-fieldText-active);
+}
+
+.select-trigger__k4Odp:not(.select-trigger_error__fZGGT):focus ~ label,
+.select-trigger__k4Odp:not(.select-trigger_error__fZGGT)[data-state='open'] ~ label {
+  color: var(--click-field-color-label-active);
+  font: var(--click-field-typography-label-active);
+}
+
+.select-trigger__k4Odp:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
+.select-trigger__k4Odp:disabled {
+  border: 1px solid var(--click-field-color-stroke-disabled);
+  background: var(--click-field-color-background-disabled);
+  color: var(--click-field-color-text-disabled);
+  font: var(--click-field-typography-fieldText-disabled);
+  cursor: not-allowed;
+}
+
+/* stylelint-enable no-descending-specificity */
+
+.select-trigger__k4Odp [data-hide-in-trigger] {
+  display: none;
+}
+
+.select-popover-content__30txk {
+  display: flex;
+  width: var(--radix-popover-trigger-width);
+  max-height: var(--radix-popover-content-available-height);
+  padding: 0.5rem 0;
+  overflow: hidden;
+  align-items: flex-start;
+  gap: 0.625rem;
+  border: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+  border-radius: 0.25rem;
+  background: var(--click-genericMenu-item-color-default-background-default);
+  box-shadow:
+    0 1px 3px 0 rgb(16 24 40 / 10%),
+    0 1px 2px 0 rgb(16 24 40 / 6%);
+  pointer-events: auto;
+}
+
+.select-popover-content_full-width__frIlp {
+  width: 100%;
+  min-width: var(--radix-popover-trigger-width);
+  max-width: var(--select-item-character-limit);
+}
+
+.search-bar-container__bidMt {
+  display: flex;
+  position: relative;
+  width: auto;
+  height: 0;
+  padding: 0;
+  justify-content: flex-start;
+  align-items: center;
+  color: var(--click-genericMenu-autocomplete-color-searchTerm-default);
+  font: var(--click-genericMenu-autocomplete-typography-search-term-default);
+}
+
+.search-bar-container_show-search__YLR4i {
+  height: auto;
+  padding: var(--click-genericMenu-item-space-y) var(--click-genericMenu-item-space-x);
+}
+
+.search-bar__J2qTl {
+  width: 100%;
+  height: 0;
+  min-height: 0;
+  /*
+    When hidden the original collapsed all padding to 0; when shown it set only
+    padding-right (in the _show-search modifier), leaving the input's default
+    vertical padding intact — that 2px of UA padding is load-bearing for height.
+  */
+  padding: 0;
+  gap: var(--click-genericMenu-item-space-gap);
+  border: none;
+  border-bottom: 0;
+  background: transparent;
+  color: var(--click-genericMenu-autocomplete-color-searchTerm-default);
+  font: var(--click-genericMenu-autocomplete-typography-search-term-default);
+  outline: none;
+}
+
+.search-bar__J2qTl::placeholder {
+  color: var(--click-genericMenu-autocomplete-color-placeholder-default);
+  font: var(--click-genericMenu-autocomplete-typography-search-placeholder-default);
+}
+
+.search-bar_show-search__IhdJT {
+  height: initial;
+  min-height: 21px;
+  padding: revert;
+  padding-right: 24px;
+  border-bottom: 2px solid var(--click-genericMenu-button-color-stroke-default);
+}
+
+.search-close__dB1cs {
+  visibility: hidden;
+  position: absolute;
+  top: var(--click-genericMenu-item-space-y);
+  right: var(--click-genericMenu-item-space-x);
+}
+
+.search-close_show-close__-Anjf {
+  visibility: visible;
+}
+
+/*
+  Added the max-height with calc as the content should always be fit inside SelectPopoverContent
+  SelectPopoverContent has hardcoded padding and thats why we are using 1 rem instead of tokens
+  This makes sure that the content is always visible with the scrolling
+*/
+.select-list__CNYUb {
+  display: flex;
+  width: inherit;
+  max-height: calc(var(--radix-popover-content-available-height) - 1rem);
+  flex-direction: column;
+}
+
+.select-list-content__AJbe9 {
+  width: inherit;
+  max-height: var(--select-list-max-height);
+  overflow: auto;
+  flex: 1;
+}
+
+.hidden-select-element__YZlhL {
+  visibility: hidden;
+  position: absolute;
+  z-index: -1;
+  height: 0;
+}
+
+.select-group-container__Pd5rW {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same width fallback chain so the container fills the available inline space. */
+  display: flex;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  background: transparent;
+  color: var(--click-genericMenu-item-color-default-text-muted);
+  font: var(--click-genericMenu-item-typography-sectionHeader-default);
+}
+
+.select-group-container__Pd5rW[aria-selected] {
+  outline: none;
+}
+
+.select-group-container__Pd5rW[hidden] {
+  display: none;
+}
+
+.select-group-name__TrAy3 {
+  display: flex;
+  width: 100%;
+  padding: var(--click-genericMenu-sectionHeader-space-top)
+    var(--click-genericMenu-item-space-x)
+    var(--click-genericMenu-sectionHeader-space-bottom);
+  overflow: hidden;
+  flex-direction: column;
+  gap: var(--click-genericMenu-item-space-gap);
+  border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+  color: var(--click-genericMenu-item-color-default-text-muted);
+  font: var(--click-genericMenu-item-typography-sectionHeader-default);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.select-group-content__OBO5d {
+  width: inherit;
+}
+
+/*
+  The original styled-components rule omitted the semicolon after `font`, but
+  stylis recovered and applied both the `font` and `padding` declarations, so
+  the rendered row used the button label typography and button/item padding.
+  Both are restored here to match that rendering.
+*/
+.select-no-data-container__b2319 {
+  display: block;
+  width: 100%;
+  padding: var(--click-genericMenu-button-space-y) var(--click-genericMenu-item-space-x);
+  overflow: hidden;
+  border: none;
+  background: var(--click-genericMenu-button-color-background-default);
+  color: var(--click-genericMenu-button-color-label-default);
+  font: var(--click-genericMenu-button-typography-label-default);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
+}
+
+.select-no-data-container__b2319[hidden='true'] {
+  display: none;
+}
+
+.select-no-data-container_clickable__J6Bkj {
+  cursor: pointer;
+}
+
+.check-icon__ORxKK {
+  opacity: 0;
+}
+
+.check-icon_show-check__rVelk {
+  opacity: 1;
+}
+
+.select-item-description-text__eKqEn {
+  white-space: normal;
+}
+
+[data-disabled] .select-item-description-text__eKqEn,
+[disabled] .select-item-description-text__eKqEn {
+  color: inherit;
+}
+
+/* don't show description when item is rendered in the trigger */
+.select-trigger__k4Odp .select-item-description-text__eKqEn {
+  display: none;
+}

package/dist/cjs/components/Select/common/SelectComponents.module.css.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"select-value": "select-value__CxDXF",
+	"select-trigger": "select-trigger__k4Odp",
+	"select-trigger_error": "select-trigger_error__fZGGT",
+	"select-popover-content": "select-popover-content__30txk",
+	"select-popover-content_full-width": "select-popover-content_full-width__frIlp",
+	"search-bar-container": "search-bar-container__bidMt",
+	"search-bar-container_show-search": "search-bar-container_show-search__YLR4i",
+	"search-bar": "search-bar__J2qTl",
+	"search-bar_show-search": "search-bar_show-search__IhdJT",
+	"search-close": "search-close__dB1cs",
+	"search-close_show-close": "search-close_show-close__-Anjf",
+	"select-list": "select-list__CNYUb",
+	"select-list-content": "select-list-content__AJbe9",
+	"hidden-select-element": "hidden-select-element__YZlhL",
+	"select-group-container": "select-group-container__Pd5rW",
+	"select-group-name": "select-group-name__TrAy3",
+	"select-group-content": "select-group-content__OBO5d",
+	"select-no-data-container": "select-no-data-container__b2319",
+	"select-no-data-container_clickable": "select-no-data-container_clickable__J6Bkj",
+	"check-icon": "check-icon__ORxKK",
+	"check-icon_show-check": "check-icon_show-check__rVelk",
+	"select-item-description-text": "select-item-description-text__eKqEn"
+};
+
+exports.default = styles;
+//# sourceMappingURL=SelectComponents.module.css.cjs.map

package/dist/cjs/components/Select/common/SelectComponents.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponents.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/SplitButton/SplitButton.css

@@ -0,0 +1,138 @@
+.split-button__EX3XI {
+  display: inline-flex;
+  width: revert;
+  overflow: hidden;
+  align-items: center;
+  border: 1px solid var(--split-stroke-default);
+  border-radius: var(--click-button-radii-all);
+  user-select: none;
+}
+
+.split-button_type_primary__n4Kxb {
+  --split-stroke-default: var(--click-button-split-primary-stroke-default);
+  --split-stroke-hover: var(--click-button-split-primary-stroke-hover);
+  --split-stroke-active: var(--click-button-split-primary-stroke-active);
+  --split-stroke-disabled: var(--click-button-split-primary-stroke-disabled);
+  --split-bg-main-default: var(--click-button-split-primary-background-main-default);
+  --split-bg-main-hover: var(--click-button-split-primary-background-main-hover);
+  --split-bg-main-active: var(--click-button-split-primary-background-main-active);
+  --split-bg-main-disabled: var(--click-button-split-primary-background-main-disabled);
+  --split-bg-action-default: var(--click-button-split-primary-background-action-default);
+  --split-bg-action-hover: var(--click-button-split-primary-background-action-hover);
+  --split-bg-action-active: var(--click-button-split-primary-background-action-active);
+  --split-bg-action-disabled: var(--click-button-split-primary-background-action-disabled);
+  --split-text-default: var(--click-button-split-primary-text-default);
+  --split-text-hover: var(--click-button-split-primary-text-hover);
+  --split-text-active: var(--click-button-split-primary-text-active);
+  --split-text-disabled: var(--click-button-split-primary-text-disabled);
+}
+
+.split-button_type_secondary__CMY5T {
+  --split-stroke-default: var(--click-button-split-secondary-stroke-default);
+  --split-stroke-hover: var(--click-button-split-secondary-stroke-hover);
+  --split-stroke-active: var(--click-button-split-secondary-stroke-active);
+  --split-stroke-disabled: var(--click-button-split-secondary-stroke-disabled);
+  --split-bg-main-default: var(--click-button-split-secondary-background-main-default);
+  --split-bg-main-hover: var(--click-button-split-secondary-background-main-hover);
+  --split-bg-main-active: var(--click-button-split-secondary-background-main-active);
+  --split-bg-main-disabled: var(--click-button-split-secondary-background-main-disabled);
+  --split-bg-action-default: var(--click-button-split-secondary-background-action-default);
+  --split-bg-action-hover: var(--click-button-split-secondary-background-action-hover);
+  --split-bg-action-active: var(--click-button-split-secondary-background-action-active);
+  --split-bg-action-disabled: var(--click-button-split-secondary-background-action-disabled);
+  --split-text-default: var(--click-button-split-secondary-text-default);
+  --split-text-hover: var(--click-button-split-secondary-text-hover);
+  --split-text-active: var(--click-button-split-secondary-text-active);
+  --split-text-disabled: var(--click-button-split-secondary-text-disabled);
+}
+
+.split-button_fill-width__4-oog {
+  width: 100%;
+}
+
+.split-button__EX3XI:hover {
+  border-color: var(--split-stroke-hover);
+}
+
+.split-button__EX3XI:focus-within {
+  border-color: var(--split-stroke-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/focus-within to mirror the source cascade order; the
+   pre-migration original omitted the hover/focus-within rules entirely when
+   disabled, so the disabled border-color must win over them. */
+.split-button_disabled__597A-,
+.split-button_disabled__597A-:hover,
+.split-button_disabled__597A-:focus-within {
+  border-color: var(--split-stroke-disabled);
+  cursor: not-allowed;
+}
+/* stylelint-enable no-descending-specificity */
+
+.split-button__primary__1RIoP {
+  width: revert;
+  padding: var(--click-button-split-space-y) var(--click-button-split-space-x);
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border: none;
+  border-radius: 0;
+  background: var(--split-bg-main-default);
+  color: var(--split-text-default);
+  font: var(--click-button-split-typography-label-default);
+}
+
+.split-button__primary_fill-width__RRkLi {
+  width: 100%;
+}
+
+.split-button__primary__1RIoP:hover {
+  background: var(--split-bg-main-hover);
+  color: var(--split-text-hover);
+  font: var(--click-button-split-typography-label-hover);
+}
+
+.split-button__primary__1RIoP:focus {
+  background: var(--split-bg-main-active);
+  color: var(--split-text-active);
+  font: var(--click-button-split-typography-label-active);
+}
+
+.split-button__primary__1RIoP:disabled {
+  background: var(--split-bg-main-disabled);
+  color: var(--split-text-disabled);
+  font: var(--click-button-split-typography-label-disabled);
+}
+
+.split-button__secondary__CYtzX {
+  padding: var(--click-button-split-icon-space-y) var(--click-button-split-icon-space-x);
+  align-self: stretch;
+  border: none;
+  border-radius: 0;
+  background: var(--split-bg-action-default);
+  color: var(--split-text-default);
+}
+
+.split-button__secondary__CYtzX:hover {
+  background: var(--split-bg-action-hover);
+  color: var(--split-text-hover);
+}
+
+.split-button__secondary__CYtzX:focus {
+  background: var(--split-bg-action-active);
+  color: var(--split-text-active);
+}
+
+.split-button__secondary__CYtzX[data-disabled] {
+  background: var(--split-bg-action-disabled);
+  color: var(--split-text-disabled);
+}
+
+.split-button__button-data__8yyZR {
+  width: auto;
+}
+
+.split-button__dropdown-content__nmia- {
+  min-width: var(--split-button-dropdown-min-width, 0);
+}

package/dist/cjs/components/SplitButton/SplitButton.module.css.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"split-button": "split-button__EX3XI",
+	"split-button_type_primary": "split-button_type_primary__n4Kxb",
+	"split-button_type_secondary": "split-button_type_secondary__CMY5T",
+	"split-button_fill-width": "split-button_fill-width__4-oog",
+	"split-button_disabled": "split-button_disabled__597A-",
+	"split-button__primary": "split-button__primary__1RIoP",
+	"split-button__primary_fill-width": "split-button__primary_fill-width__RRkLi",
+	"split-button__secondary": "split-button__secondary__CYtzX",
+	"split-button__button-data": "split-button__button-data__8yyZR",
+	"split-button__dropdown-content": "split-button__dropdown-content__nmia-"
+};
+
+exports.default = styles;
+//# sourceMappingURL=SplitButton.module.css.cjs.map

package/dist/cjs/components/SplitButton/SplitButton.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/SplitButton/index.cjs

@@ -1,17 +1,45 @@
+require("./SplitButton.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
 const BaseButton = require('../Button/BaseButton.cjs');
 const IconWrapper = require('../IconWrapper/index.cjs');
+const cva = require('../../lib/cva.cjs');
+const SplitButton_module = require('./SplitButton.module.css.cjs');
 const Dropdown = require('../Dropdown/index.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
+const triggerVariants = classVarianceAuthority.cva(SplitButton_module.default["split-button"], {
+  variants: {
+    type: {
+      primary: SplitButton_module.default["split-button_type_primary"],
+      secondary: SplitButton_module.default["split-button_type_secondary"]
+    },
+    fillWidth: {
+      true: SplitButton_module.default["split-button_fill-width"]
+    },
+    disabled: {
+      true: SplitButton_module.default["split-button_disabled"]
+    }
+  },
+  defaultVariants: {
+    type: "primary"
+  }
+});
+const primaryVariants = classVarianceAuthority.cva(SplitButton_module.default["split-button__primary"], {
+  variants: {
+    fillWidth: {
+      true: SplitButton_module.default["split-button__primary_fill-width"]
+    }
+  }
+});
 const SplitButton = ({
   type = "primary",
+  htmlType,
   disabled,
   menu,
   dir,
@@ -24,6 +52,7 @@ const SplitButton = ({
   children,
   icon,
   iconDir = "start",
+  className,
   ...props
 }) => {
   const ref = react.useRef(null);
@@ -43,19 +72,23 @@ const SplitButton = ({
       resizeObserver.unobserve(targetDiv);
     };
   }, []);
+  const contentStyle = react.useMemo(() => ({
+    "--split-button-dropdown-min-width": `${width}px`
+  }), [width]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.Dropdown, { dir, open, defaultOpen, onOpenChange, modal, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(SplitButtonTrigger, { $disabled: disabled, $fillWidth: fillWidth, ref, $type: type, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { disabled, $type: type, $fillWidth: fillWidth, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonData, { as: IconWrapper.IconWrapper, icon, iconDir, children }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SecondaryButton, { as: Dropdown.Dropdown.Trigger, disabled, $type: type, asChild: true, "data-testid": "split-button-dropdown", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-down", size: "sm" }) }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cva.cn(triggerVariants({
+      type,
+      fillWidth,
+      disabled
+    })), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BaseButton.BaseButton, { disabled, ...props, type: htmlType, className: cva.cn(primaryVariants({
+        fillWidth
+      }), className), children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { className: SplitButton_module.default["split-button__button-data"], icon, iconDir, children }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown.Trigger, { disabled, asChild: true, "data-testid": "split-button-dropdown", className: SplitButton_module.default["split-button__secondary"], children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-down", size: "sm" }) }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownContent, { as: Dropdown.Dropdown.Content, side, $width: width, sideOffset: 4, align: "end", children: menu.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(MenuContentItem, { parentKey: `split-menu-option-${index}`, ...item }, `split-menu-option-${index}`)) })
+    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown.Content, { side, sideOffset: 4, align: "end", className: SplitButton_module.default["split-button__dropdown-content"], style: contentStyle, children: menu.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(MenuContentItem, { parentKey: `split-menu-option-${index}`, ...item }, `split-menu-option-${index}`)) })
   ] });
 };
-const DropdownContent = styledComponents.styled.div.withConfig({
-  componentId: "sc-85zs9e-0"
-})(["min-width:", "px;"], ({
-  $width
-}) => $width);
 const MenuContentItem = ({
   items = [],
   type = "item",
@@ -78,84 +111,6 @@ const MenuContentItem = ({
     ] });
   }
 };
-const SplitButtonTrigger = styledComponents.styled.div.withConfig({
-  componentId: "sc-85zs9e-1"
-})(["display:inline-flex;align-items:center;overflow:hidden;user-select:none;", ""], ({
-  theme,
-  $disabled = false,
-  $type,
-  $fillWidth
-}) => `
-    width: ${$fillWidth ? "100%" : "revert"};
-    border-radius: ${theme.click.button.radii.all};
-    border: 1px solid ${theme.click.button.split[$type].stroke.default};
-    ${$disabled ? `
-          cursor: not-allowed;
-          border-color: ${theme.click.button.split[$type].stroke.disabled};
-        ` : `
-          &:hover {
-            border-color: ${theme.click.button.split[$type].stroke.hover};
-          }
-          &:focus-within {
-            border-color: ${theme.click.button.split[$type].stroke.active};
-          }
-        `}
-  `);
-const PrimaryButton = styledComponents.styled(BaseButton.BaseButton).withConfig({
-  componentId: "sc-85zs9e-2"
-})(["border:none;align-self:stretch;border-radius:0;align-items:center;padding:", ";", ""], ({
-  theme
-}) => `${theme.click.button.split.space.y} ${theme.click.button.split.space.x}`, ({
-  theme,
-  $type,
-  $fillWidth
-}) => `
-    width: ${$fillWidth ? "100%" : "revert"};
-    justify-content: center;
-    background: ${theme.click.button.split[$type].background.main.default};
-    color: ${theme.click.button.split[$type].text.default};
-    font: ${theme.click.button.split.typography.label.default};
-    &:hover {
-      background: ${theme.click.button.split[$type].background.main.hover};
-      color: ${theme.click.button.split[$type].text.hover};
-      font: ${theme.click.button.split.typography.label.hover};
-    }
-    &:focus {
-      background: ${theme.click.button.split[$type].background.main.active};
-      color: ${theme.click.button.split[$type].text.active};
-      font: ${theme.click.button.split.typography.label.active};
-    }
-    &:disabled {
-      background: ${theme.click.button.split[$type].background.main.disabled};
-      color: ${theme.click.button.split[$type].text.disabled};
-      font: ${theme.click.button.split.typography.label.disabled};
-    }
-  `);
-const SecondaryButton = styledComponents.styled(BaseButton.BaseButton).withConfig({
-  componentId: "sc-85zs9e-3"
-})(["border:none;align-self:stretch;border-radius:0;", ""], ({
-  theme,
-  $type
-}) => `
-    padding: ${theme.click.button.split.icon.space.y} ${theme.click.button.split.icon.space.x};
-    background: ${theme.click.button.split[$type].background.action.default};
-    color: ${theme.click.button.split[$type].text.default};
-    &:hover {
-      background: ${theme.click.button.split[$type].background.action.hover};
-      color: ${theme.click.button.split[$type].text.hover};
-    }
-    &:focus {
-      background: ${theme.click.button.split[$type].background.action.active};
-      color: ${theme.click.button.split[$type].text.active};
-    }
-    &[data-disabled] {
-      background: ${theme.click.button.split[$type].background.action.disabled};
-      color: ${theme.click.button.split[$type].text.disabled};
-    }
-  `);
-const ButtonData = styledComponents.styled.div.withConfig({
-  componentId: "sc-85zs9e-4"
-})(["width:auto;"]);
 
 exports.SplitButton = SplitButton;
 //# sourceMappingURL=index.cjs.map