@remember-web/primitive 0.2.12 → 0.2.14

package/dist/src/Chips/Chip/const.cjs.js

@@ -5,12 +5,12 @@ var mixin = require('@remember-web/mixin');
 var CHIP_SIZE_STYLE = {
   small: {
     typography: 'Caption1',
-    padding: '8px 10px',
+    padding: '6px 10px',
     height: '28px'
   },
   medium: {
     typography: 'UIBody3',
-    padding: '8px 12px',
+    padding: '5px 12px',
     height: '30px'
   }
 };

package/dist/src/Chips/Chip/const.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents100,\n  contents150,\n  contents200,\n  contents300,\n  contents999,\n  primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\nexport const CHIP_SIZE_STYLE = {\n  small: {\n    typography: 'Caption1',\n    padding: '8px 10px',\n    height: '28px',\n  },\n  medium: {\n    typography: 'UIBody3',\n    padding: '8px 12px',\n    height: '30px',\n  },\n} as const satisfies Record<ChipSize, unknown>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n  filled: {\n    default: {\n      backgroundColor: bg200,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n    },\n    hover: {\n      backgroundColor: bg200,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n    },\n    disabled: {\n      backgroundColor: bg300,\n      color: contents300,\n      leftIconColor: contents300,\n      deleteButtonColor: contents300,\n    },\n    selected: {\n      backgroundColor: primary100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n    },\n    selectedHover: {\n      backgroundColor: contents100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n    },\n  },\n\n  outline: {\n    default: {\n      backgroundColor: bg100,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n      border: `1px solid ${contents150}`,\n    },\n    hover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n      border: `1px solid ${contents100}`,\n    },\n    disabled: {\n      backgroundColor: bg100,\n      color: contents200,\n      leftIconColor: contents200,\n      deleteButtonColor: contents200,\n      border: `1px solid ${contents200}`,\n    },\n    selected: {\n      backgroundColor: primary100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n      border: '1px solid transparent',\n    },\n    selectedHover: {\n      backgroundColor: contents100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n      border: '1px solid transparent',\n    },\n  },\n\n  dashedLine: {\n    default: {\n      backgroundColor: bg100,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n      border: `1px dashed ${contents150}`,\n    },\n    hover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n      border: `1px dashed ${contents100}`,\n    },\n    disabled: {\n      backgroundColor: bg100,\n      color: contents200,\n      leftIconColor: contents200,\n      deleteButtonColor: contents200,\n      border: `1px dashed ${contents200}`,\n    },\n    selected: {\n      backgroundColor: bg100,\n      color: contents000,\n      leftIconColor: contents000,\n      deleteButtonColor: contents000,\n      border: `1px solid ${primary100}`,\n    },\n    selectedHover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents100,\n      border: `1px solid ${contents100}`,\n    },\n  },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","outline","bg100","border","concat","dashedLine","contents000"],"mappings":"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"}
+{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents100,\n  contents150,\n  contents200,\n  contents300,\n  contents999,\n  primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\nexport const CHIP_SIZE_STYLE = {\n  small: {\n    typography: 'Caption1',\n    padding: '6px 10px',\n    height: '28px',\n  },\n  medium: {\n    typography: 'UIBody3',\n    padding: '5px 12px',\n    height: '30px',\n  },\n} as const satisfies Record<ChipSize, unknown>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n  filled: {\n    default: {\n      backgroundColor: bg200,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n    },\n    hover: {\n      backgroundColor: bg200,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n    },\n    disabled: {\n      backgroundColor: bg300,\n      color: contents300,\n      leftIconColor: contents300,\n      deleteButtonColor: contents300,\n    },\n    selected: {\n      backgroundColor: primary100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n    },\n    selectedHover: {\n      backgroundColor: contents100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n    },\n  },\n\n  outline: {\n    default: {\n      backgroundColor: bg100,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n      border: `1px solid ${contents150}`,\n    },\n    hover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n      border: `1px solid ${contents100}`,\n    },\n    disabled: {\n      backgroundColor: bg100,\n      color: contents200,\n      leftIconColor: contents200,\n      deleteButtonColor: contents200,\n      border: `1px solid ${contents200}`,\n    },\n    selected: {\n      backgroundColor: primary100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n      border: '1px solid transparent',\n    },\n    selectedHover: {\n      backgroundColor: contents100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n      border: '1px solid transparent',\n    },\n  },\n\n  dashedLine: {\n    default: {\n      backgroundColor: bg100,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n      border: `1px dashed ${contents150}`,\n    },\n    hover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n      border: `1px dashed ${contents100}`,\n    },\n    disabled: {\n      backgroundColor: bg100,\n      color: contents200,\n      leftIconColor: contents200,\n      deleteButtonColor: contents200,\n      border: `1px dashed ${contents200}`,\n    },\n    selected: {\n      backgroundColor: bg100,\n      color: contents000,\n      leftIconColor: contents000,\n      deleteButtonColor: contents000,\n      border: `1px solid ${primary100}`,\n    },\n    selectedHover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents100,\n      border: `1px solid ${contents100}`,\n    },\n  },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","outline","bg100","border","concat","dashedLine","contents000"],"mappings":"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"}

package/dist/src/Chips/Chip/const.d.ts

@@ -2,12 +2,12 @@ import type { ChipVariantStyleMap } from './types';
 export declare const CHIP_SIZE_STYLE: {
     readonly small: {
         readonly typography: "Caption1";
-        readonly padding: "8px 10px";
+        readonly padding: "6px 10px";
         readonly height: "28px";
     };
     readonly medium: {
         readonly typography: "UIBody3";
-        readonly padding: "8px 12px";
+        readonly padding: "5px 12px";
         readonly height: "30px";
     };
 };

package/dist/src/Chips/Chip/const.esm.js

