@shoplflow/base 0.19.0 → 0.20.0

package/dist/index.d.cts

@@ -1057,6 +1057,7 @@ declare const List: {
     ({ children, leftSource, rightSource, ...rest }: ListProps): react_jsx_runtime.JSX.Element;
     Text2Rows: ({ title, subTitle }: ListText2RowsProps) => react_jsx_runtime.JSX.Element;
 };
+declare const Text2Rows: ({ title, subTitle }: ListText2RowsProps) => react_jsx_runtime.JSX.Element;
 
 declare const StyledList: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
@@ -1067,6 +1068,26 @@ declare const StyledText2Rows: _emotion_styled.StyledComponent<{
     as?: React$1.ElementType<any> | undefined;
 }, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
+declare const TagStyleVariants: {
+    readonly SOLID: "SOLID";
+    readonly TINT: "TINT";
+    readonly LINE: "LINE";
+};
+declare const TagSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type TagStyleVariantType = $Values<typeof TagStyleVariants>;
+declare type TagSizeVariantType = $Values<typeof TagSizeVariants>;
+interface TagProps extends TagOptionProps {
+}
+interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVariantProps<TagStyleVariantType>, ColorTokenProps, LeftAndRightElementProps, ChildrenProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    radius?: boolean;
+}
+
+declare const Tag: ({ sizeVar, children, rightSource, leftSource, className, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
+
 declare const IconSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
@@ -1188,4 +1209,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
 
 declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -1057,6 +1057,7 @@ declare const List: {
     ({ children, leftSource, rightSource, ...rest }: ListProps): react_jsx_runtime.JSX.Element;
     Text2Rows: ({ title, subTitle }: ListText2RowsProps) => react_jsx_runtime.JSX.Element;
 };
+declare const Text2Rows: ({ title, subTitle }: ListText2RowsProps) => react_jsx_runtime.JSX.Element;
 
 declare const StyledList: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
@@ -1067,6 +1068,26 @@ declare const StyledText2Rows: _emotion_styled.StyledComponent<{
     as?: React$1.ElementType<any> | undefined;
 }, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
+declare const TagStyleVariants: {
+    readonly SOLID: "SOLID";
+    readonly TINT: "TINT";
+    readonly LINE: "LINE";
+};
+declare const TagSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type TagStyleVariantType = $Values<typeof TagStyleVariants>;
+declare type TagSizeVariantType = $Values<typeof TagSizeVariants>;
+interface TagProps extends TagOptionProps {
+}
+interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVariantProps<TagStyleVariantType>, ColorTokenProps, LeftAndRightElementProps, ChildrenProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    radius?: boolean;
+}
+
+declare const Tag: ({ sizeVar, children, rightSource, leftSource, className, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
+
 declare const IconSizeVariants: {
     readonly XS: "XS";
     readonly S: "S";
@@ -1188,4 +1209,4 @@ interface RadioOptionProps extends SelectedProps, DefaultSelectedProps, DisableP
 
 declare const Radio: ({ isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, Radio, RadioOptionProps, RadioProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.js

@@ -14,10 +14,14 @@ import * as ShoplAssets from '@shoplflow/shopl-assets';
 import { DownArrowSolidXsmallIcon } from '@shoplflow/shopl-assets';
 import * as HadaAssets from '@shoplflow/hada-assets';
 
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -45,6 +49,74 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js
+var require_classnames = __commonJS({
+  "../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js"(exports, module) {
+    (function() {
+      var hasOwn = {}.hasOwnProperty;
+      function classNames2() {
+        var classes = [];
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (!arg)
+            continue;
+          var argType = typeof arg;
+          if (argType === "string" || argType === "number") {
+            classes.push(arg);
+          } else if (Array.isArray(arg)) {
+            if (arg.length) {
+              var inner = classNames2.apply(null, arg);
+              if (inner) {
+                classes.push(inner);
+              }
+            }
+          } else if (argType === "object") {
+            if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+              classes.push(arg.toString());
+              continue;
+            }
+            for (var key in arg) {
+              if (hasOwn.call(arg, key) && arg[key]) {
+                classes.push(key);
+              }
+            }
+          }
+        }
+        return classes.join(" ");
+      }
+      if (typeof module !== "undefined" && module.exports) {
+        classNames2.default = classNames2;
+        module.exports = classNames2;
+      } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
+        define("classnames", [], function() {
+          return classNames2;
+        });
+      } else {
+        window.classNames = classNames2;
+      }
+    })();
+  }
+});
 var useDomain = (domain = "SHOPL") => {
   const [domainType, setDomainType] = useState(void 0);
   useEffect(() => {
@@ -991,15 +1063,29 @@ var ChipToggle_default = ChipToggle;
 // src/utils/getNextColor.ts
 var getNextColor = (color, step = 1) => {
   const colorName = color.replace(/[0-9]|_/g, "");
-  const colorNumberString = color.replace(/[a-z]|_/g, "");
-  const decimalColorNumber = Number(colorNumberString) * 0.01;
-  const nextColorNumber = Math.floor(decimalColorNumber) + 100 * step;
-  const nextColorToken = `${colorName}${nextColorNumber}`;
-  const colorKeysOfColorName = Object.keys(colorTokens).filter((colorToken) => colorToken.includes(colorName)).sort((a, b) => Number(a.replace(/[a-z]|_/g, "")) - Number(b.replace(/[a-z]|_/g, "")));
   const colorTokenKeys = Object.keys(colorTokens);
-  const findColorToken = colorTokenKeys.find((colorToken) => colorToken === nextColorToken);
-  const lastColorToken = colorKeysOfColorName[colorKeysOfColorName.length - 1];
-  return findColorToken ? findColorToken : lastColorToken;
+  const findColorToken = colorTokenKeys.filter((colorToken) => colorToken.includes(colorName));
+  const extractNumbers = (str) => {
+    const formattedStr = str.replace(/_/g, ".");
+    const regex = /\d+(\.\d+)?/g;
+    const match = formattedStr.match(regex);
+    return match ? parseFloat(match[0]) : 0;
+  };
+  const sortColorToken = findColorToken.sort((a, b) => extractNumbers(a) - extractNumbers(b));
+  const currentIndex = sortColorToken.indexOf(color);
+  let newIndex = currentIndex + step;
+  let potentialToken = sortColorToken[newIndex];
+  while (potentialToken.endsWith("_5") || potentialToken.includes("50")) {
+    newIndex += Math.sign(step);
+    if (newIndex < 0) {
+      potentialToken = sortColorToken[0];
+    }
+    if (newIndex >= sortColorToken.length) {
+      potentialToken = sortColorToken[sortColorToken.length - 1];
+    }
+    potentialToken = sortColorToken[newIndex];
+  }
+  return potentialToken;
 };
 
 // src/components/Chips/ChipButton/ChipButton.styled.ts
@@ -1904,6 +1990,133 @@ var Text2Rows = ({ title, subTitle }) => {
 };
 List.Text2Rows = Text2Rows;
 var List_default = List;
+var getTypographyBySize = (size2) => {
+  switch (size2) {
+    case "XS":
+      return "caption_400";
+    case "S":
+      return "caption_400";
+    case "M":
+      return "body2_400";
+    default:
+      return "body2_400";
+  }
+};
+var getTagStyleBySize = (size2) => {
+  switch (size2) {
+    case "XS":
+      return css`
+        height: 20px;
+        padding: 0 4px;
+        border-radius: 4px;
+      `;
+    case "S":
+      return css`
+        height: 24px;
+        padding: 0 8px;
+        border-radius: 4px;
+      `;
+    case "M":
+      return css`
+        padding: 4px 8px;
+        height: 32px;
+        border-radius: 6px;
+      `;
+    default:
+      return css`
+        padding: 4px 8px;
+        height: 32px;
+      `;
+  }
+};
+var getRadiusBySize = (size2) => {
+  switch (size2) {
+    case "XS":
+      return css`
+        border-radius: 12px;
+      `;
+    case "S":
+      return css`
+        border-radius: 16px;
+      `;
+    case "M":
+      return css`
+        border-radius: 16px;
+      `;
+    default:
+      return css`
+        border-radius: 16px;
+      `;
+  }
+};
+var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
+  switch (styleVariant) {
+    case "SOLID":
+      return css`
+        background: ${colorTokens[color]};
+        color: ${colorTokens.neutral0};
+      `;
+    case "TINT":
+      return css`
+        background: ${colorTokens[getNextColor(color, -2)]};
+        color: ${colorTokens[color]};
+      `;
+    case "LINE":
+      return css`
+        background: transparent;
+        color: ${colorTokens[color]};
+        border: 1px solid ${colorTokens[color]};
+      `;
+    default:
+      return css`
+        background: ${colorTokens[color]};
+        color: ${colorTokens.neutral0};
+      `;
+  }
+};
+var StyledTag = styled5.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  cursor: default;
+  gap: 2px;
+  ${({ sizeVar }) => getTagStyleBySize(sizeVar)};
+  ${({ color, styleVar }) => getColorsByStyleVariant(styleVar, color)};
+  ${({ radius, sizeVar }) => radius && getRadiusBySize(sizeVar)};
+`;
+
+// src/components/Tag/Tag.tsx
+var import_classnames = __toESM(require_classnames(), 1);
+var Tag = (_a) => {
+  var _b = _a, { sizeVar, children, rightSource, leftSource, className } = _b, rest = __objRest(_b, ["sizeVar", "children", "rightSource", "leftSource", "className"]);
+  return /* @__PURE__ */ jsxs(
+    StyledTag,
+    __spreadProps(__spreadValues({
+      sizeVar,
+      className: (0, import_classnames.default)(getTypographyBySize(sizeVar), className)
+    }, rest), {
+      "data-shoplflow": "Tag",
+      children: [
+        leftSource && leftSource,
+        children,
+        rightSource && rightSource
+      ]
+    })
+  );
+};
+var Tag_default = Tag;
+
+// src/components/Tag/Tag.types.ts
+var TagStyleVariants = {
+  SOLID: "SOLID",
+  TINT: "TINT",
+  LINE: "LINE"
+};
+var TagSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M"
+};
 var StyledInput = styled5.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
@@ -2633,7 +2846,16 @@ var Radio = (_a) => {
   );
 };
 var Radio_default = Radio;
+/*! Bundled license information:
+
+classnames/index.js:
+  (*!
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
+  *)
+*/
 
-export { Button_default as Button, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, Radio_default as Radio, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Button_default as Button, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, DropdownButtonIcon, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, PopperPortal2 as PopperPortal, PopperTrigger, Radio_default as Radio, ScrollArea_default as ScrollArea, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledInputButton, StyledInputButtonContent, StyledList, StyledMenu, StyledPopper, StyledStack, StyledText2Rows, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map