@clickhouse/click-ui 0.0.138 → 0.0.140

package/dist/click-ui.es.js

@@ -3161,7 +3161,7 @@ const Button$2 = styled.button.withConfig({
     cursor: not-allowed;
   }
   `);
-const FormFieldLabel = styled.label.withConfig({
+const FormFieldLabel$1 = styled.label.withConfig({
   componentId: "sc-1gg29zb-0"
 })(["", ""], ({
   theme: theme2,
@@ -3192,7 +3192,34 @@ const Label$1 = ({
   error: error2,
   children,
   ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel, { disabled, $error: error2, ...props, children });
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel$1, { disabled, $error: error2, ...props, children });
+const FormFieldLabel = styled.label.withConfig({
+  componentId: "sc-e2xmgs-0"
+})(["", ""], ({
+  theme: theme2,
+  disabled
+}) => `
+    ${disabled ? `
+    color: ${theme2.click.field.color.genericLabel.disabled};
+    font: ${theme2.click.field.typography.genericLabel.disabled};
+    ` : `
+    color: ${theme2.click.field.color.genericLabel.default};
+    font: ${theme2.click.field.typography.genericLabel.default};
+    &:hover {
+      color: ${theme2.click.field.color.genericLabel.hover};
+      font: ${theme2.click.field.typography.genericLabel.hover};
+    }
+    &:focus, &:focus-within {
+      color: ${theme2.click.field.color.genericLabel.active};
+      font: ${theme2.click.field.typography.genericLabel.active};
+    }
+    `};
+  `);
+const GenericLabel = ({
+  disabled,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel, { disabled, ...props, children });
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -8903,21 +8930,24 @@ const Accordion = ({
   iconSize,
   gap,
   children,
+  fillWidth = false,
   ...delegated
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, children: [
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, className: "asasas", ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, $fillWidth: fillWidth, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
       icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: size2, children: title })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, children: title })
   ] }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { children })
+  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
+    children
+  ] })
 ] }) });
 const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
   componentId: "sc-1ysh219-0"
-})(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ""], ({
+})(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
   theme: theme2,
   $size = "md",
   color = "default"
@@ -8936,7 +8966,9 @@ const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withC
       font: ${theme2.click.accordion[$size].typography.label.hover};
       cursor: pointer;
     }
-  `);
+  `, ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
 const AccordionIconWrapper = styled.div.withConfig({
   componentId: "sc-1ysh219-1"
 })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
@@ -10688,7 +10720,7 @@ const $e698a72e93240346$export$be92b6f5f03c0fe9 = $e698a72e93240346$export$48513
 const $e698a72e93240346$export$adb584737d712b70 = $e698a72e93240346$export$59aad738f51d1c05;
 const Wrapper$6 = styled(FormRoot).withConfig({
   componentId: "sc-1sck1ja-0"
-})(["max-width:fit-content;"]);
+})(["align-items:center;max-width:fit-content;"]);
 const Checkbox = ({
   id,
   label,
@@ -10699,8 +10731,8 @@ const Checkbox = ({
 }) => {
   const defaultId = useId();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$6, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
 const CheckInput = styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
@@ -32307,10 +32339,25 @@ const Wrapper$3 = styled.div.withConfig({
     color: ${theme2.click.field.color.text.default};
     border: 1px solid ${theme2.click.field.color.stroke.default};
     background: ${theme2.click.field.color.background.default};
+
+    *:autofill,
+    *:-webkit-autofill  {
+      -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.default} inset;
+      -webkit-text-fill-color: ${theme2.click.field.color.text.default};
+      caret-color: ${theme2.click.field.color.text.default};
+    }
+
     &:hover {
       border: 1px solid ${theme2.click.field.color.stroke.hover};
       background: ${theme2.click.field.color.background.hover};
       color: ${theme2.click.field.color.text.hover};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.hover} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.hover};
+        caret-color: ${theme2.click.field.color.text.hover};
+      }
     }
     ${$resize === "none" ? "" : `
       resize: ${$resize};