@@ -3,12 +3,12 @@ import { bg200, contents150, contents200, contents100, bg300, contents300, prima
 var CHIP_SIZE_STYLE = {
   small: {
     typography: 'Caption1',
-    padding: '8px 10px',
+    padding: '6px 10px',
     height: '28px'
   },
   medium: {
     typography: 'UIBody3',
-    padding: '8px 12px',
+    padding: '5px 12px',
     height: '30px'
   }
 };

package/dist/src/Chips/Chip/const.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents100,\n  contents150,\n  contents200,\n  contents300,\n  contents999,\n  primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\nexport const CHIP_SIZE_STYLE = {\n  small: {\n    typography: 'Caption1',\n    padding: '8px 10px',\n    height: '28px',\n  },\n  medium: {\n    typography: 'UIBody3',\n    padding: '8px 12px',\n    height: '30px',\n  },\n} as const satisfies Record<ChipSize, unknown>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n  filled: {\n    default: {\n      backgroundColor: bg200,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n    },\n    hover: {\n      backgroundColor: bg200,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n    },\n    disabled: {\n      backgroundColor: bg300,\n      color: contents300,\n      leftIconColor: contents300,\n      deleteButtonColor: contents300,\n    },\n    selected: {\n      backgroundColor: primary100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n    },\n    selectedHover: {\n      backgroundColor: contents100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n    },\n  },\n\n  outline: {\n    default: {\n      backgroundColor: bg100,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n      border: `1px solid ${contents150}`,\n    },\n    hover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n      border: `1px solid ${contents100}`,\n    },\n    disabled: {\n      backgroundColor: bg100,\n      color: contents200,\n      leftIconColor: contents200,\n      deleteButtonColor: contents200,\n      border: `1px solid ${contents200}`,\n    },\n    selected: {\n      backgroundColor: primary100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n      border: '1px solid transparent',\n    },\n    selectedHover: {\n      backgroundColor: contents100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n      border: '1px solid transparent',\n    },\n  },\n\n  dashedLine: {\n    default: {\n      backgroundColor: bg100,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n      border: `1px dashed ${contents150}`,\n    },\n    hover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n      border: `1px dashed ${contents100}`,\n    },\n    disabled: {\n      backgroundColor: bg100,\n      color: contents200,\n      leftIconColor: contents200,\n      deleteButtonColor: contents200,\n      border: `1px dashed ${contents200}`,\n    },\n    selected: {\n      backgroundColor: bg100,\n      color: contents000,\n      leftIconColor: contents000,\n      deleteButtonColor: contents000,\n      border: `1px solid ${primary100}`,\n    },\n    selectedHover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents100,\n      border: `1px solid ${contents100}`,\n    },\n  },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","outline","bg100","border","concat","dashedLine","contents000"],"mappings":"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"}
+{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents100,\n  contents150,\n  contents200,\n  contents300,\n  contents999,\n  primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\nexport const CHIP_SIZE_STYLE = {\n  small: {\n    typography: 'Caption1',\n    padding: '6px 10px',\n    height: '28px',\n  },\n  medium: {\n    typography: 'UIBody3',\n    padding: '5px 12px',\n    height: '30px',\n  },\n} as const satisfies Record<ChipSize, unknown>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n  filled: {\n    default: {\n      backgroundColor: bg200,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n    },\n    hover: {\n      backgroundColor: bg200,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n    },\n    disabled: {\n      backgroundColor: bg300,\n      color: contents300,\n      leftIconColor: contents300,\n      deleteButtonColor: contents300,\n    },\n    selected: {\n      backgroundColor: primary100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n    },\n    selectedHover: {\n      backgroundColor: contents100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n    },\n  },\n\n  outline: {\n    default: {\n      backgroundColor: bg100,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n      border: `1px solid ${contents150}`,\n    },\n    hover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n      border: `1px solid ${contents100}`,\n    },\n    disabled: {\n      backgroundColor: bg100,\n      color: contents200,\n      leftIconColor: contents200,\n      deleteButtonColor: contents200,\n      border: `1px solid ${contents200}`,\n    },\n    selected: {\n      backgroundColor: primary100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n      border: '1px solid transparent',\n    },\n    selectedHover: {\n      backgroundColor: contents100,\n      color: contents999,\n      leftIconColor: contents999,\n      deleteButtonColor: contents999,\n      border: '1px solid transparent',\n    },\n  },\n\n  dashedLine: {\n    default: {\n      backgroundColor: bg100,\n      color: contents150,\n      leftIconColor: contents150,\n      deleteButtonColor: contents200,\n      border: `1px dashed ${contents150}`,\n    },\n    hover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents150,\n      border: `1px dashed ${contents100}`,\n    },\n    disabled: {\n      backgroundColor: bg100,\n      color: contents200,\n      leftIconColor: contents200,\n      deleteButtonColor: contents200,\n      border: `1px dashed ${contents200}`,\n    },\n    selected: {\n      backgroundColor: bg100,\n      color: contents000,\n      leftIconColor: contents000,\n      deleteButtonColor: contents000,\n      border: `1px solid ${primary100}`,\n    },\n    selectedHover: {\n      backgroundColor: bg100,\n      color: contents100,\n      leftIconColor: contents100,\n      deleteButtonColor: contents100,\n      border: `1px solid ${contents100}`,\n    },\n  },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","outline","bg100","border","concat","dashedLine","contents000"],"mappings":"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"}

package/dist/src/Chips/Chip/styles.cjs.js

