@quen-ui/components 0.0.14 → 1.0.1

package/dist/Switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { ReactNode } from 'react';
 import { ISwitchProps } from './types';
-declare const Switch: ({ className, size, defaultChecked, label, labelPosition, onChange, value, onClick, disabled, style, ...props }: ISwitchProps) => React.ReactNode;
+declare const Switch: ({ className, size, defaultChecked, label, labelPosition, onChange, value, onClick, disabled, style, thumbIcon, id, ...props }: ISwitchProps) => ReactNode;
 export default Switch;

package/dist/Switch/Switch.es.js

@@ -1,5 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { SwitchWrapperStyled, SwitchStyled } from "./styles.es.js";
+import { useRef, useEffect } from "react";
+import { useControllableState } from "@quen-ui/hooks";
+import { SwitchWrapperStyled, SwitchStyled, SwitchThumbWrapper } from "./styles.es.js";
 import Text from "../typography/Text/Text.es.js";
 const Switch = ({
   className,
@@ -12,13 +14,27 @@ const Switch = ({
   onClick,
   disabled,
   style,
+  thumbIcon,
+  id,
   ...props
 }) => {
+  const refInput = useRef(null);
+  const [checked, setChecked] = useControllableState({
+    value,
+    defaultValue: defaultChecked
+  });
+  useEffect(() => {
+    setChecked(value ?? false);
+  }, [value]);
   const handleChange = (e) => {
-    onChange == null ? void 0 : onChange(e.target.checked, e);
+    onChange?.(e.target.checked, e);
   };
   const handleClick = (e) => {
-    onClick == null ? void 0 : onClick(e.target.checked, e);
+    onClick?.(e.target.checked, e);
+    setChecked(e.target.checked);
+  };
+  const handleClickThumbIcon = () => {
+    refInput.current?.click();
   };
   return /* @__PURE__ */ jsxs(
     SwitchWrapperStyled,
@@ -28,11 +44,13 @@ const Switch = ({
       style,
       ...props,
       children: [
-        label && labelPosition === "after" && /* @__PURE__ */ jsx(Text, { size, as: "label", children: label }),
+        label && labelPosition === "after" && /* @__PURE__ */ jsx(Text, { size, as: "label", htmlForId: id, children: label }),
         /* @__PURE__ */ jsx(
           SwitchStyled,
           {
-            "aria-checked": value,
+            ref: refInput,
+            id,
+            "aria-checked": checked,
             "aria-disabled": disabled,
             role: "switch",
             type: "checkbox",
@@ -40,8 +58,16 @@ const Switch = ({
             disabled,
             onClick: handleClick,
             onChange: handleChange,
-            defaultChecked,
-            checked: value
+            checked
+          }
+        ),
+        thumbIcon && /* @__PURE__ */ jsx(
+          SwitchThumbWrapper,
+          {
+            onClick: handleClickThumbIcon,
+            size,
+            checked,
+            children: thumbIcon
           }
         ),
         label && labelPosition === "before" && /* @__PURE__ */ jsx(Text, { size, as: "label", children: label })

package/dist/Switch/styles.cjs.js

@@ -11,6 +11,7 @@ const getSizing = (theme, size) => {
   };
 };
 const SwitchWrapperStyled = styled.div`
+  position: relative;
   display: flex;
   gap: 0.75rem;
   align-items: center;
@@ -26,16 +27,16 @@ const SwitchStyled = styled.input`
   width: calc(${({ theme, size }) => getSizing(theme, size).height}* 2);
   height: ${({ theme, size }) => getSizing(theme, size).height};
   margin: 0;
-  background-color: ${({ theme }) => theme.colors.gray[4]};
+  background-color: ${({ theme }) => theme.components.Switch.background};
   border: ${({ theme }) => styled.css`
-    ${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}
+    ${theme.control.borderWidth} solid ${theme.components.Switch.borderColor}
   `};
   cursor: pointer;
   transition:
     background-color 0.15s,
     border-color 0.15s;
   -webkit-appearance: none;
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Switch.radius};
 
   &::before {
     content: "";
@@ -44,7 +45,7 @@ const SwitchStyled = styled.input`
     box-sizing: border-box;
     width: ${({ theme, size }) => getSizing(theme, size).circleSize};
     height: ${({ theme, size }) => getSizing(theme, size).circleSize};
-    background-color: ${({ theme }) => theme.colors.grayViolet[9]};
+    background-color: ${({ theme }) => theme.components.Switch.backgroundBefore};
     border-radius: 1rem;
     transition:
       transform 0.15s,
@@ -60,7 +61,7 @@ const SwitchStyled = styled.input`
   }
 
   &:checked {
-    background-color: ${({ theme }) => theme.colors.violet[9]};
+    background-color: ${({ theme }) => theme.components.Switch.checkedBackground};
 
     &::before {
       transform: translateX(0);
@@ -68,11 +69,27 @@ const SwitchStyled = styled.input`
   }
 
   &:disabled {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
+    background-color: ${({ theme }) => theme.components.Switch.disabledBackground};
     &::before {
-      background-color: ${({ theme }) => theme.colors.gray[4]};
+      background-color: ${({ theme }) => theme.components.Switch.disabledColor};
     }
   }
 `;
+const SwitchThumbWrapper = styled.span`
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  height: ${({ theme, size }) => getSizing(theme, size).circleSize};
+  width: ${({ theme, size }) => getSizing(theme, size).circleSize};
+  transition: margin-left 0.15s ease;
+  align-items: center;
+  justify-content: center;
+  margin-left: calc(
+    ${({ size }) => size === "l" ? "3px" : "4px"} +
+      ${({ checked, theme, size }) => checked ? `calc(${getSizing(theme, size).height} - ${size === "l" ? "3px" : "4px"})` : "0px"}
+  );
+  cursor: pointer;
+`;
 exports.SwitchStyled = SwitchStyled;
+exports.SwitchThumbWrapper = SwitchThumbWrapper;
 exports.SwitchWrapperStyled = SwitchWrapperStyled;

package/dist/Switch/styles.d.ts

@@ -5,3 +5,7 @@ export declare const SwitchWrapperStyled: import('styled-components/dist/types')
 export declare const SwitchStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
     size: TQuenSize;
 }>> & string;
+export declare const SwitchThumbWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    size: TQuenSize;
+    checked?: boolean;
+}>> & string;

package/dist/Switch/styles.es.js

@@ -9,6 +9,7 @@ const getSizing = (theme, size) => {
   };
 };
 const SwitchWrapperStyled = styled.div`
+  position: relative;
   display: flex;
   gap: 0.75rem;
   align-items: center;
@@ -24,16 +25,16 @@ const SwitchStyled = styled.input`
   width: calc(${({ theme, size }) => getSizing(theme, size).height}* 2);
   height: ${({ theme, size }) => getSizing(theme, size).height};
   margin: 0;
-  background-color: ${({ theme }) => theme.colors.gray[4]};
+  background-color: ${({ theme }) => theme.components.Switch.background};
   border: ${({ theme }) => css`
-    ${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}
+    ${theme.control.borderWidth} solid ${theme.components.Switch.borderColor}
   `};
   cursor: pointer;
   transition:
     background-color 0.15s,
     border-color 0.15s;
   -webkit-appearance: none;
-  border-radius: ${({ theme }) => theme.control.radius};
+  border-radius: ${({ theme }) => theme.components.Switch.radius};
 
   &::before {
     content: "";
@@ -42,7 +43,7 @@ const SwitchStyled = styled.input`
     box-sizing: border-box;
     width: ${({ theme, size }) => getSizing(theme, size).circleSize};
     height: ${({ theme, size }) => getSizing(theme, size).circleSize};
-    background-color: ${({ theme }) => theme.colors.grayViolet[9]};
+    background-color: ${({ theme }) => theme.components.Switch.backgroundBefore};
     border-radius: 1rem;
     transition:
       transform 0.15s,
@@ -58,7 +59,7 @@ const SwitchStyled = styled.input`
   }
 
   &:checked {
-    background-color: ${({ theme }) => theme.colors.violet[9]};
+    background-color: ${({ theme }) => theme.components.Switch.checkedBackground};
 
     &::before {
       transform: translateX(0);
@@ -66,13 +67,29 @@ const SwitchStyled = styled.input`
   }
 
   &:disabled {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
+    background-color: ${({ theme }) => theme.components.Switch.disabledBackground};
     &::before {
-      background-color: ${({ theme }) => theme.colors.gray[4]};
+      background-color: ${({ theme }) => theme.components.Switch.disabledColor};
     }
   }
 `;
+const SwitchThumbWrapper = styled.span`
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  height: ${({ theme, size }) => getSizing(theme, size).circleSize};
+  width: ${({ theme, size }) => getSizing(theme, size).circleSize};
+  transition: margin-left 0.15s ease;
+  align-items: center;
+  justify-content: center;
+  margin-left: calc(
+    ${({ size }) => size === "l" ? "3px" : "4px"} +
+      ${({ checked, theme, size }) => checked ? `calc(${getSizing(theme, size).height} - ${size === "l" ? "3px" : "4px"})` : "0px"}
+  );
+  cursor: pointer;
+`;
 export {
   SwitchStyled,
+  SwitchThumbWrapper,
   SwitchWrapperStyled
 };

package/dist/Switch/types.d.ts

@@ -21,5 +21,8 @@ export interface ISwitchProps {
     labelPosition?: "after" | "before";
     /** Inline styles */
     style?: CSSProperties;
+    /** Icon inside the thumb of the switch */
+    thumbIcon?: React.ReactNode;
+    id?: string;
     [key: string]: any;
 }

package/dist/Tabs/Tab.cjs.js

@@ -1,6 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const helpers = require("@quen-ui/helpers");
 const styles = require("./styles.cjs.js");
 const Tabs = require("./Tabs.cjs.js");
 const Tab = ({
@@ -13,20 +14,19 @@ const Tab = ({
   className
 }) => {
   const context = Tabs.useTabsContext();
-  const [selected, setSelected] = React.useState(
-    (context == null ? void 0 : context.value) === value
-  );
+  const [selected, setSelected] = React.useState(context?.value === value);
   React.useEffect(() => {
-    setSelected((context == null ? void 0 : context.value) === value);
-  }, [context == null ? void 0 : context.value]);
+    setSelected(context?.value === value);
+  }, [context?.value]);
   const handleClick = (event) => {
-    onClick == null ? void 0 : onClick(event);
-    context == null ? void 0 : context.onChange(value);
+    onClick?.(event);
+    context?.onChange(value);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     styles.TabStyled,
     {
-      className,
+      outline: context?.outline,
+      className: helpers.cnMerge(className, { "quen-ui__tab--active": selected }),
       size: "m",
       selected,
       onClick: handleClick,

package/dist/Tabs/Tab.es.js

@@ -1,5 +1,6 @@
 import { jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import { cnMerge } from "@quen-ui/helpers";
 import { TabStyled } from "./styles.es.js";
 import { useTabsContext } from "./Tabs.es.js";
 const Tab = ({
@@ -12,20 +13,19 @@ const Tab = ({
   className
 }) => {
   const context = useTabsContext();
-  const [selected, setSelected] = useState(
-    (context == null ? void 0 : context.value) === value
-  );
+  const [selected, setSelected] = useState(context?.value === value);
   useEffect(() => {
-    setSelected((context == null ? void 0 : context.value) === value);
-  }, [context == null ? void 0 : context.value]);
+    setSelected(context?.value === value);
+  }, [context?.value]);
   const handleClick = (event) => {
-    onClick == null ? void 0 : onClick(event);
-    context == null ? void 0 : context.onChange(value);
+    onClick?.(event);
+    context?.onChange(value);
   };
   return /* @__PURE__ */ jsxs(
     TabStyled,
     {
-      className,
+      outline: context?.outline,
+      className: cnMerge(className, { "quen-ui__tab--active": selected }),
       size: "m",
       selected,
       onClick: handleClick,

package/dist/Tabs/TabPanel.cjs.js

@@ -4,11 +4,11 @@ const Tabs = require("./Tabs.cjs.js");
 const styles = require("./styles.cjs.js");
 const TabPanel = ({ children, value }) => {
   const context = Tabs.useTabsContext();
-  if ((context == null ? void 0 : context.keepMounted) === false && context.value === value) {
+  if (context?.keepMounted === false && context.value === value) {
     return /* @__PURE__ */ jsxRuntime.jsx(styles.TabPanelStyled, { children });
-  } else if ((context == null ? void 0 : context.keepMounted) === false) {
+  } else if (context?.keepMounted === false) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(styles.TabPanelStyled, { style: (context == null ? void 0 : context.value) !== value ? { display: "none" } : {}, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.TabPanelStyled, { style: context?.value !== value ? { display: "none" } : {}, children });
 };
 module.exports = TabPanel;

package/dist/Tabs/TabPanel.es.js

@@ -3,12 +3,12 @@ import { useTabsContext } from "./Tabs.es.js";
 import { TabPanelStyled } from "./styles.es.js";
 const TabPanel = ({ children, value }) => {
   const context = useTabsContext();
-  if ((context == null ? void 0 : context.keepMounted) === false && context.value === value) {
+  if (context?.keepMounted === false && context.value === value) {
     return /* @__PURE__ */ jsx(TabPanelStyled, { children });
-  } else if ((context == null ? void 0 : context.keepMounted) === false) {
+  } else if (context?.keepMounted === false) {
     return null;
   }
-  return /* @__PURE__ */ jsx(TabPanelStyled, { style: (context == null ? void 0 : context.value) !== value ? { display: "none" } : {}, children });
+  return /* @__PURE__ */ jsx(TabPanelStyled, { style: context?.value !== value ? { display: "none" } : {}, children });
 };
 export {
   TabPanel as default

package/dist/Tabs/Tabs.cjs.js

@@ -3,17 +3,18 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const TabsContext = React.createContext(null);
-const Tabs = ({ children, defaultValue, keepMounted, onChange }) => {
+const Tabs = ({ children, defaultValue, keepMounted, onChange, outline }) => {
   const [value, setValue] = React.useState(defaultValue);
   const handleChange = (currentValue) => {
     setValue(currentValue);
-    onChange == null ? void 0 : onChange(currentValue);
+    onChange?.(currentValue);
   };
   const context = React.useMemo(() => ({
     onChange: handleChange,
     value,
-    keepMounted
-  }), [value]);
+    keepMounted,
+    outline
+  }), [value, outline]);
   return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: context, children });
 };
 const useTabsContext = () => React.useContext(TabsContext);

package/dist/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 import { ITabsProps, ITabsContext } from './types';
-declare const Tabs: ({ children, defaultValue, keepMounted, onChange }: ITabsProps) => React.ReactElement;
+declare const Tabs: ({ children, defaultValue, keepMounted, onChange, outline }: ITabsProps) => React.ReactElement;
 export declare const useTabsContext: () => ITabsContext | null;
 export default Tabs;

package/dist/Tabs/Tabs.es.js

@@ -1,17 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useState, useMemo, useContext } from "react";
 const TabsContext = createContext(null);
-const Tabs = ({ children, defaultValue, keepMounted, onChange }) => {
+const Tabs = ({ children, defaultValue, keepMounted, onChange, outline }) => {
   const [value, setValue] = useState(defaultValue);
   const handleChange = (currentValue) => {
     setValue(currentValue);
-    onChange == null ? void 0 : onChange(currentValue);
+    onChange?.(currentValue);
   };
   const context = useMemo(() => ({
     onChange: handleChange,
     value,
-    keepMounted
-  }), [value]);
+    keepMounted,
+    outline
+  }), [value, outline]);
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: context, children });
 };
 const useTabsContext = () => useContext(TabsContext);

package/dist/Tabs/TabsList.cjs.js

@@ -1,12 +1,36 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers = require("@quen-ui/helpers");
 const styles = require("./styles.cjs.js");
+const Tabs = require("./Tabs.cjs.js");
 const TabsList = ({
   children,
   className,
   justify = "flex-start",
   grow
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(styles.TabsListStyled, { className, justify, isGrow: grow, children });
+  const context = Tabs.useTabsContext();
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const container = ref.current;
+    if (container) {
+      const background = helpers.findBackgroundElement(container);
+      if (background?.color) {
+        container.style.setProperty("--tab-background", background.color);
+      }
+    }
+  }, [context?.value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    styles.TabsListStyled,
+    {
+      ref,
+      className,
+      justify,
+      isGrow: grow,
+      outline: context?.outline,
+      children
+    }
+  );
 };
 module.exports = TabsList;

package/dist/Tabs/TabsList.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { ReactElement } from 'react';
 import { ITabsListProps } from './types';
-declare const TabsList: ({ children, className, justify, grow }: ITabsListProps) => React.ReactElement;
+declare const TabsList: ({ children, className, justify, grow }: ITabsListProps) => ReactElement;
 export default TabsList;

package/dist/Tabs/TabsList.es.js

@@ -1,12 +1,36 @@
 import { jsx } from "react/jsx-runtime";
+import { useRef, useLayoutEffect } from "react";
+import { findBackgroundElement } from "@quen-ui/helpers";
 import { TabsListStyled } from "./styles.es.js";
+import { useTabsContext } from "./Tabs.es.js";
 const TabsList = ({
   children,
   className,
   justify = "flex-start",
   grow
 }) => {
-  return /* @__PURE__ */ jsx(TabsListStyled, { className, justify, isGrow: grow, children });
+  const context = useTabsContext();
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const container = ref.current;
+    if (container) {
+      const background = findBackgroundElement(container);
+      if (background?.color) {
+        container.style.setProperty("--tab-background", background.color);
+      }
+    }
+  }, [context?.value]);
+  return /* @__PURE__ */ jsx(
+    TabsListStyled,
+    {
+      ref,
+      className,
+      justify,
+      isGrow: grow,
+      outline: context?.outline,
+      children
+    }
+  );
 };
 export {
   TabsList as default

package/dist/Tabs/styles.cjs.js

@@ -2,14 +2,78 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const Text = require("../typography/Text/Text.cjs.js");
+const getTabStyled = (theme, selected, outline) => {
+  if (outline) {
+    return styled.css`
+      border-style: solid;
+      border-width: 1px;
+      border-top-left-radius: ${theme.components.Tabs.radius};
+      border-top-right-radius: ${theme.components.Tabs.radius};
+      border-color: transparent;
+      background: transparent;
+      color: ${theme.components.Tabs.color};
+      
+      ${selected ? styled.css`
+        border-top-color: ${theme.components.Tabs.hoverColor};
+        border-left-color: ${theme.components.Tabs.hoverColor};
+        border-right-color: ${theme.components.Tabs.hoverColor};
+        border-bottom-color: var(--tab-background, white);
+        
+        &::after {
+          content: "";
+          position: absolute;
+          left: -1px;
+          right: -1px;
+          bottom: calc(-1 * (${theme.components.Tabs.borderWidth}));
+          height: ${theme.components.Tabs.borderWidth};
+          background: transparent;
+        }
+      ` : styled.css`
+        border-top-color: transparent;
+        border-left-color: transparent;
+        border-right-color: transparent;
+      `};
+
+      &:hover:not(:disabled) {
+        color: ${theme.components.Tabs.hoverColor};
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        color: ${theme.components.Tabs.disabledColor};
+      }
+    `;
+  }
+  return styled.css`
+    border-radius: ${`${theme.components.Tabs.radius} ${theme.components.Tabs.radius} 0 0`};
+    border-width: 0 0 0.125rem 0;
+    border-style: solid;
+    border-color: transparent;
+    background: transparent;
+    color: ${theme.components.Tabs.color};
+
+    ${selected && styled.css`
+      border-color: ${theme.components.Tabs.activeColor};
+    `}
+
+    &:disabled {
+      cursor: not-allowed;
+      color: ${theme.components.Tabs.disabledColor};
+    }
+
+    &:hover:not(:disabled) {
+      color: ${theme.components.Tabs.hoverColor};
+      border-color: ${theme.components.Tabs.hoverBorderColor};
+      * {
+        color: ${theme.components.Tabs.hoverColor};
+      }
+    }
+  `;
+};
 const TabStyled = styled(Text).attrs({ as: "button" }).withConfig({
-  shouldForwardProp: (prop) => prop !== "isSelected"
+  shouldForwardProp: (prop) => !["selected", "outline"].includes(prop)
 })`
-  border-radius: 0.25rem 0.25rem 0 0;
-  border-width:  0 0 0.125rem 0;
-  border-style: solid;
-  border-color: transparent;
-  background: transparent;
+
   position: relative;
   padding: 0.625rem;
   white-space: nowrap;
@@ -19,27 +83,43 @@ const TabStyled = styled(Text).attrs({ as: "button" }).withConfig({
   justify-content: center;
   cursor: pointer;
   gap: 8px;
-  color: ${({ theme }) => theme.textColor};
-  
-  ${({ selected, theme }) => selected && styled.css`
-      border-color: ${theme.colors[theme.primaryColor][9]};
-    `}
   
-  &:disabled {
-    cursor: not-allowed;
-    color: ${({ theme }) => theme.colors.gray[4]};
-  }
+  ${({ theme, selected, outline }) => getTabStyled(theme, selected, outline)};
 
-  &:hover:not(:disabled) {
-    color: ${({ theme }) => theme.colors.grayViolet[9]};
-    border-color: ${({ theme }) => theme.colors[theme.primaryColor][7]};
-    * {
-      color: ${({ theme }) => theme.colors.grayViolet[9]};
-    }
-  }
 `;
+const getTabsListStyled = (theme, outline) => {
+  if (outline) {
+    return styled.css`
+      position: relative;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: ${theme.components.Tabs.borderWidth};
+        background: ${theme.components.Tabs.hoverColor};
+      }
+    `;
+  }
+  if (!outline) {
+    return styled.css`
+      &:before {
+        content: "";
+        position: absolute;
+        border-color: ${theme.components.Tabs.hoverColor};
+        border-width: ${theme.components.Tabs.borderWidth};
+        border-style: solid;
+        bottom: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        top: unset;
+      }
+    `;
+  }
+};
 const TabsListStyled = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["justify", "isGrow"].includes(prop)
+  shouldForwardProp: (prop) => !["justify", "isGrow", "outline"].includes(prop)
 })`
   display: flex;
   flex-wrap: wrap;
@@ -54,17 +134,7 @@ const TabsListStyled = styled.div.withConfig({
       }
     `};
 
-  &:before {
-    content: "";
-    position: absolute;
-    border-color: ${({ theme }) => theme.colors.grayViolet[9]};
-    border-width: 0.0625rem;
-    border-style: solid;
-    bottom: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    top: unset;
-  }
+  ${({ theme, outline }) => getTabsListStyled(theme, outline)}
 `;
 const TabPanelStyled = styled.div`
   padding-top: 0.625rem;