@@ -32322,9 +32369,23 @@ const Wrapper$3 = styled.div.withConfig({
       border: 1px solid ${theme2.click.field.color.stroke.error};
       background: ${theme2.click.field.color.background.active};
       color: ${theme2.click.field.color.text.error};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+        caret-color: ${theme2.click.field.color.text.error};
+      }
+
       &:hover {
-      border: 1px solid ${theme2.click.field.color.stroke.error};
-      color: ${theme2.click.field.color.text.error};
+        border: 1px solid ${theme2.click.field.color.stroke.error};
+        color: ${theme2.click.field.color.text.error};
+        *:autofill,
+        *:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+          -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+          caret-color: ${theme2.click.field.color.text.error};
+        }
       }
     ` : `
     &:focus-within,
@@ -32333,6 +32394,13 @@ const Wrapper$3 = styled.div.withConfig({
       border: 1px solid ${theme2.click.field.color.stroke.active};
       background: ${theme2.click.field.color.background.active};
       color: ${theme2.click.field.color.text.active};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.active} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.active};
+        caret-color: ${theme2.click.field.color.text.active};
+      }
     }
     `};
     &:disabled, &.disabled {
@@ -32340,6 +32408,13 @@ const Wrapper$3 = styled.div.withConfig({
       border: 1px solid ${theme2.click.field.color.stroke.disabled};
       background: ${theme2.click.field.color.background.disabled};
       color: ${theme2.click.field.color.text.disabled};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.disabled} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.disabled};
+        caret-color: ${theme2.click.field.color.text.disabled};
+      }
     }
   `);
 const InputWrapper = ({
@@ -32608,7 +32683,7 @@ const Pagination = ({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, "aria-label": currentPage.toString(), min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
       !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
         "of ",
         formatNumber(totalPages)
@@ -32971,8 +33046,8 @@ const RadioGroupItem = ({
 }) => {
   const defaultId = useId();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$1, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RadioGroupIndicator, {}) }),
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RadioGroupIndicator, {}) }),
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
 RadioGroupItem.displayName = "RadioGroupItem";
@@ -37318,7 +37393,7 @@ const NavContext = createContext({
 });
 const CollapsibleContainer = styled.div.withConfig({
   componentId: "sc-guwmyz-0"
-})(["width:100%;"]);
+})(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
 const Collapsible = ({
   open: openProp,
   onOpenChange: onOpenChangeProp,
@@ -37378,7 +37453,7 @@ CollapsipleHeader.displayName = "CollapsibleHeader";
 Collapsible.Header = CollapsipleHeader;
 const CollapsipleTriggerButton = styled(EmptyButton$1).withConfig({
   componentId: "sc-guwmyz-2"
-})(['display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
+})(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
 const CollapsipleTrigger = ({
   onClick: onClickProp,
   children,
@@ -37768,7 +37843,7 @@ const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5c
 const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
 const Wrapper = styled(FormRoot).withConfig({
   componentId: "sc-egkkgl-0"
-})(["max-width:fit-content;"]);
+})(["align-items:center;max-width:fit-content;"]);
 const Switch = forwardRef(({
   checked,
   disabled,
@@ -37780,8 +37855,8 @@ const Switch = forwardRef(({
 }, ref) => {
   const defaultId = useId();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper, { $orientation: orientation, $dir: dir, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, checked, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, { $checked: checked }) }),
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, "aria-label": `${label}`, checked, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, { $checked: checked }) }),
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 });
 const getRootVars = (theme2, disabled, checked) => {
@@ -38012,6 +38087,17 @@ const Tabs = ({
 Tabs.TriggersList = TriggersList;
 Tabs.Trigger = Trigger;
 Tabs.Content = Content;
+const FullWidthTabs = styled(Tabs).withConfig({
+  componentId: "sc-tj736u-3"
+})(["width:100%;"]);
+FullWidthTabs.Trigger = styled(Trigger).withConfig({
+  componentId: "sc-tj736u-4"
+})(["", ";"], (props) => props.width ? `width: ${props.width};` : `
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+  `);
+FullWidthTabs.TriggersList = TriggersList;
 const TabsContainer = styled.div.withConfig({
   componentId: "sc-137ymle-0"
 })(["display:flex;position:relative;overflow:auto;overscroll-behavior:none;scrollbar-width:0;max-width:", ";&::-webkit-scrollbar{height:0;}"], ({
@@ -38072,7 +38158,7 @@ const FileTabs = ({
       ref.current.scrollLeft += evt.deltaY;
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContainer, { ref, onWheel, onScroll: (e) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContainer, { ref, onWheel, role: "tablist", onScroll: (e) => {
     e.preventDefault();
     e.stopPropagation();
   }, $count: (listProp ?? list).length, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsSortableContainer, { as: distExports.ReactSortable, direction: direction ?? "horizontal", group: group ?? "tabbar", list: listProp ?? list, setList: setListProp ?? setList, onEnd: (evt, sortable, store) => {
@@ -38086,7 +38172,7 @@ const FileTabs = ({
     if (typeof onEnd === "function") {
       onEnd(evt, sortable, store);
     }
-  }, revertOnSpill: true, ...props, children: Children.map(children, (child, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { tabIndex: index2, role: "tab", onClick: onSelect(index2), children: child }, `tab-element-${index2}`)) }) }) });
+  }, revertOnSpill: true, ...props, children: Children.map(children, (child, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { tabIndex: index2 + 1, role: "tab", onClick: onSelect(index2), children: child }, `tab-element-${index2}`)) }) }) });
 };
 const TabElement = styled.div.withConfig({
   componentId: "sc-137ymle-2"
@@ -38266,12 +38352,12 @@ const Thead = ({
       actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(StyledThead, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-      isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
+      isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
       headers.map(({
         width,
         ...headerProps
       }, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { onSort: onSort(headerProps, index2), size: size2, ...headerProps }, `table-header-${index2}-${width}`)),
-      actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2 })
+      actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { "aria-label": "Actions", $size: size2 })
     ] }) })
   ] });
 };