@@ -34,7 +34,7 @@ var StyledChip = styled__default.default.div(_templateObject4 || (_templateObjec
     _ref$$clickable = _ref.$clickable,
     $clickable = _ref$$clickable === void 0 ? false : _ref$$clickable,
     props = _objectWithoutProperties__default.default(_ref, _excluded);
-  return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n    box-sizing: border-box;\n    user-select: none;\n    cursor: ", ";\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    gap: 4px;\n\n    width: fit-content;\n    border-radius: 50px;\n    text-align: center;\n    transition: all 0.2s ease-in;\n\n    height: ", ";\n    padding: ", ";\n\n    ", "\n\n    ", "\n  "])), $clickable ? 'pointer' : 'default', _const.CHIP_SIZE_STYLE[$size].height, _const.CHIP_SIZE_STYLE[$size].padding, mixin.getTypographyStyles(_const.CHIP_SIZE_STYLE[$size].typography), getVariantStyles(_objectSpread({
+  return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n    box-sizing: border-box;\n    user-select: none;\n    cursor: ", ";\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    gap: 4px;\n\n    width: fit-content;\n    border-radius: 50px;\n    text-align: left;\n    transition: all 0.2s ease-in;\n    height: auto; \n    padding: ", ";\n\n    ", "\n    \n    ", "\n  "])), $clickable ? 'pointer' : 'default', _const.CHIP_SIZE_STYLE[$size].padding, mixin.getTypographyStyles(_const.CHIP_SIZE_STYLE[$size].typography), getVariantStyles(_objectSpread({
     $variant: $variant,
     $clickable: $clickable
   }, props)));

package/dist/src/Chips/Chip/styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n  const { $variant = 'filled', $selected, $clickable } = props;\n  const getStateStyle = (state: ChipState) => css`\n    background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n    color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n    border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n    --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n    --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n  `;\n\n  return css`\n    ${getStateStyle('default')};\n\n    ${\n      $clickable &&\n      css`\n      &:hover:not([data-chip-disabled='true']) {\n        ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n      }\n\n      ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n        ${getStateStyle('selected')} \n      }\n      `\n    }\n    \n    &[data-chip-disabled='true'] {\n      ${getStateStyle('disabled')}\n      cursor: not-allowed;\n    }\n\n    & svg {\n      color: var(--left-icon-color);\n    }\n\n    .delete-button svg {\n      color: var(--delete-button-color);\n    }\n  `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n  ${({ $size, $variant, $clickable = false, ...props }) => css`\n    box-sizing: border-box;\n    user-select: none;\n    cursor: ${$clickable ? 'pointer' : 'default'};\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    gap: 4px;\n\n    width: fit-content;\n    border-radius: 50px;\n    text-align: center;\n    transition: all 0.2s ease-in;\n\n    height: ${CHIP_SIZE_STYLE[$size].height};\n    padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n    ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n\n    ${getVariantStyles({ $variant, $clickable, ...props })}\n  `}\n`;\n\nexport const ButtonWrapper = styled.button`\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","height","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n  const { $variant = 'filled', $selected, $clickable } = props;\n  const getStateStyle = (state: ChipState) => css`\n    background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n    color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n    border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n    --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n    --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n  `;\n\n  return css`\n    ${getStateStyle('default')};\n\n    ${\n      $clickable &&\n      css`\n      &:hover:not([data-chip-disabled='true']) {\n        ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n      }\n\n      ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n        ${getStateStyle('selected')} \n      }\n      `\n    }\n    \n    &[data-chip-disabled='true'] {\n      ${getStateStyle('disabled')}\n      cursor: not-allowed;\n    }\n\n    & svg {\n      color: var(--left-icon-color);\n    }\n\n    .delete-button svg {\n      color: var(--delete-button-color);\n    }\n  `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n  ${({ $size, $variant, $clickable = false, ...props }) => css`\n    box-sizing: border-box;\n    user-select: none;\n    cursor: ${$clickable ? 'pointer' : 'default'};\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    gap: 4px;\n\n    width: fit-content;\n    border-radius: 50px;\n    text-align: left;\n    transition: all 0.2s ease-in;\n    height: auto; \n    padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n    ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n    \n    ${getVariantStyles({ $variant, $clickable, ...props })}\n  `}\n`;\n\nexport const ButtonWrapper = styled.button`\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}

package/dist/src/Chips/Chip/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,SAAS,CAAC;AA2CzD,eAAO,MAAM,UAAU,2NAwBtB,CAAC;AAEF,eAAO,MAAM,aAAa,4NAMvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,SAAS,CAAC;AA2CzD,eAAO,MAAM,UAAU,2NAuBtB,CAAC;AAEF,eAAO,MAAM,aAAa,4NAMvB,CAAC"}

package/dist/src/Chips/Chip/styles.esm.js

@@ -25,7 +25,7 @@ var StyledChip = styled.div(_templateObject4 || (_templateObject4 = _taggedTempl
     _ref$$clickable = _ref.$clickable,
     $clickable = _ref$$clickable === void 0 ? false : _ref$$clickable,
     props = _objectWithoutProperties(_ref, _excluded);
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    user-select: none;\n    cursor: ", ";\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    gap: 4px;\n\n    width: fit-content;\n    border-radius: 50px;\n    text-align: center;\n    transition: all 0.2s ease-in;\n\n    height: ", ";\n    padding: ", ";\n\n    ", "\n\n    ", "\n  "])), $clickable ? 'pointer' : 'default', CHIP_SIZE_STYLE[$size].height, CHIP_SIZE_STYLE[$size].padding, getTypographyStyles(CHIP_SIZE_STYLE[$size].typography), getVariantStyles(_objectSpread({
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    user-select: none;\n    cursor: ", ";\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    gap: 4px;\n\n    width: fit-content;\n    border-radius: 50px;\n    text-align: left;\n    transition: all 0.2s ease-in;\n    height: auto; \n    padding: ", ";\n\n    ", "\n    \n    ", "\n  "])), $clickable ? 'pointer' : 'default', CHIP_SIZE_STYLE[$size].padding, getTypographyStyles(CHIP_SIZE_STYLE[$size].typography), getVariantStyles(_objectSpread({
     $variant: $variant,
     $clickable: $clickable
   }, props)));

package/dist/src/Chips/Chip/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n  const { $variant = 'filled', $selected, $clickable } = props;\n  const getStateStyle = (state: ChipState) => css`\n    background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n    color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n    border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n    --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n    --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n  `;\n\n  return css`\n    ${getStateStyle('default')};\n\n    ${\n      $clickable &&\n      css`\n      &:hover:not([data-chip-disabled='true']) {\n        ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n      }\n\n      ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n        ${getStateStyle('selected')} \n      }\n      `\n    }\n    \n    &[data-chip-disabled='true'] {\n      ${getStateStyle('disabled')}\n      cursor: not-allowed;\n    }\n\n    & svg {\n      color: var(--left-icon-color);\n    }\n\n    .delete-button svg {\n      color: var(--delete-button-color);\n    }\n  `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n  ${({ $size, $variant, $clickable = false, ...props }) => css`\n    box-sizing: border-box;\n    user-select: none;\n    cursor: ${$clickable ? 'pointer' : 'default'};\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    gap: 4px;\n\n    width: fit-content;\n    border-radius: 50px;\n    text-align: center;\n    transition: all 0.2s ease-in;\n\n    height: ${CHIP_SIZE_STYLE[$size].height};\n    padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n    ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n\n    ${getVariantStyles({ $variant, $clickable, ...props })}\n  `}\n`;\n\nexport const ButtonWrapper = styled.button`\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","height","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n  const { $variant = 'filled', $selected, $clickable } = props;\n  const getStateStyle = (state: ChipState) => css`\n    background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n    color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n    border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n    --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n    --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n  `;\n\n  return css`\n    ${getStateStyle('default')};\n\n    ${\n      $clickable &&\n      css`\n      &:hover:not([data-chip-disabled='true']) {\n        ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n      }\n\n      ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n        ${getStateStyle('selected')} \n      }\n      `\n    }\n    \n    &[data-chip-disabled='true'] {\n      ${getStateStyle('disabled')}\n      cursor: not-allowed;\n    }\n\n    & svg {\n      color: var(--left-icon-color);\n    }\n\n    .delete-button svg {\n      color: var(--delete-button-color);\n    }\n  `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n  ${({ $size, $variant, $clickable = false, ...props }) => css`\n    box-sizing: border-box;\n    user-select: none;\n    cursor: ${$clickable ? 'pointer' : 'default'};\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    gap: 4px;\n\n    width: fit-content;\n    border-radius: 50px;\n    text-align: left;\n    transition: all 0.2s ease-in;\n    height: auto; \n    padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n    ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n    \n    ${getVariantStyles({ $variant, $clickable, ...props })}\n  `}\n`;\n\nexport const ButtonWrapper = styled.button`\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}

package/dist/src/Inputs/Select/styles.cjs.js

@@ -21,7 +21,7 @@ var SelectContainer = styled__default.default.div(_templateObject || (_templateO
   }
   return $width;
 }, mixin.contents000, mixin.contents200, mixin.contents300, mixin.bg200);
-var SelectLabel = styled__default.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), mixin.getTypographyStyles('SubTitle1'), mixin.roleRed);
+var SelectLabel = styled__default.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), mixin.getTypographyStyles('Title2'), mixin.roleRed);
 
 exports.SelectContainer = SelectContainer;
 exports.SelectLabel = SelectLabel;

package/dist/src/Inputs/Select/styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n  ${getTypographyStyles('UIBody2')}\n  color: ${contents000};\n  width: ${({ $width }) => {\n    if (!$width) {\n      return 'fit-content';\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ${contents000};\n  }\n  &[aria-disabled='true'] {\n    color: ${contents200};\n    border-color: ${contents300};\n    background-color: ${bg200};\n  }\n`;\n\nexport const SelectLabel = styled.label`\n  ${getTypographyStyles('SubTitle1')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;AAAa;AAYN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n  ${getTypographyStyles('UIBody2')}\n  color: ${contents000};\n  width: ${({ $width }) => {\n    if (!$width) {\n      return 'fit-content';\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ${contents000};\n  }\n  &[aria-disabled='true'] {\n    color: ${contents200};\n    border-color: ${contents300};\n    background-color: ${bg200};\n  }\n`;\n\nexport const SelectLabel = styled.label`\n  ${getTypographyStyles('Title2')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;AAAa;AAYN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;"}

package/dist/src/Inputs/Select/styles.esm.js

@@ -14,7 +14,7 @@ var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTe
   }
   return $width;
 }, contents000, contents200, contents300, bg200);
-var SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), getTypographyStyles('SubTitle1'), roleRed);
+var SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), getTypographyStyles('Title2'), roleRed);
 
 export { SelectContainer, SelectLabel };
 //# sourceMappingURL=styles.esm.js.map