@@ -41784,9 +41870,9 @@ const click$2 = {
   avatar: {
     color: {
       background: {
-        "default": "#696e79",
-        hover: "#53575f",
-        active: "#53575f"
+        "default": "#808691",
+        hover: "#b3b6bd",
+        active: "#b3b6bd"
       },
       text: {
         "default": "#1F1F1C",
@@ -42828,8 +42914,8 @@ const click$2 = {
       color: {
         background: {
           "default": "#1F1F1C",
-          hover: "#1F1F1C",
-          active: "lch(13.9 2.07 105)"
+          hover: "lch(15.8 0 0)",
+          active: "lch(17.9 0 0)"
         },
         stroke: {
           "default": "#323232"
@@ -47879,6 +47965,7 @@ const StepItem = styled.div.withConfig({
     row-gap: ${theme2.click.stepper.vertical[$type].content.space.gap.y};
     column-gap: ${theme2.click.stepper.vertical[$type].content.space.gap.x};
     padding-bottom: ${theme2.click.stepper.vertical[$type].content.space.bottom[$isOpen ? "active" : "default"]};
+    box-sizing: content-box;
     &:not(:last-of-type) {
       &::before{
         content: "";
@@ -47887,7 +47974,8 @@ const StepItem = styled.div.withConfig({
         height: 100%;
         left: calc(${theme2.click.stepper.vertical[$type].step.size.width}  / 2 );
         width: ${theme2.click.stepper.vertical[$type].connector.size.width};
-        background: ${theme2.click.stepper.vertical[$type].connector.color.stroke[$status]}
+        background: ${theme2.click.stepper.vertical[$type].connector.color.stroke[$status]};
+        box-sizing: content-box;
       }
     }
   `);
@@ -47924,8 +48012,10 @@ const StepBubble = styled.div.withConfig({
     font: ${theme2.click.stepper.vertical.numbered.step.typography.number.default};
     color: ${theme2.click.stepper.vertical[$type].step.color.icon[$status]};
     counter-increment: vertical-stepper;
+    box-sizing: content-box;
     ${$type === "numbered" && $status !== "complete" ? `
         &::before {
+          box-sizing: content-box;
           font: inherit;
           color: inherit;
           content: counter(vertical-stepper);
@@ -47933,6 +48023,7 @@ const StepBubble = styled.div.withConfig({
     ` : ""}
       ${$status == "complete" && $type === "bulleted" ? `
       &::after {
+        box-sizing: content-box;
         content: "";
         position: absolute;
         width: 50%;
@@ -48015,6 +48106,8 @@ export {
   Flags,
   Flyout,
   FormContainer,
+  FullWidthTabs,
+  GenericLabel,
   Grid,
   GridContainer$1 as GridContainer,
   HoverCard,

package/dist/click-ui.umd.js

@@ -3178,7 +3178,7 @@ var __publicField = (obj, key, value) => {
     cursor: not-allowed;
   }
   `);
-  const FormFieldLabel = styled.label.withConfig({
+  const FormFieldLabel$1 = styled.label.withConfig({
     componentId: "sc-1gg29zb-0"
   })(["", ""], ({
     theme: theme2,
@@ -3209,7 +3209,34 @@ var __publicField = (obj, key, value) => {
     error: error2,
     children,
     ...props
-  }) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel, { disabled, $error: error2, ...props, children });
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel$1, { disabled, $error: error2, ...props, children });
+  const FormFieldLabel = styled.label.withConfig({
+    componentId: "sc-e2xmgs-0"
+  })(["", ""], ({
+    theme: theme2,
+    disabled
+  }) => `
+    ${disabled ? `
+    color: ${theme2.click.field.color.genericLabel.disabled};
+    font: ${theme2.click.field.typography.genericLabel.disabled};
+    ` : `
+    color: ${theme2.click.field.color.genericLabel.default};
+    font: ${theme2.click.field.typography.genericLabel.default};
+    &:hover {
+      color: ${theme2.click.field.color.genericLabel.hover};
+      font: ${theme2.click.field.typography.genericLabel.hover};
+    }
+    &:focus, &:focus-within {
+      color: ${theme2.click.field.color.genericLabel.active};
+      font: ${theme2.click.field.typography.genericLabel.active};
+    }
+    `};
+  `);
+  const GenericLabel = ({
+    disabled,
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldLabel, { disabled, ...props, children });
   function _extends$1() {
     _extends$1 = Object.assign ? Object.assign.bind() : function(target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -8920,21 +8947,24 @@ var __publicField = (obj, key, value) => {
     iconSize,
     gap,
     children,
+    fillWidth = false,
     ...delegated
-  }) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, children: [
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, className: "asasas", ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, $fillWidth: fillWidth, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: size2, children: title })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, children: title })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { children })
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
+      children
+    ] })
   ] }) });
   const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-1ysh219-0"
-  })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ""], ({
+  })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
     theme: theme2,
     $size = "md",
     color = "default"
@@ -8953,7 +8983,9 @@ var __publicField = (obj, key, value) => {
       font: ${theme2.click.accordion[$size].typography.label.hover};
       cursor: pointer;
     }
-  `);
+  `, ({
+    $fillWidth
+  }) => $fillWidth && "width: 100%");
   const AccordionIconWrapper = styled.div.withConfig({
     componentId: "sc-1ysh219-1"
   })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
@@ -10705,7 +10737,7 @@ var __publicField = (obj, key, value) => {
   const $e698a72e93240346$export$adb584737d712b70 = $e698a72e93240346$export$59aad738f51d1c05;
   const Wrapper$6 = styled(FormRoot).withConfig({
     componentId: "sc-1sck1ja-0"
-  })(["max-width:fit-content;"]);
+  })(["align-items:center;max-width:fit-content;"]);
   const Checkbox = ({
     id,
     label,
@@ -10716,8 +10748,8 @@ var __publicField = (obj, key, value) => {
   }) => {
     const defaultId = React.useId();
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$6, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
-      label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+      label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   };
   const CheckInput = styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
@@ -32324,10 +32356,25 @@ var __publicField = (obj, key, value) => {
     color: ${theme2.click.field.color.text.default};
     border: 1px solid ${theme2.click.field.color.stroke.default};
     background: ${theme2.click.field.color.background.default};
+
+    *:autofill,
+    *:-webkit-autofill  {
+      -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.default} inset;
+      -webkit-text-fill-color: ${theme2.click.field.color.text.default};
+      caret-color: ${theme2.click.field.color.text.default};
+    }
+
     &:hover {
       border: 1px solid ${theme2.click.field.color.stroke.hover};
       background: ${theme2.click.field.color.background.hover};
       color: ${theme2.click.field.color.text.hover};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.hover} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.hover};
+        caret-color: ${theme2.click.field.color.text.hover};
+      }
     }
     ${$resize === "none" ? "" : `
       resize: ${$resize};
@@ -32339,9 +32386,23 @@ var __publicField = (obj, key, value) => {
       border: 1px solid ${theme2.click.field.color.stroke.error};
       background: ${theme2.click.field.color.background.active};
       color: ${theme2.click.field.color.text.error};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+        caret-color: ${theme2.click.field.color.text.error};
+      }
+
       &:hover {
-      border: 1px solid ${theme2.click.field.color.stroke.error};
-      color: ${theme2.click.field.color.text.error};
+        border: 1px solid ${theme2.click.field.color.stroke.error};
+        color: ${theme2.click.field.color.text.error};
+        *:autofill,
+        *:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+          -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+          caret-color: ${theme2.click.field.color.text.error};
+        }
       }
     ` : `
     &:focus-within,
@@ -32350,6 +32411,13 @@ var __publicField = (obj, key, value) => {
       border: 1px solid ${theme2.click.field.color.stroke.active};
       background: ${theme2.click.field.color.background.active};
       color: ${theme2.click.field.color.text.active};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.active} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.active};
+        caret-color: ${theme2.click.field.color.text.active};
+      }
     }
     `};
     &:disabled, &.disabled {
@@ -32357,6 +32425,13 @@ var __publicField = (obj, key, value) => {
       border: 1px solid ${theme2.click.field.color.stroke.disabled};
       background: ${theme2.click.field.color.background.disabled};
       color: ${theme2.click.field.color.text.disabled};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.disabled} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.disabled};
+        caret-color: ${theme2.click.field.color.text.disabled};
+      }
     }
   `);
   const InputWrapper = ({
@@ -32625,7 +32700,7 @@ var __publicField = (obj, key, value) => {
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap: "xxs", fillWidth: false, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, onKeyDown, "aria-label": currentPage.toString(), min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
         !!totalPages && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
           "of ",
           formatNumber(totalPages)
@@ -32988,8 +33063,8 @@ var __publicField = (obj, key, value) => {
   }) => {
     const defaultId = React.useId();
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$1, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RadioGroupIndicator, {}) }),
-      label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RadioGroupIndicator, {}) }),
+      label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   };
   RadioGroupItem.displayName = "RadioGroupItem";
@@ -37335,7 +37410,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   });
   const CollapsibleContainer = styled.div.withConfig({
     componentId: "sc-guwmyz-0"
-  })(["width:100%;"]);
+  })(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
   const Collapsible = ({
     open: openProp,
     onOpenChange: onOpenChangeProp,
@@ -37395,7 +37470,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   Collapsible.Header = CollapsipleHeader;
   const CollapsipleTriggerButton = styled(EmptyButton$1).withConfig({
     componentId: "sc-guwmyz-2"
-  })(['display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
+  })(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
   const CollapsipleTrigger = ({
     onClick: onClickProp,
     children,
@@ -37785,7 +37860,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
   const Wrapper = styled(FormRoot).withConfig({
     componentId: "sc-egkkgl-0"
-  })(["max-width:fit-content;"]);
+  })(["align-items:center;max-width:fit-content;"]);
   const Switch = React.forwardRef(({
     checked,
     disabled,
@@ -37797,8 +37872,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }, ref) => {
     const defaultId = React.useId();
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper, { $orientation: orientation, $dir: dir, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, checked, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, { $checked: checked }) }),
-      label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id ?? defaultId, disabled, children: label })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, "aria-label": `${label}`, checked, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, { $checked: checked }) }),
+      label && /* @__PURE__ */ jsxRuntimeExports.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   });
   const getRootVars = (theme2, disabled, checked) => {
@@ -38029,6 +38104,17 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   Tabs.TriggersList = TriggersList;
   Tabs.Trigger = Trigger;
   Tabs.Content = Content;
+  const FullWidthTabs = styled(Tabs).withConfig({
+    componentId: "sc-tj736u-3"
+  })(["width:100%;"]);
+  FullWidthTabs.Trigger = styled(Trigger).withConfig({
+    componentId: "sc-tj736u-4"
+  })(["", ";"], (props) => props.width ? `width: ${props.width};` : `
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+  `);
+  FullWidthTabs.TriggersList = TriggersList;
   const TabsContainer = styled.div.withConfig({
     componentId: "sc-137ymle-0"
   })(["display:flex;position:relative;overflow:auto;overscroll-behavior:none;scrollbar-width:0;max-width:", ";&::-webkit-scrollbar{height:0;}"], ({
@@ -38089,7 +38175,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         ref.current.scrollLeft += evt.deltaY;
       }
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContainer, { ref, onWheel, onScroll: (e) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContainer, { ref, onWheel, role: "tablist", onScroll: (e) => {
       e.preventDefault();
       e.stopPropagation();
     }, $count: (listProp ?? list).length, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TabsSortableContainer, { as: distExports.ReactSortable, direction: direction ?? "horizontal", group: group ?? "tabbar", list: listProp ?? list, setList: setListProp ?? setList, onEnd: (evt, sortable, store) => {
@@ -38103,7 +38189,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       if (typeof onEnd === "function") {
         onEnd(evt, sortable, store);
       }
-    }, revertOnSpill: true, ...props, children: React.Children.map(children, (child, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { tabIndex: index2, role: "tab", onClick: onSelect(index2), children: child }, `tab-element-${index2}`)) }) }) });
+    }, revertOnSpill: true, ...props, children: React.Children.map(children, (child, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { tabIndex: index2 + 1, role: "tab", onClick: onSelect(index2), children: child }, `tab-element-${index2}`)) }) }) });
   };
   const TabElement = styled.div.withConfig({
     componentId: "sc-137ymle-2"
@@ -38283,12 +38369,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(StyledThead, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-        isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
+        isSelectable && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2, "aria-label": "Select column", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { onCheckedChange: onSelectAll, disabled: !hasRows }) }),
         headers.map(({
           width,
           ...headerProps
         }, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { onSort: onSort(headerProps, index2), size: size2, ...headerProps }, `table-header-${index2}-${width}`)),