package/dist/src/Inputs/Select/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n  ${getTypographyStyles('UIBody2')}\n  color: ${contents000};\n  width: ${({ $width }) => {\n    if (!$width) {\n      return 'fit-content';\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ${contents000};\n  }\n  &[aria-disabled='true'] {\n    color: ${contents200};\n    border-color: ${contents300};\n    background-color: ${bg200};\n  }\n`;\n\nexport const SelectLabel = styled.label`\n  ${getTypographyStyles('SubTitle1')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n"],"names":[],"mappings":";;;;;AAAa;AAYN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n  ${getTypographyStyles('UIBody2')}\n  color: ${contents000};\n  width: ${({ $width }) => {\n    if (!$width) {\n      return 'fit-content';\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ${contents000};\n  }\n  &[aria-disabled='true'] {\n    color: ${contents200};\n    border-color: ${contents300};\n    background-color: ${bg200};\n  }\n`;\n\nexport const SelectLabel = styled.label`\n  ${getTypographyStyles('Title2')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n"],"names":[],"mappings":";;;;;AAAa;AAYN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;"}

package/dist/src/Inputs/Select/types.d.ts

@@ -9,6 +9,9 @@ export type SelectBaseProps<Value extends SelectValue> = {
     className?: string;
     disabled?: boolean;
     error?: boolean;
+    /**
+     * @deprecated Label 컴포넌트를 사용해 주세요.
+     */
     label?: ReactNode;
     required?: boolean;
     value?: Value;

package/dist/src/Inputs/Select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IAAI,YAAY,CACrE,WAAW,CAAC,KAAK,CAAC,EAClB,OAAO,YAAY,CACpB,CAAC;AAEF,KAAK,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IAChD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,WAAW,IACvD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CACrC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IACrD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,EAAE,IAAI,CAAC;CACd,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAC7C,mBAAmB,CAAC,KAAK,CAAC,GAC1B,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAAI;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IAAI,YAAY,CACrE,WAAW,CAAC,KAAK,CAAC,EAClB,OAAO,YAAY,CACpB,CAAC;AAEF,KAAK,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IAChD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,WAAW,IACvD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CACrC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IACrD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,EAAE,IAAI,CAAC;CACd,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAC7C,mBAAmB,CAAC,KAAK,CAAC,GAC1B,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAAI;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}

package/dist/src/Inputs/TextInput/styles.cjs.js

@@ -23,8 +23,8 @@ var InputContainer = styled__default.default.div(_templateObject3 || (_templateO
 });
 var InputDecorator = styled__default.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  flex-shrink: 0;\n  /* Inline\uC694\uC18C\uAC00 \uB4E4\uC5B4\uC624\uBA74 \uAC15\uC81C\uB85C block\uC73C\uB85C \uCC98\uB9AC (\uC911\uC559\uC815\uB82C\uC744 \uC704\uD574) */\n  > * {\n    display: block;\n  }\n"])));
 var InputInner = styled__default.default.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ", "\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents000, mixin.ellipsis(), mixin.contents200);
-var InputLabel = styled__default.default.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), mixin.getTypographyStyles('SubTitle1'), mixin.roleRed);
-var InputError = styled__default.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), mixin.getTypographyStyles('Caption1'), mixin.roleRed);
+var InputLabel = styled__default.default.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), mixin.getTypographyStyles('Title2'), mixin.roleRed);
+var InputError = styled__default.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), mixin.getTypographyStyles('UIBody3'), mixin.roleRed);
 var InputHintText = styled__default.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n  white-space: nowrap;\n"])), mixin.getTypographyStyles('UIBody2'), function (_ref3) {
   var textColor = _ref3.textColor;
   return textColor;

package/dist/src/Inputs/TextInput/styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n  ${({ $width }) =>\n    $width &&\n    css`\n      width: ${formatUnit($width)};\n    `};\n`;\n\nexport const InputContainer = styled.div<{\n  disabled?: boolean;\n  $hasError?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 0 12px;\n  gap: 8px;\n\n  transition:\n    border-color 0.2s,\n    background-color 0.2s;\n\n  ${({ $hasError, disabled }) => [\n    $hasError\n      ? css`\n          border-color: ${roleRed};\n        `\n      : css`\n          &:focus-within {\n            border-color: ${contents000};\n          }\n        `,\n    disabled &&\n      css`\n        background-color: ${bg200};\n      `,\n  ]}\n`;\n\nexport const InputDecorator = styled.div`\n  flex-shrink: 0;\n  /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n  > * {\n    display: block;\n  }\n`;\n\nexport const InputInner = styled.input`\n  ${getTypographyStyles('UIBody2')}\n  color: ${contents000};\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ${ellipsis()}\n  }\n\n  &::placeholder {\n    color: ${contents200};\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const InputLabel = styled.label`\n  ${getTypographyStyles('SubTitle1')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n\nexport const InputError = styled.div`\n  ${getTypographyStyles('Caption1')}\n  color: ${roleRed};\n\n  margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n  ${getTypographyStyles('UIBody2')}\n  color: ${({ textColor }) => textColor};\n  white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;;;;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;;;;;;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n  ${({ $width }) =>\n    $width &&\n    css`\n      width: ${formatUnit($width)};\n    `};\n`;\n\nexport const InputContainer = styled.div<{\n  disabled?: boolean;\n  $hasError?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 0 12px;\n  gap: 8px;\n\n  transition:\n    border-color 0.2s,\n    background-color 0.2s;\n\n  ${({ $hasError, disabled }) => [\n    $hasError\n      ? css`\n          border-color: ${roleRed};\n        `\n      : css`\n          &:focus-within {\n            border-color: ${contents000};\n          }\n        `,\n    disabled &&\n      css`\n        background-color: ${bg200};\n      `,\n  ]}\n`;\n\nexport const InputDecorator = styled.div`\n  flex-shrink: 0;\n  /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n  > * {\n    display: block;\n  }\n`;\n\nexport const InputInner = styled.input`\n  ${getTypographyStyles('UIBody2')}\n  color: ${contents000};\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ${ellipsis()}\n  }\n\n  &::placeholder {\n    color: ${contents200};\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const InputLabel = styled.label`\n  ${getTypographyStyles('Title2')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n\nexport const InputError = styled.div`\n  ${getTypographyStyles('UIBody3')}\n  color: ${roleRed};\n\n  margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n  ${getTypographyStyles('UIBody2')}\n  color: ${({ textColor }) => textColor};\n  white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;;;;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;;;;;;;;"}

package/dist/src/Inputs/TextInput/styles.esm.js

@@ -16,8 +16,8 @@ var InputContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedT
 });
 var InputDecorator = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  /* Inline\uC694\uC18C\uAC00 \uB4E4\uC5B4\uC624\uBA74 \uAC15\uC81C\uB85C block\uC73C\uB85C \uCC98\uB9AC (\uC911\uC559\uC815\uB82C\uC744 \uC704\uD574) */\n  > * {\n    display: block;\n  }\n"])));
 var InputInner = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ", "\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), getTypographyStyles('UIBody2'), contents000, ellipsis(), contents200);
-var InputLabel = styled.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), getTypographyStyles('SubTitle1'), roleRed);
-var InputError = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), getTypographyStyles('Caption1'), roleRed);
+var InputLabel = styled.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), getTypographyStyles('Title2'), roleRed);
+var InputError = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), getTypographyStyles('UIBody3'), roleRed);
 var InputHintText = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n  white-space: nowrap;\n"])), getTypographyStyles('UIBody2'), function (_ref3) {
   var textColor = _ref3.textColor;
   return textColor;

package/dist/src/Inputs/TextInput/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n  ${({ $width }) =>\n    $width &&\n    css`\n      width: ${formatUnit($width)};\n    `};\n`;\n\nexport const InputContainer = styled.div<{\n  disabled?: boolean;\n  $hasError?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 0 12px;\n  gap: 8px;\n\n  transition:\n    border-color 0.2s,\n    background-color 0.2s;\n\n  ${({ $hasError, disabled }) => [\n    $hasError\n      ? css`\n          border-color: ${roleRed};\n        `\n      : css`\n          &:focus-within {\n            border-color: ${contents000};\n          }\n        `,\n    disabled &&\n      css`\n        background-color: ${bg200};\n      `,\n  ]}\n`;\n\nexport const InputDecorator = styled.div`\n  flex-shrink: 0;\n  /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n  > * {\n    display: block;\n  }\n`;\n\nexport const InputInner = styled.input`\n  ${getTypographyStyles('UIBody2')}\n  color: ${contents000};\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ${ellipsis()}\n  }\n\n  &::placeholder {\n    color: ${contents200};\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const InputLabel = styled.label`\n  ${getTypographyStyles('SubTitle1')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n\nexport const InputError = styled.div`\n  ${getTypographyStyles('Caption1')}\n  color: ${roleRed};\n\n  margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n  ${getTypographyStyles('UIBody2')}\n  color: ${({ textColor }) => textColor};\n  white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n  ${({ $width }) =>\n    $width &&\n    css`\n      width: ${formatUnit($width)};\n    `};\n`;\n\nexport const InputContainer = styled.div<{\n  disabled?: boolean;\n  $hasError?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 0 12px;\n  gap: 8px;\n\n  transition:\n    border-color 0.2s,\n    background-color 0.2s;\n\n  ${({ $hasError, disabled }) => [\n    $hasError\n      ? css`\n          border-color: ${roleRed};\n        `\n      : css`\n          &:focus-within {\n            border-color: ${contents000};\n          }\n        `,\n    disabled &&\n      css`\n        background-color: ${bg200};\n      `,\n  ]}\n`;\n\nexport const InputDecorator = styled.div`\n  flex-shrink: 0;\n  /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n  > * {\n    display: block;\n  }\n`;\n\nexport const InputInner = styled.input`\n  ${getTypographyStyles('UIBody2')}\n  color: ${contents000};\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ${ellipsis()}\n  }\n\n  &::placeholder {\n    color: ${contents200};\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const InputLabel = styled.label`\n  ${getTypographyStyles('Title2')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n\nexport const InputError = styled.div`\n  ${getTypographyStyles('UIBody3')}\n  color: ${roleRed};\n\n  margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n  ${getTypographyStyles('UIBody2')}\n  color: ${({ textColor }) => textColor};\n  white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;"}

package/dist/src/Inputs/TextInput/types.d.ts

@@ -3,6 +3,9 @@ import type { InputHTMLAttributes, ReactNode } from 'react';
 type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, `aria-${string}`>;
 type TextInputProps = {
     type?: 'text' | 'number' | 'email' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local';
+    /**
+     * @deprecated Label 컴포넌트를 사용해 주세요.
+     */
     label?: ReactNode;
     hintText?: string;
     hintTextColor?: ColorVariable;

package/dist/src/Inputs/TextInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,KAAK,cAAc,GAAG,IAAI,CACxB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,QAAQ,MAAM,EAAE,CACjB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EACD,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,gBAAgB,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IACvD,IAAI,EAAE,UAAU,CAAC;IACjB,iCAAiC,EAAE,OAAO,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,CAAC,cAAc,GAAG,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,KAAK,cAAc,GAAG,IAAI,CACxB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,QAAQ,MAAM,EAAE,CACjB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EACD,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,gBAAgB,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IACvD,IAAI,EAAE,UAAU,CAAC;IACjB,iCAAiC,EAAE,OAAO,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,CAAC,cAAc,GAAG,kBAAkB,CAAC,CAAC"}

package/dist/src/Labels/Label/index.cjs.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('../../Common/Divider/index.cjs.js');
+var index = require('../../Common/Flex/index.cjs.js');
+require('../../Common/Grid/index.cjs.js');
+var icon = require('@remember-web/icon');
+require('../../Common/Spinner/styles.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../Common/Skeleton/styles.cjs.js');
+require('../../Common/Typography/styles.cjs.js');
+var styles = require('./styles.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
+
+var _excluded = ["text", "children", "direction", "size", "gap", "width", "rightElement", "required", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Label = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var text = _ref.text,
+    children = _ref.children,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'top-left' : _ref$direction,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    gap = _ref.gap,
+    width = _ref.width,
+    rightElement = _ref.rightElement,
+    required = _ref.required,
+    className = _ref.className,
+    props = _objectWithoutProperties__default.default(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.LabelContainer, _objectSpread(_objectSpread({
+    ref: ref,
+    $size: size,
+    className: className,
+    $direction: direction,
+    $gap: gap,
+    $width: width
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(index.Flex, {
+      gap: 4,
+      children: [text, /*#__PURE__*/jsxRuntime.jsxs(index.Flex, {
+        children: [rightElement, required && /*#__PURE__*/jsxRuntime.jsx(index.Flex, {
+          className: "required-icon",
+          children: /*#__PURE__*/jsxRuntime.jsx(icon.IconRequiredS, {})
+        })]
+      })]
+    }), children]
+  }));
+});
+
+module.exports = Label;
+//# sourceMappingURL=index.cjs.js.map

package/dist/src/Labels/Label/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Labels/Label/index.tsx"],"sourcesContent":["import { Flex } from '@/Common';\nimport { IconRequiredS } from '@remember-web/icon';\nimport { forwardRef } from 'react';\nimport { LabelContainer } from './styles';\nimport type { LabelProps } from './types';\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  (\n    {\n      text,\n      children,\n      direction = 'top-left',\n      size = 'small',\n      gap,\n      width,\n      rightElement,\n      required,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <LabelContainer\n        ref={ref}\n        $size={size}\n        className={className}\n        $direction={direction}\n        $gap={gap}\n        $width={width}\n        {...props}\n      >\n        <Flex gap={4}>\n          {text}\n          <Flex>\n            {rightElement}\n            {required && (\n              <Flex className=\"required-icon\">\n                <IconRequiredS />\n              </Flex>\n            )}\n          </Flex>\n        </Flex>\n        {children}\n      </LabelContainer>\n    );\n  }\n);\n\nexport default Label;\n"],"names":["Label","forwardRef","_ref","ref","text","children","_ref$direction","direction","_ref$size","size","gap","width","rightElement","required","className","props","_objectWithoutProperties","_excluded","_jsxs","LabelContainer","_objectSpread","$size","$direction","$gap","$width","Flex","_jsx","IconRequiredS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMMA,IAAAA,KAAK,gBAAGC,gBAAU,CACtB,UAAAC,IAAA,EAaEC,GAAG,EACA;AAAA,EAAA,IAZDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,cAAA,GAAAJ,IAAA,CACRK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,cAAA;IAAAE,SAAA,GAAAN,IAAA,CACtBO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IACdE,GAAG,GAAAR,IAAA,CAAHQ,GAAG;IACHC,KAAK,GAAAT,IAAA,CAALS,KAAK;IACLC,YAAY,GAAAV,IAAA,CAAZU,YAAY;IACZC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,SAAS,GAAAZ,IAAA,CAATY,SAAS;AACNC,IAAAA,KAAK,GAAAC,yCAAA,CAAAd,IAAA,EAAAe,SAAA,CAAA,CAAA;AAIV,EAAA,oBACEC,eAAA,CAACC,qBAAc,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACbjB,IAAAA,GAAG,EAAEA,GAAI;AACTkB,IAAAA,KAAK,EAAEZ,IAAK;AACZK,IAAAA,SAAS,EAAEA,SAAU;AACrBQ,IAAAA,UAAU,EAAEf,SAAU;AACtBgB,IAAAA,IAAI,EAAEb,GAAI;AACVc,IAAAA,MAAM,EAAEb,KAAAA;AAAM,GAAA,EACVI,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAV,QAAA,EAAA,cAETa,eAAA,CAACO,UAAI,EAAA;AAACf,MAAAA,GAAG,EAAE,CAAE;AAAAL,MAAAA,QAAA,EACVD,CAAAA,IAAI,eACLc,eAAA,CAACO,UAAI,EAAA;AAAApB,QAAAA,QAAA,GACFO,YAAY,EACZC,QAAQ,iBACPa,cAAA,CAACD,UAAI,EAAA;AAACX,UAAAA,SAAS,EAAC,eAAe;AAAAT,UAAAA,QAAA,eAC7BqB,cAAA,CAACC,kBAAa,EAAE,EAAA,CAAA;AAAC,SACb,CACP,CAAA;AAAA,OACG,CAAC,CAAA;KACH,CAAC,EACNtB,QAAQ,CAAA;AAAA,GAAA,CACK,CAAC,CAAA;AAErB,CACF;;;;"}

package/dist/src/Labels/Label/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { LabelProps } from './types';
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default Label;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Labels/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Labels/Label/index.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,KAAK,yGAyCV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/src/Labels/Label/index.esm.js

@@ -0,0 +1,51 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import '../../Common/Divider/index.esm.js';
+import { Flex } from '../../Common/Flex/index.esm.js';
+import '../../Common/Grid/index.esm.js';
+import { IconRequiredS } from '@remember-web/icon';
+import '../../Common/Spinner/styles.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../../Common/Skeleton/styles.esm.js';
+import '../../Common/Typography/styles.esm.js';
+import { LabelContainer } from './styles.esm.js';
+
+var _excluded = ["text", "children", "direction", "size", "gap", "width", "rightElement", "required", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Label = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var text = _ref.text,
+    children = _ref.children,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'top-left' : _ref$direction,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    gap = _ref.gap,
+    width = _ref.width,
+    rightElement = _ref.rightElement,
+    required = _ref.required,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs(LabelContainer, _objectSpread(_objectSpread({
+    ref: ref,
+    $size: size,
+    className: className,
+    $direction: direction,
+    $gap: gap,
+    $width: width
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxs(Flex, {
+      gap: 4,
+      children: [text, /*#__PURE__*/jsxs(Flex, {
+        children: [rightElement, required && /*#__PURE__*/jsx(Flex, {
+          className: "required-icon",
+          children: /*#__PURE__*/jsx(IconRequiredS, {})
+        })]
+      })]
+    }), children]
+  }));
+});
+
+export { Label as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/src/Labels/Label/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Labels/Label/index.tsx"],"sourcesContent":["import { Flex } from '@/Common';\nimport { IconRequiredS } from '@remember-web/icon';\nimport { forwardRef } from 'react';\nimport { LabelContainer } from './styles';\nimport type { LabelProps } from './types';\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  (\n    {\n      text,\n      children,\n      direction = 'top-left',\n      size = 'small',\n      gap,\n      width,\n      rightElement,\n      required,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <LabelContainer\n        ref={ref}\n        $size={size}\n        className={className}\n        $direction={direction}\n        $gap={gap}\n        $width={width}\n        {...props}\n      >\n        <Flex gap={4}>\n          {text}\n          <Flex>\n            {rightElement}\n            {required && (\n              <Flex className=\"required-icon\">\n                <IconRequiredS />\n              </Flex>\n            )}\n          </Flex>\n        </Flex>\n        {children}\n      </LabelContainer>\n    );\n  }\n);\n\nexport default Label;\n"],"names":["Label","forwardRef","_ref","ref","text","children","_ref$direction","direction","_ref$size","size","gap","width","rightElement","required","className","props","_objectWithoutProperties","_excluded","_jsxs","LabelContainer","_objectSpread","$size","$direction","$gap","$width","Flex","_jsx","IconRequiredS"],"mappings":";;;;;;;;;;;;;;;;AAMMA,IAAAA,KAAK,gBAAGC,UAAU,CACtB,UAAAC,IAAA,EAaEC,GAAG,EACA;AAAA,EAAA,IAZDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,cAAA,GAAAJ,IAAA,CACRK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,cAAA;IAAAE,SAAA,GAAAN,IAAA,CACtBO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IACdE,GAAG,GAAAR,IAAA,CAAHQ,GAAG;IACHC,KAAK,GAAAT,IAAA,CAALS,KAAK;IACLC,YAAY,GAAAV,IAAA,CAAZU,YAAY;IACZC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,SAAS,GAAAZ,IAAA,CAATY,SAAS;AACNC,IAAAA,KAAK,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA,CAAA,CAAA;AAIV,EAAA,oBACEC,IAAA,CAACC,cAAc,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACbjB,IAAAA,GAAG,EAAEA,GAAI;AACTkB,IAAAA,KAAK,EAAEZ,IAAK;AACZK,IAAAA,SAAS,EAAEA,SAAU;AACrBQ,IAAAA,UAAU,EAAEf,SAAU;AACtBgB,IAAAA,IAAI,EAAEb,GAAI;AACVc,IAAAA,MAAM,EAAEb,KAAAA;AAAM,GAAA,EACVI,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAV,QAAA,EAAA,cAETa,IAAA,CAACO,IAAI,EAAA;AAACf,MAAAA,GAAG,EAAE,CAAE;AAAAL,MAAAA,QAAA,EACVD,CAAAA,IAAI,eACLc,IAAA,CAACO,IAAI,EAAA;AAAApB,QAAAA,QAAA,GACFO,YAAY,EACZC,QAAQ,iBACPa,GAAA,CAACD,IAAI,EAAA;AAACX,UAAAA,SAAS,EAAC,eAAe;AAAAT,UAAAA,QAAA,eAC7BqB,GAAA,CAACC,aAAa,EAAE,EAAA,CAAA;AAAC,SACb,CACP,CAAA;AAAA,OACG,CAAC,CAAA;KACH,CAAC,EACNtB,QAAQ,CAAA;AAAA,GAAA,CACK,CAAC,CAAA;AAErB,CACF;;;;"}

package/dist/src/Labels/Label/styles.cjs.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var mixin = require('@remember-web/mixin');
+var styled = require('styled-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var LabelContainer = styled__default.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  position: relative;\n  width: ", ";\n  min-width: min-content; \n\n  ", "\n\n  ", "\n\n  /* Size styles */\n   ", "\n"])), function (_ref) {
+  var _ref$$width = _ref.$width,
+    $width = _ref$$width === void 0 ? 'auto' : _ref$$width;
+  return $width;
+}, function (_ref2) {
+  var $size = _ref2.$size,
+    $gap = _ref2.$gap;
+  var defaultGap = $size === 'large' ? '12px' : '8px';
+  var finalGap = $gap !== undefined ? "".concat($gap, "px") : defaultGap;
+  return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n      gap: ", ";\n    "])), finalGap);
+}, function (_ref3) {
+  var _ref3$$direction = _ref3.$direction,
+    $direction = _ref3$$direction === void 0 ? 'top' : _ref3$$direction;
+  switch ($direction) {
+    // Top variations
+    case 'top':
+      return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-left':
+      return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-right':
+      return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: flex-end;\n        "])));
+    case 'top-center':
+      return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: center;\n        "])));
+
+    // Bottom variations
+    case 'bottom':
+      return styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-left':
+      return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-right':
+      return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: flex-end;\n        "])));
+    case 'bottom-center':
+      return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: center;\n        "])));
+
+    // Left variations
+    case 'left':
+      return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+    case 'left-top':
+      return styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: flex-start;\n        "])));
+    case 'left-bottom':
+      return styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: flex-end;\n        "])));
+    case 'left-center':
+      return styled.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+
+    // Right variations
+    case 'right':
+      return styled.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+    case 'right-top':
+      return styled.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: flex-start;\n        "])));
+    case 'right-bottom':
+      return styled.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: flex-end;\n        "])));
+    case 'right-center':
+      return styled.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+  }
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  switch ($size) {
+    case 'small':
+      return styled.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral__default.default(["\n          ", "\n          color: ", ";\n        "])), mixin.getTypographyStyles('UIBody2'), mixin.contents100);
+    case 'large':
+    default:
+      return styled.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral__default.default(["\n          ", "\n          color: ", ";\n        "])), mixin.getTypographyStyles('Title2'), mixin.contents000);
+  }
+});
+
+exports.LabelContainer = LabelContainer;
+//# sourceMappingURL=styles.cjs.js.map