-        actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { $size: size2 })
+        actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledHeader, { "aria-label": "Actions", $size: size2 })
       ] }) })
     ] });
   };
@@ -41801,9 +41887,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     avatar: {
       color: {
         background: {
-          "default": "#696e79",
-          hover: "#53575f",
-          active: "#53575f"
+          "default": "#808691",
+          hover: "#b3b6bd",
+          active: "#b3b6bd"
         },
         text: {
           "default": "#1F1F1C",
@@ -42845,8 +42931,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         color: {
           background: {
             "default": "#1F1F1C",
-            hover: "#1F1F1C",
-            active: "lch(13.9 2.07 105)"
+            hover: "lch(15.8 0 0)",
+            active: "lch(17.9 0 0)"
           },
           stroke: {
             "default": "#323232"
@@ -47896,6 +47982,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     row-gap: ${theme2.click.stepper.vertical[$type].content.space.gap.y};
     column-gap: ${theme2.click.stepper.vertical[$type].content.space.gap.x};
     padding-bottom: ${theme2.click.stepper.vertical[$type].content.space.bottom[$isOpen ? "active" : "default"]};
+    box-sizing: content-box;
     &:not(:last-of-type) {
       &::before{
         content: "";
@@ -47904,7 +47991,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         height: 100%;
         left: calc(${theme2.click.stepper.vertical[$type].step.size.width}  / 2 );
         width: ${theme2.click.stepper.vertical[$type].connector.size.width};
-        background: ${theme2.click.stepper.vertical[$type].connector.color.stroke[$status]}
+        background: ${theme2.click.stepper.vertical[$type].connector.color.stroke[$status]};
+        box-sizing: content-box;
       }
     }
   `);
@@ -47941,8 +48029,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     font: ${theme2.click.stepper.vertical.numbered.step.typography.number.default};
     color: ${theme2.click.stepper.vertical[$type].step.color.icon[$status]};
     counter-increment: vertical-stepper;
+    box-sizing: content-box;
     ${$type === "numbered" && $status !== "complete" ? `
         &::before {
+          box-sizing: content-box;
           font: inherit;
           color: inherit;
           content: counter(vertical-stepper);
@@ -47950,6 +48040,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     ` : ""}
       ${$status == "complete" && $type === "bulleted" ? `
       &::after {
+        box-sizing: content-box;
         content: "";
         position: absolute;
         width: 50%;
@@ -48031,6 +48122,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.Flags = Flags;
   exports2.Flyout = Flyout;
   exports2.FormContainer = FormContainer;
+  exports2.FullWidthTabs = FullWidthTabs;
+  exports2.GenericLabel = GenericLabel;
   exports2.Grid = Grid;
   exports2.GridContainer = GridContainer$1;
   exports2.HoverCard = HoverCard;

package/dist/components/Accordion/Accordion.d.ts

@@ -12,10 +12,11 @@ export interface AccordionProps extends SizeProp, Omit<RadixAccordion.AccordionS
     iconSize?: IconSize;
     gap?: Gap;
     children: React.ReactNode;
+    fillWidth?: boolean;
 }
 interface SizeProp {
     size?: Size;
 }
-declare const SidebarAccordion: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
-declare const AccordionToExport: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+declare const SidebarAccordion: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, fillWidth, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+declare const AccordionToExport: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, fillWidth, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export { AccordionToExport as Accordion, SidebarAccordion };

package/dist/components/GenericLabel/GenericLabel.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+
+export interface GenericLabelProps extends HTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+    htmlFor?: string;
+}
+export declare const GenericLabel: ({ disabled, children, ...props }: GenericLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/Tabs.d.ts

@@ -15,4 +15,16 @@ declare const Tabs: {
         ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
     }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
 };
-export { Tabs };
+declare const FullWidthTabs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<TabsProps, never>> & string & Omit<{
+    ({ defaultValue, children, ariaLabel, onValueChange, ...delegated }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    TriggersList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+    Trigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | import('react').RefObject<HTMLButtonElement> | null | undefined;
+    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
+    Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+}, keyof import('react').Component<any, {}, any>>;
+export { Tabs, FullWidthTabs };

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './types';
 export { Icon } from './Icon/Icon';
 export { IconButton } from './IconButton/IconButton';
 export { Label } from './Label/Label';
+export { GenericLabel } from './GenericLabel/GenericLabel';
 export { Dropdown } from './Dropdown/Dropdown';
 export { Accordion } from './Accordion/Accordion';
 export { Alert, DangerAlert, InfoAlert, WarningAlert, SuccessAlert } from './Alert/Alert';
@@ -50,7 +51,7 @@ export { SidebarCollapsibleTitle } from './SidebarCollapsibleTitle/SidebarCollap
 export { Spacer } from './Spacer/Spacer';
 export { SplitButton } from './SplitButton/SplitButton';
 export { Switch } from './Switch/Switch';
-export { Tabs } from './Tabs/Tabs';
+export { Tabs, FullWidthTabs } from './Tabs/Tabs';
 export { FileTabs, FileTabElement } from './FileTabs/FileTabs';
 export { Table } from './Table/Table';
 export { Text } from './Typography/Text/Text';

package/dist/components/types.d.ts

@@ -47,7 +47,7 @@ export type { VerticalStepperProps, VerticalStepProps, } from './VerticalStepper
 export type { CardHorizontalProps } from './CardHorizontal/CardHorizontal';
 export type { CardPromotionProps } from './CardPromotion/CardPromotion';
 export type { ProgressBarProps } from './ProgressBar/ProgressBar';
-export type { GridProps, CellProps, SelectedRegion, SelectionFocus, SelectionAction, GridContextMenuItemProps, Rectangle } from './Grid/types';
+export type { GridProps, CellProps, SelectedRegion, SelectionFocus, SelectionAction, GridContextMenuItemProps, Rectangle, } from './Grid/types';
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";
 export type Orientation = "horizontal" | "vertical";
@@ -55,6 +55,7 @@ export type { FormContainerProps } from './FormContainer/FormContainer';
 export type { AutoCompleteProps, AutoCompleteOptionListItem, } from './AutoComplete/AutoComplete';
 export type { PaginationProps } from './Pagination/Pagination';
 export type { ContextMenuItemProps } from './ContextMenu/ContextMenu';
+export type { GenericLabelProps } from './GenericLabel/GenericLabel';
 export type { IconButtonProps };
 export type { AlertProps };
 export type { AvatarProps };

package/dist/styles/variables.dark.json.d.ts

@@ -67,9 +67,9 @@ declare const _default: {
     "avatar": {
       "color": {
         "background": {
-          "default": "#696e79",
-          "hover": "#53575f",
-          "active": "#53575f"
+          "default": "#808691",
+          "hover": "#b3b6bd",
+          "active": "#b3b6bd"
         },
         "text": {
           "default": "#1F1F1C",
@@ -1111,8 +1111,8 @@ declare const _default: {
         "color": {
           "background": {
             "default": "#1F1F1C",
-            "hover": "#1F1F1C",
-            "active": "lch(13.9 2.07 105)"
+            "hover": "lch(15.8 0 0)",
+            "active": "lch(17.9 0 0)"
           },
           "stroke": {
             "default": "#323232"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.138",
+  "version": "0.0.140",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",