@remember-web/primitive 0.5.2 → 0.5.4

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

@@ -22,6 +22,17 @@ var MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE = {
   padding: '6px 14px',
   height: '30px'
 };
+var LARGE_WITH_BORDER_CHIP_SIZE_STYE = {
+  typography: 'UIBody2',
+  padding: '6px 12px',
+  height: '34px'
+};
+var LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE = {
+  typography: 'UIBody2',
+  padding: '7px 13px',
+  height: '34px'
+};
+var CHIP_SIZES = ['small', 'medium', 'large'];
 var CHIP_SIZE_STYLE = {
   small: {
     filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
@@ -32,6 +43,11 @@ var CHIP_SIZE_STYLE = {
     filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
     outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
     dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE
+  },
+  large: {
+    filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,
+    outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,
+    dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE
   }
 };
 var CHIP_VARIANT_STYLE = {
@@ -143,6 +159,7 @@ var CHIP_VARIANT_STYLE = {
   }
 };
 
+exports.CHIP_SIZES = CHIP_SIZES;
 exports.CHIP_SIZE_STYLE = CHIP_SIZE_STYLE;
 exports.CHIP_VARIANT_STYLE = CHIP_VARIANT_STYLE;
 //# sourceMappingURL=const.cjs.js.map

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, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';\n\n\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n  typography: 'Caption1',\n  padding: '6px 10px',\n  height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n  typography: 'Caption1',\n  padding: '7px 11px',\n  height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n  typography: 'UIBody3',\n  padding: '5px 12px',\n  height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n  typography: 'UIBody3',\n  padding: '6px 14px',\n  height: '30px',\n};\n\nexport const CHIP_SIZE_STYLE = {\n  small: {\n    filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n  medium: {\n    filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\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":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","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 {\n  ChipSize,\n  ChipSizeStyle,\n  ChipState,\n  ChipVariant,\n  ChipVariantStyleMap,\n} from './types';\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'Caption1',\n  padding: '6px 10px',\n  height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'Caption1',\n  padding: '7px 11px',\n  height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'UIBody3',\n  padding: '5px 12px',\n  height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'UIBody3',\n  padding: '6px 14px',\n  height: '30px',\n};\n\nconst LARGE_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'UIBody2',\n  padding: '6px 12px',\n  height: '34px',\n};\n\nconst LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'UIBody2',\n  padding: '7px 13px',\n  height: '34px',\n};\n\nexport const CHIP_SIZES = [\n  'small',\n  'medium',\n  'large',\n] as const satisfies readonly ChipSize[];\nexport const CHIP_VARIANTS = [\n  'filled',\n  'outline',\n  'dashedLine',\n] as const satisfies readonly ChipVariant[];\nexport const CHIP_STATES = [\n  'default',\n  'hover',\n  'disabled',\n  'selected',\n] as const satisfies readonly ChipState[];\n\nexport const CHIP_SIZE_STYLE = {\n  small: {\n    filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n  medium: {\n    filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n  large: {\n    filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\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":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","LARGE_WITH_BORDER_CHIP_SIZE_STYE","LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZES","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","large","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":"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"}

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

@@ -1,4 +1,7 @@
 import type { ChipSizeStyle, ChipVariantStyleMap } from './types';
+export declare const CHIP_SIZES: readonly ["small", "medium", "large"];
+export declare const CHIP_VARIANTS: readonly ["filled", "outline", "dashedLine"];
+export declare const CHIP_STATES: readonly ["default", "hover", "disabled", "selected"];
 export declare const CHIP_SIZE_STYLE: {
     readonly small: {
         readonly filled: ChipSizeStyle;
@@ -10,6 +13,11 @@ export declare const CHIP_SIZE_STYLE: {
         readonly outline: ChipSizeStyle;
         readonly dashedLine: ChipSizeStyle;
     };
+    readonly large: {
+        readonly filled: ChipSizeStyle;
+        readonly outline: ChipSizeStyle;
+        readonly dashedLine: ChipSizeStyle;
+    };
 };
 export declare const CHIP_VARIANT_STYLE: ChipVariantStyleMap;
 //# sourceMappingURL=const.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAY,aAAa,EAAe,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA4BzF,eAAO,MAAM,eAAe;;;;;;;;;;;CAW6C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,EAAE,mBA6GgB,CAAC"}
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAEV,aAAa,EAGb,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAsCjB,eAAO,MAAM,UAAU,uCAIiB,CAAC;AACzC,eAAO,MAAM,aAAa,8CAIiB,CAAC;AAC5C,eAAO,MAAM,WAAW,uDAKiB,CAAC;AAE1C,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgB6C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,EAAE,mBA6GgB,CAAC"}

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

@@ -20,6 +20,17 @@ var MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE = {
   padding: '6px 14px',
   height: '30px'
 };
+var LARGE_WITH_BORDER_CHIP_SIZE_STYE = {
+  typography: 'UIBody2',
+  padding: '6px 12px',
+  height: '34px'
+};
+var LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE = {
+  typography: 'UIBody2',
+  padding: '7px 13px',
+  height: '34px'
+};
+var CHIP_SIZES = ['small', 'medium', 'large'];
 var CHIP_SIZE_STYLE = {
   small: {
     filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
@@ -30,6 +41,11 @@ var CHIP_SIZE_STYLE = {
     filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
     outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
     dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE
+  },
+  large: {
+    filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,
+    outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,
+    dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE
   }
 };
 var CHIP_VARIANT_STYLE = {
@@ -141,5 +157,5 @@ var CHIP_VARIANT_STYLE = {
   }
 };
 
-export { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE };
+export { CHIP_SIZES, CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE };
 //# sourceMappingURL=const.esm.js.map

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, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';\n\n\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n  typography: 'Caption1',\n  padding: '6px 10px',\n  height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n  typography: 'Caption1',\n  padding: '7px 11px',\n  height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n  typography: 'UIBody3',\n  padding: '5px 12px',\n  height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {\n  typography: 'UIBody3',\n  padding: '6px 14px',\n  height: '30px',\n};\n\nexport const CHIP_SIZE_STYLE = {\n  small: {\n    filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n  medium: {\n    filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\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":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","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 {\n  ChipSize,\n  ChipSizeStyle,\n  ChipState,\n  ChipVariant,\n  ChipVariantStyleMap,\n} from './types';\n\nconst SMALL_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'Caption1',\n  padding: '6px 10px',\n  height: '28px',\n};\n\nconst SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'Caption1',\n  padding: '7px 11px',\n  height: '28px',\n};\n\nconst MEDIUM_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'UIBody3',\n  padding: '5px 12px',\n  height: '30px',\n};\n\nconst MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'UIBody3',\n  padding: '6px 14px',\n  height: '30px',\n};\n\nconst LARGE_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'UIBody2',\n  padding: '6px 12px',\n  height: '34px',\n};\n\nconst LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {\n  typography: 'UIBody2',\n  padding: '7px 13px',\n  height: '34px',\n};\n\nexport const CHIP_SIZES = [\n  'small',\n  'medium',\n  'large',\n] as const satisfies readonly ChipSize[];\nexport const CHIP_VARIANTS = [\n  'filled',\n  'outline',\n  'dashedLine',\n] as const satisfies readonly ChipVariant[];\nexport const CHIP_STATES = [\n  'default',\n  'hover',\n  'disabled',\n  'selected',\n] as const satisfies readonly ChipState[];\n\nexport const CHIP_SIZE_STYLE = {\n  small: {\n    filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n  medium: {\n    filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n  large: {\n    filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,\n    outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,\n    dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE,\n  },\n} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;\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":["SMALL_WITH_BORDER_CHIP_SIZE_STYE","typography","padding","height","SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE","MEDIUM_WITH_BORDER_CHIP_SIZE_STYE","MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE","LARGE_WITH_BORDER_CHIP_SIZE_STYE","LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE","CHIP_SIZES","CHIP_SIZE_STYLE","small","filled","outline","dashedLine","medium","large","CHIP_VARIANT_STYLE","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","bg100","border","concat","contents000"],"mappings":"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"}

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

@@ -15,7 +15,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _excluded = ["$size", "$variant", "$clickable"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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), true).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 getVariantStyles = function getVariantStyles(props) {
@@ -26,20 +26,20 @@ var getVariantStyles = function getVariantStyles(props) {
   var getStateStyle = function getStateStyle(state) {
     return styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n    background-color: ", ";\n    color: ", ";\n    border: ", ";\n    --left-icon-color: ", ";\n    --delete-button-color: ", ";\n  "])), _const.CHIP_VARIANT_STYLE[$variant][state].backgroundColor, _const.CHIP_VARIANT_STYLE[$variant][state].color, _const.CHIP_VARIANT_STYLE[$variant][state].border || 'none', _const.CHIP_VARIANT_STYLE[$variant][state].leftIconColor, _const.CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor);
   };
-  return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n    ", ";\n\n    ", "\n    \n    &[data-chip-disabled='true'] {\n      ", "\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  "])), getStateStyle('default'), $clickable && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n      &:hover:not([data-chip-disabled='true']) {\n        ", "\n      }\n\n      ", ":not([data-chip-disabled=\"true\"]) {\n        ", " \n      }\n      "])), getStateStyle($selected ? 'selectedHover' : 'hover'), $selected ? '&' : '&:active', getStateStyle('selected')), getStateStyle('disabled'));
+  return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n    ", ";\n\n    ", "\n    \n    &[data-chip-disabled='true'] {\n      ", "\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  "])), getStateStyle('default'), $clickable && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n      &:hover:not([data-chip-disabled='true']) {\n        ", "\n      }\n\n      ", "\n      "])), getStateStyle($selected ? 'selectedHover' : 'hover'), $selected && styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n        &:not([data-chip-disabled=\"true\"]) {\n          ", " \n        }"])), getStateStyle('selected'))), getStateStyle('disabled'));
 };
-var StyledChip = styled__default.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  ", "\n"])), function (_ref) {
+var StyledChip = styled__default.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  ", "\n"])), function (_ref) {
   var $size = _ref.$size,
     $variant = _ref.$variant,
     _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: 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][$variant].padding, mixin.getTypographyStyles(_const.CHIP_SIZE_STYLE[$size][$variant].typography), getVariantStyles(_objectSpread({
+  return styled.css(_templateObject6 || (_templateObject6 = _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][$variant].padding, mixin.getTypographyStyles(_const.CHIP_SIZE_STYLE[$size][$variant].typography), getVariantStyles(_objectSpread({
     $variant: $variant,
     $clickable: $clickable
   }, props)));
 });
-var ButtonWrapper = styled__default.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  "])));
+var ButtonWrapper = styled__default.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  "])));
 
 exports.ButtonWrapper = ButtonWrapper;
 exports.StyledChip = StyledChip;

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: left;\n    transition: all 0.2s ease-in;\n    height: auto; \n    padding: ${CHIP_SIZE_STYLE[$size][$variant].padding};\n\n    ${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].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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"}
+{"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      ${\n        $selected &&\n        css`\n        &:not([data-chip-disabled=\"true\"]) {\n          ${getStateStyle('selected')} \n        }`\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][$variant].padding};\n\n    ${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].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","_templateObject4","StyledChip","styled","div","_templateObject5","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject6","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject7"],"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,2NAuBtB,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;AA+CzD,eAAO,MAAM,UAAU,2NAuBtB,CAAC;AAEF,eAAO,MAAM,aAAa,4NAMvB,CAAC"}

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

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const.esm.js';
 
 var _excluded = ["$size", "$variant", "$clickable"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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), true).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 getVariantStyles = function getVariantStyles(props) {
@@ -17,20 +17,20 @@ var getVariantStyles = function getVariantStyles(props) {
   var getStateStyle = function getStateStyle(state) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    color: ", ";\n    border: ", ";\n    --left-icon-color: ", ";\n    --delete-button-color: ", ";\n  "])), CHIP_VARIANT_STYLE[$variant][state].backgroundColor, CHIP_VARIANT_STYLE[$variant][state].color, CHIP_VARIANT_STYLE[$variant][state].border || 'none', CHIP_VARIANT_STYLE[$variant][state].leftIconColor, CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor);
   };
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", ";\n\n    ", "\n    \n    &[data-chip-disabled='true'] {\n      ", "\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  "])), getStateStyle('default'), $clickable && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      &:hover:not([data-chip-disabled='true']) {\n        ", "\n      }\n\n      ", ":not([data-chip-disabled=\"true\"]) {\n        ", " \n      }\n      "])), getStateStyle($selected ? 'selectedHover' : 'hover'), $selected ? '&' : '&:active', getStateStyle('selected')), getStateStyle('disabled'));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", ";\n\n    ", "\n    \n    &[data-chip-disabled='true'] {\n      ", "\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  "])), getStateStyle('default'), $clickable && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      &:hover:not([data-chip-disabled='true']) {\n        ", "\n      }\n\n      ", "\n      "])), getStateStyle($selected ? 'selectedHover' : 'hover'), $selected && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        &:not([data-chip-disabled=\"true\"]) {\n          ", " \n        }"])), getStateStyle('selected'))), getStateStyle('disabled'));
 };
-var StyledChip = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+var StyledChip = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var $size = _ref.$size,
     $variant = _ref.$variant,
     _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: 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][$variant].padding, getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography), getVariantStyles(_objectSpread({
+  return css(_templateObject6 || (_templateObject6 = _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][$variant].padding, getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography), getVariantStyles(_objectSpread({
     $variant: $variant,
     $clickable: $clickable
   }, props)));
 });
-var ButtonWrapper = styled.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  "])));
+var ButtonWrapper = styled.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  "])));
 
 export { ButtonWrapper, StyledChip };
 //# sourceMappingURL=styles.esm.js.map

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: left;\n    transition: all 0.2s ease-in;\n    height: auto; \n    padding: ${CHIP_SIZE_STYLE[$size][$variant].padding};\n\n    ${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].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":";;;;;;;;;;;AAKA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAA8B,EAAK;AAC3D,EAAA,IAAAC,eAAA,GAAuDD,KAAK,CAApDE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,eAAA,KAAA,MAAA,GAAG,QAAQ,GAAAA,eAAA;IAAEE,SAAS,GAAiBH,KAAK,CAA/BG,SAAS;IAAEC,UAAU,GAAKJ,KAAK,CAApBI,UAAU;AAClD,EAAA,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAgB,EAAA;IAAA,OAAKC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAAA,CAAA,0BAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,4BAAA,EAAA,gCAAA,EAAA,OAAA,CAAA,CAAA,CAAA,EACzBC,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACK,eAAe,EAC9DD,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACM,KAAK,EACxCF,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACO,MAAM,IAAI,MAAM,EACzCH,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACQ,aAAa,EAC7CJ,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACS,iBAAiB,CAAA;GAC/E;EAED,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,sQACNJ,aAAa,CAAC,SAAS,CAAC,EAGxBD,UAAU,IACVG,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,sBAAA,CAAA,CAAA,8DAAA,EAAA,qBAAA,EAAA,iDAAA,EAAA,oBAAA,CAAA,CAAA,CAAA,EAECJ,aAAa,CAACF,SAAS,GAAG,eAAe,GAAG,OAAO,CAAC,EAGtDA,SAAS,GAAG,GAAG,GAAG,UAAU,EAC1BE,aAAa,CAAC,UAAU,CAAC,CAE5B,EAICA,aAAa,CAAC,UAAU,CAAC,CAAA;AAYjC,CAAC;AAEM,IAAMa,UAAU,GAAGC,MAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAZ,sBAAA,CAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAChC,UAAAa,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAErB,QAAQ,GAAAoB,IAAA,CAARpB,QAAQ;IAAAsB,eAAA,GAAAF,IAAA,CAAElB,UAAU;AAAVA,IAAAA,UAAU,GAAAoB,eAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,eAAA;AAAKxB,IAAAA,KAAK,GAAAyB,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA;AAAA,EAAA,OAAOnB,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,CAAA,CAAA,qEAAA,EAAA,8QAAA,EAAA,WAAA,EAAA,cAAA,EAAA,MAAA,CAAA,CAAA,CAAA,EAGhDL,UAAU,GAAG,SAAS,GAAG,SAAS,EAajCwB,eAAe,CAACL,KAAK,CAAC,CAACrB,QAAQ,CAAC,CAAC2B,OAAO,EAEjDC,mBAAmB,CAACF,eAAe,CAACL,KAAK,CAAC,CAACrB,QAAQ,CAAC,CAAC6B,UAAU,CAAC,EAEhEhC,gBAAgB,CAAAiC,aAAA,CAAA;AAAG9B,IAAAA,QAAQ,EAARA,QAAQ;AAAEE,IAAAA,UAAU,EAAVA;GAAU,EAAKJ,KAAK,CAAE,CAAC,CAAA;AAAA,CACvD;AAGI,IAAMiC,aAAa,GAAGd,MAAM,CAACe,MAAM,CAAAC,gBAAA,KAAAA,gBAAA,GAAA1B,sBAAA,CAAA,CAAA,+GAAA,CAAA,CAAA,CAAA;;;;"}
+{"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      ${\n        $selected &&\n        css`\n        &:not([data-chip-disabled=\"true\"]) {\n          ${getStateStyle('selected')} \n        }`\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][$variant].padding};\n\n    ${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].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","_templateObject4","StyledChip","styled","div","_templateObject5","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject6","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject7"],"mappings":"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"}

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

@@ -1,5 +1,7 @@
 'use strict';
 
+var _const = require('./const.cjs.js');
+
 function ensureValidChipProps(props) {
   if (props.clickable === false && 'selected' in props) {
     throw new Error('오류: "clickable"이 false일 때는 "selected" 속성을 사용할 수 없습니다. ' + '선택 가능한 Chip을 만들려면 "clickable"을 true로 설정하세요.');
@@ -16,9 +18,8 @@ function ensureValidChipProps(props) {
   if (!props.variant) {
     throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');
   }
-  var validSizes = ['small', 'medium'];
-  if (props.size && !validSizes.includes(props.size)) {
-    throw new Error("\uC624\uB958: \uC62C\uBC14\uB974\uC9C0 \uC54A\uC740 size \uAC12\uC785\uB2C8\uB2E4: \"".concat(props.size, "\". ") + "\uC720\uD6A8\uD55C size \uAC12\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4: ".concat(validSizes.join(', '), "."));
+  if (props.size && !_const.CHIP_SIZES.includes(props.size)) {
+    throw new Error("\uC624\uB958: \uC62C\uBC14\uB974\uC9C0 \uC54A\uC740 size \uAC12\uC785\uB2C8\uB2E4: \"".concat(props.size, "\". ") + "\uC720\uD6A8\uD55C size \uAC12\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4: ".concat(_const.CHIP_SIZES.join(', '), "."));
   }
   var validVariants = ['filled', 'outline', 'dashedLine'];
   if (props.variant && !validVariants.includes(props.variant)) {

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

@@ -1 +1 @@
-{"version":3,"file":"typeGuard.cjs.js","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"sourcesContent":["import type { ChipProps, ChipSize, ChipVariant } from './types';\n\nexport function ensureValidChipProps(props: ChipProps): props is ChipProps {\n  if (props.clickable === false && 'selected' in props) {\n    throw new Error(\n      '오류: \"clickable\"이 false일 때는 \"selected\" 속성을 사용할 수 없습니다. ' +\n        '선택 가능한 Chip을 만들려면 \"clickable\"을 true로 설정하세요.'\n    );\n  }\n\n  if (props.onDelete === undefined && 'deleteIcon' in props) {\n    throw new Error(\n      '오류: \"onDelete\" 함수 없이 \"deleteIcon\"을 사용할 수 없습니다. ' +\n        '\"deleteIcon\"을 사용하려면 \"onDelete\" 함수를 함께 사용해야 합니다.'\n    );\n  }\n\n  if (!props.children) {\n    throw new Error(\n      '오류: Chip 컴포넌트에는 반드시 children이 있어야 합니다. '\n    );\n  }\n\n  if (!props.size) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 size가 있어야 합니다. ');\n  }\n\n  if (!props.variant) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');\n  }\n\n  const validSizes: ChipSize[] = ['small', 'medium'];\n  if (props.size && !validSizes.includes(props.size)) {\n    throw new Error(\n      `오류: 올바르지 않은 size 값입니다: \"${props.size}\". ` +\n        `유효한 size 값은 다음과 같습니다: ${validSizes.join(', ')}.`\n    );\n  }\n\n  const validVariants: ChipVariant[] = ['filled', 'outline', 'dashedLine'];\n  if (props.variant && !validVariants.includes(props.variant)) {\n    throw new Error(\n      `오류: 올바르지 않은 variant 값입니다: \"${props.variant}\". ` +\n        `유효한 variant 값은 다음과 같습니다: ${validVariants.join(', ')}.`\n    );\n  }\n  return true;\n}\n"],"names":["ensureValidChipProps","props","clickable","Error","onDelete","undefined","children","size","variant","validSizes","includes","concat","join","validVariants"],"mappings":";;AAEO,SAASA,oBAAoBA,CAACC,KAAgB,EAAsB;EACzE,IAAIA,KAAK,CAACC,SAAS,KAAK,KAAK,IAAI,UAAU,IAAID,KAAK,EAAE;AACpD,IAAA,MAAM,IAAIE,KAAK,CACb,wDAAwD,GACtD,6CACJ,CAAC;AACH;EAEA,IAAIF,KAAK,CAACG,QAAQ,KAAKC,SAAS,IAAI,YAAY,IAAIJ,KAAK,EAAE;AACzD,IAAA,MAAM,IAAIE,KAAK,CACb,iDAAiD,GAC/C,iDACJ,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACK,QAAQ,EAAE;AACnB,IAAA,MAAM,IAAIH,KAAK,CACb,yCACF,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACM,IAAI,EAAE;AACf,IAAA,MAAM,IAAIJ,KAAK,CAAC,qCAAqC,CAAC;AACxD;AAEA,EAAA,IAAI,CAACF,KAAK,CAACO,OAAO,EAAE;AAClB,IAAA,MAAM,IAAIL,KAAK,CAAC,wCAAwC,CAAC;AAC3D;AAEA,EAAA,IAAMM,UAAsB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC;AAClD,EAAA,IAAIR,KAAK,CAACM,IAAI,IAAI,CAACE,UAAU,CAACC,QAAQ,CAACT,KAAK,CAACM,IAAI,CAAC,EAAE;AAClD,IAAA,MAAM,IAAIJ,KAAK,CACb,wFAAAQ,MAAA,CAA2BV,KAAK,CAACM,IAAI,iGAAAI,MAAA,CACVF,UAAU,CAACG,IAAI,CAAC,IAAI,CAAC,MAClD,CAAC;AACH;EAEA,IAAMC,aAA4B,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC;AACxE,EAAA,IAAIZ,KAAK,CAACO,OAAO,IAAI,CAACK,aAAa,CAACH,QAAQ,CAACT,KAAK,CAACO,OAAO,CAAC,EAAE;AAC3D,IAAA,MAAM,IAAIL,KAAK,CACb,2FAAAQ,MAAA,CAA8BV,KAAK,CAACO,OAAO,oGAAAG,MAAA,CACbE,aAAa,CAACD,IAAI,CAAC,IAAI,CAAC,MACxD,CAAC;AACH;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"typeGuard.cjs.js","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"sourcesContent":["import { CHIP_SIZES } from './const';\nimport type { ChipProps, ChipVariant } from './types';\n\nexport function ensureValidChipProps(props: ChipProps): props is ChipProps {\n  if (props.clickable === false && 'selected' in props) {\n    throw new Error(\n      '오류: \"clickable\"이 false일 때는 \"selected\" 속성을 사용할 수 없습니다. ' +\n        '선택 가능한 Chip을 만들려면 \"clickable\"을 true로 설정하세요.'\n    );\n  }\n\n  if (props.onDelete === undefined && 'deleteIcon' in props) {\n    throw new Error(\n      '오류: \"onDelete\" 함수 없이 \"deleteIcon\"을 사용할 수 없습니다. ' +\n        '\"deleteIcon\"을 사용하려면 \"onDelete\" 함수를 함께 사용해야 합니다.'\n    );\n  }\n\n  if (!props.children) {\n    throw new Error(\n      '오류: Chip 컴포넌트에는 반드시 children이 있어야 합니다. '\n    );\n  }\n\n  if (!props.size) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 size가 있어야 합니다. ');\n  }\n\n  if (!props.variant) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');\n  }\n\n  if (props.size && !CHIP_SIZES.includes(props.size)) {\n    throw new Error(\n      `오류: 올바르지 않은 size 값입니다: \"${props.size}\". ` +\n        `유효한 size 값은 다음과 같습니다: ${CHIP_SIZES.join(', ')}.`\n    );\n  }\n\n  const validVariants: ChipVariant[] = ['filled', 'outline', 'dashedLine'];\n  if (props.variant && !validVariants.includes(props.variant)) {\n    throw new Error(\n      `오류: 올바르지 않은 variant 값입니다: \"${props.variant}\". ` +\n        `유효한 variant 값은 다음과 같습니다: ${validVariants.join(', ')}.`\n    );\n  }\n  return true;\n}\n"],"names":["ensureValidChipProps","props","clickable","Error","onDelete","undefined","children","size","variant","CHIP_SIZES","includes","concat","join","validVariants"],"mappings":";;;;AAGO,SAASA,oBAAoBA,CAACC,KAAgB,EAAsB;EACzE,IAAIA,KAAK,CAACC,SAAS,KAAK,KAAK,IAAI,UAAU,IAAID,KAAK,EAAE;AACpD,IAAA,MAAM,IAAIE,KAAK,CACb,wDAAwD,GACtD,6CACJ,CAAC;AACH;EAEA,IAAIF,KAAK,CAACG,QAAQ,KAAKC,SAAS,IAAI,YAAY,IAAIJ,KAAK,EAAE;AACzD,IAAA,MAAM,IAAIE,KAAK,CACb,iDAAiD,GAC/C,iDACJ,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACK,QAAQ,EAAE;AACnB,IAAA,MAAM,IAAIH,KAAK,CACb,yCACF,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACM,IAAI,EAAE;AACf,IAAA,MAAM,IAAIJ,KAAK,CAAC,qCAAqC,CAAC;AACxD;AAEA,EAAA,IAAI,CAACF,KAAK,CAACO,OAAO,EAAE;AAClB,IAAA,MAAM,IAAIL,KAAK,CAAC,wCAAwC,CAAC;AAC3D;AAEA,EAAA,IAAIF,KAAK,CAACM,IAAI,IAAI,CAACE,iBAAU,CAACC,QAAQ,CAACT,KAAK,CAACM,IAAI,CAAC,EAAE;AAClD,IAAA,MAAM,IAAIJ,KAAK,CACb,wFAAAQ,MAAA,CAA2BV,KAAK,CAACM,IAAI,iGAAAI,MAAA,CACVF,iBAAU,CAACG,IAAI,CAAC,IAAI,CAAC,MAClD,CAAC;AACH;EAEA,IAAMC,aAA4B,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC;AACxE,EAAA,IAAIZ,KAAK,CAACO,OAAO,IAAI,CAACK,aAAa,CAACH,QAAQ,CAACT,KAAK,CAACO,OAAO,CAAC,EAAE;AAC3D,IAAA,MAAM,IAAIL,KAAK,CACb,2FAAAQ,MAAA,CAA8BV,KAAK,CAACO,OAAO,oGAAAG,MAAA,CACbE,aAAa,CAACD,IAAI,CAAC,IAAI,CAAC,MACxD,CAAC;AACH;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"typeGuard.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAyB,MAAM,SAAS,CAAC;AAEhE,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,IAAI,SAAS,CA6CzE"}
+{"version":3,"file":"typeGuard.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,SAAS,CAAC;AAEtD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,IAAI,SAAS,CA4CzE"}

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

@@ -1,3 +1,5 @@
+import { CHIP_SIZES } from './const.esm.js';
+
 function ensureValidChipProps(props) {
   if (props.clickable === false && 'selected' in props) {
     throw new Error('오류: "clickable"이 false일 때는 "selected" 속성을 사용할 수 없습니다. ' + '선택 가능한 Chip을 만들려면 "clickable"을 true로 설정하세요.');
@@ -14,9 +16,8 @@ function ensureValidChipProps(props) {
   if (!props.variant) {
     throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');
   }
-  var validSizes = ['small', 'medium'];
-  if (props.size && !validSizes.includes(props.size)) {
-    throw new Error("\uC624\uB958: \uC62C\uBC14\uB974\uC9C0 \uC54A\uC740 size \uAC12\uC785\uB2C8\uB2E4: \"".concat(props.size, "\". ") + "\uC720\uD6A8\uD55C size \uAC12\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4: ".concat(validSizes.join(', '), "."));
+  if (props.size && !CHIP_SIZES.includes(props.size)) {
+    throw new Error("\uC624\uB958: \uC62C\uBC14\uB974\uC9C0 \uC54A\uC740 size \uAC12\uC785\uB2C8\uB2E4: \"".concat(props.size, "\". ") + "\uC720\uD6A8\uD55C size \uAC12\uC740 \uB2E4\uC74C\uACFC \uAC19\uC2B5\uB2C8\uB2E4: ".concat(CHIP_SIZES.join(', '), "."));
   }
   var validVariants = ['filled', 'outline', 'dashedLine'];
   if (props.variant && !validVariants.includes(props.variant)) {

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

@@ -1 +1 @@
-{"version":3,"file":"typeGuard.esm.js","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"sourcesContent":["import type { ChipProps, ChipSize, ChipVariant } from './types';\n\nexport function ensureValidChipProps(props: ChipProps): props is ChipProps {\n  if (props.clickable === false && 'selected' in props) {\n    throw new Error(\n      '오류: \"clickable\"이 false일 때는 \"selected\" 속성을 사용할 수 없습니다. ' +\n        '선택 가능한 Chip을 만들려면 \"clickable\"을 true로 설정하세요.'\n    );\n  }\n\n  if (props.onDelete === undefined && 'deleteIcon' in props) {\n    throw new Error(\n      '오류: \"onDelete\" 함수 없이 \"deleteIcon\"을 사용할 수 없습니다. ' +\n        '\"deleteIcon\"을 사용하려면 \"onDelete\" 함수를 함께 사용해야 합니다.'\n    );\n  }\n\n  if (!props.children) {\n    throw new Error(\n      '오류: Chip 컴포넌트에는 반드시 children이 있어야 합니다. '\n    );\n  }\n\n  if (!props.size) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 size가 있어야 합니다. ');\n  }\n\n  if (!props.variant) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');\n  }\n\n  const validSizes: ChipSize[] = ['small', 'medium'];\n  if (props.size && !validSizes.includes(props.size)) {\n    throw new Error(\n      `오류: 올바르지 않은 size 값입니다: \"${props.size}\". ` +\n        `유효한 size 값은 다음과 같습니다: ${validSizes.join(', ')}.`\n    );\n  }\n\n  const validVariants: ChipVariant[] = ['filled', 'outline', 'dashedLine'];\n  if (props.variant && !validVariants.includes(props.variant)) {\n    throw new Error(\n      `오류: 올바르지 않은 variant 값입니다: \"${props.variant}\". ` +\n        `유효한 variant 값은 다음과 같습니다: ${validVariants.join(', ')}.`\n    );\n  }\n  return true;\n}\n"],"names":["ensureValidChipProps","props","clickable","Error","onDelete","undefined","children","size","variant","validSizes","includes","concat","join","validVariants"],"mappings":"AAEO,SAASA,oBAAoBA,CAACC,KAAgB,EAAsB;EACzE,IAAIA,KAAK,CAACC,SAAS,KAAK,KAAK,IAAI,UAAU,IAAID,KAAK,EAAE;AACpD,IAAA,MAAM,IAAIE,KAAK,CACb,wDAAwD,GACtD,6CACJ,CAAC;AACH;EAEA,IAAIF,KAAK,CAACG,QAAQ,KAAKC,SAAS,IAAI,YAAY,IAAIJ,KAAK,EAAE;AACzD,IAAA,MAAM,IAAIE,KAAK,CACb,iDAAiD,GAC/C,iDACJ,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACK,QAAQ,EAAE;AACnB,IAAA,MAAM,IAAIH,KAAK,CACb,yCACF,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACM,IAAI,EAAE;AACf,IAAA,MAAM,IAAIJ,KAAK,CAAC,qCAAqC,CAAC;AACxD;AAEA,EAAA,IAAI,CAACF,KAAK,CAACO,OAAO,EAAE;AAClB,IAAA,MAAM,IAAIL,KAAK,CAAC,wCAAwC,CAAC;AAC3D;AAEA,EAAA,IAAMM,UAAsB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC;AAClD,EAAA,IAAIR,KAAK,CAACM,IAAI,IAAI,CAACE,UAAU,CAACC,QAAQ,CAACT,KAAK,CAACM,IAAI,CAAC,EAAE;AAClD,IAAA,MAAM,IAAIJ,KAAK,CACb,wFAAAQ,MAAA,CAA2BV,KAAK,CAACM,IAAI,iGAAAI,MAAA,CACVF,UAAU,CAACG,IAAI,CAAC,IAAI,CAAC,MAClD,CAAC;AACH;EAEA,IAAMC,aAA4B,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC;AACxE,EAAA,IAAIZ,KAAK,CAACO,OAAO,IAAI,CAACK,aAAa,CAACH,QAAQ,CAACT,KAAK,CAACO,OAAO,CAAC,EAAE;AAC3D,IAAA,MAAM,IAAIL,KAAK,CACb,2FAAAQ,MAAA,CAA8BV,KAAK,CAACO,OAAO,oGAAAG,MAAA,CACbE,aAAa,CAACD,IAAI,CAAC,IAAI,CAAC,MACxD,CAAC;AACH;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"typeGuard.esm.js","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"sourcesContent":["import { CHIP_SIZES } from './const';\nimport type { ChipProps, ChipVariant } from './types';\n\nexport function ensureValidChipProps(props: ChipProps): props is ChipProps {\n  if (props.clickable === false && 'selected' in props) {\n    throw new Error(\n      '오류: \"clickable\"이 false일 때는 \"selected\" 속성을 사용할 수 없습니다. ' +\n        '선택 가능한 Chip을 만들려면 \"clickable\"을 true로 설정하세요.'\n    );\n  }\n\n  if (props.onDelete === undefined && 'deleteIcon' in props) {\n    throw new Error(\n      '오류: \"onDelete\" 함수 없이 \"deleteIcon\"을 사용할 수 없습니다. ' +\n        '\"deleteIcon\"을 사용하려면 \"onDelete\" 함수를 함께 사용해야 합니다.'\n    );\n  }\n\n  if (!props.children) {\n    throw new Error(\n      '오류: Chip 컴포넌트에는 반드시 children이 있어야 합니다. '\n    );\n  }\n\n  if (!props.size) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 size가 있어야 합니다. ');\n  }\n\n  if (!props.variant) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');\n  }\n\n  if (props.size && !CHIP_SIZES.includes(props.size)) {\n    throw new Error(\n      `오류: 올바르지 않은 size 값입니다: \"${props.size}\". ` +\n        `유효한 size 값은 다음과 같습니다: ${CHIP_SIZES.join(', ')}.`\n    );\n  }\n\n  const validVariants: ChipVariant[] = ['filled', 'outline', 'dashedLine'];\n  if (props.variant && !validVariants.includes(props.variant)) {\n    throw new Error(\n      `오류: 올바르지 않은 variant 값입니다: \"${props.variant}\". ` +\n        `유효한 variant 값은 다음과 같습니다: ${validVariants.join(', ')}.`\n    );\n  }\n  return true;\n}\n"],"names":["ensureValidChipProps","props","clickable","Error","onDelete","undefined","children","size","variant","CHIP_SIZES","includes","concat","join","validVariants"],"mappings":";;AAGO,SAASA,oBAAoBA,CAACC,KAAgB,EAAsB;EACzE,IAAIA,KAAK,CAACC,SAAS,KAAK,KAAK,IAAI,UAAU,IAAID,KAAK,EAAE;AACpD,IAAA,MAAM,IAAIE,KAAK,CACb,wDAAwD,GACtD,6CACJ,CAAC;AACH;EAEA,IAAIF,KAAK,CAACG,QAAQ,KAAKC,SAAS,IAAI,YAAY,IAAIJ,KAAK,EAAE;AACzD,IAAA,MAAM,IAAIE,KAAK,CACb,iDAAiD,GAC/C,iDACJ,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACK,QAAQ,EAAE;AACnB,IAAA,MAAM,IAAIH,KAAK,CACb,yCACF,CAAC;AACH;AAEA,EAAA,IAAI,CAACF,KAAK,CAACM,IAAI,EAAE;AACf,IAAA,MAAM,IAAIJ,KAAK,CAAC,qCAAqC,CAAC;AACxD;AAEA,EAAA,IAAI,CAACF,KAAK,CAACO,OAAO,EAAE;AAClB,IAAA,MAAM,IAAIL,KAAK,CAAC,wCAAwC,CAAC;AAC3D;AAEA,EAAA,IAAIF,KAAK,CAACM,IAAI,IAAI,CAACE,UAAU,CAACC,QAAQ,CAACT,KAAK,CAACM,IAAI,CAAC,EAAE;AAClD,IAAA,MAAM,IAAIJ,KAAK,CACb,wFAAAQ,MAAA,CAA2BV,KAAK,CAACM,IAAI,iGAAAI,MAAA,CACVF,UAAU,CAACG,IAAI,CAAC,IAAI,CAAC,MAClD,CAAC;AACH;EAEA,IAAMC,aAA4B,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC;AACxE,EAAA,IAAIZ,KAAK,CAACO,OAAO,IAAI,CAACK,aAAa,CAACH,QAAQ,CAACT,KAAK,CAACO,OAAO,CAAC,EAAE;AAC3D,IAAA,MAAM,IAAIL,KAAK,CACb,2FAAAQ,MAAA,CAA8BV,KAAK,CAACO,OAAO,oGAAAG,MAAA,CACbE,aAAa,CAACD,IAAI,CAAC,IAAI,CAAC,MACxD,CAAC;AACH;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

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

@@ -1,6 +1,6 @@
 import type { TypographyStyle } from '@remember-web/mixin';
 import type { ComponentProps } from 'react';
-export type ChipSize = 'small' | 'medium';
+export type ChipSize = 'small' | 'medium' | 'large';
 export type ChipVariant = 'filled' | 'outline' | 'dashedLine';
 type ClickableProps = {
     clickable?: true;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAE9D,KAAK,cAAc,GACf;IACE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEN,KAAK,WAAW,GACZ;IACE,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,cAAc,GACd,WAAW,GACX,cAAc,CAAC,KAAK,CAAC,CAAC;AAGxB,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,OAAO,GACP,UAAU,GACV,UAAU,GACV,eAAe,CAAC;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,cAAc;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,eAAe,GAAG,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,eAAe,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAE9D,KAAK,cAAc,GACf;IACE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEN,KAAK,WAAW,GACZ;IACE,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,cAAc,GACd,WAAW,GACX,cAAc,CAAC,KAAK,CAAC,CAAC;AAGxB,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,OAAO,GACP,UAAU,GACV,UAAU,GACV,eAAe,CAAC;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,cAAc;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,eAAe,GAAG,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,eAAe,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/src/Floating/Tooltip/index.cjs.js

@@ -36,7 +36,7 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
 
-var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "onOpenChange", "onClickOutside"];
+var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "avoidCollisions", "onOpenChange", "onClickOutside"];
 var hoverable = shared.isSSR() ? true : window.matchMedia('(any-hover: hover)').matches;
 function Tooltip(_ref) {
   var children = _ref.children,
@@ -47,6 +47,8 @@ function Tooltip(_ref) {
     side = _ref$side === void 0 ? 'top' : _ref$side,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 4 : _ref$gap,
+    _ref$avoidCollisions = _ref.avoidCollisions,
+    avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions,
     onOpenChange = _ref.onOpenChange,
     onClickOutside = _ref.onClickOutside,
     props = _objectWithoutProperties__default.default(_ref, _excluded);
@@ -113,6 +115,7 @@ function Tooltip(_ref) {
               }
               onClickOutside === null || onClickOutside === void 0 || onClickOutside(e);
             },
+            avoidCollisions: avoidCollisions,
             collisionPadding: 20,
             onClick: function onClick(e) {
               _onClick === null || _onClick === void 0 || _onClick(e);

package/dist/src/Floating/Tooltip/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n  type TooltipProps,\n  type TooltipSize,\n  type TooltipType,\n  isLargeSizeProps,\n  isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n  ? true\n  : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n  Type extends TooltipType = 'hover',\n  Size extends TooltipSize = 'small',\n>({\n  children,\n  content,\n  contentOptions,\n  defaultOpen,\n  side = 'top',\n  gap = 4,\n  onOpenChange,\n  onClickOutside,\n  ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n  const [_open, _setOpen] = useState(defaultOpen ?? false);\n  const { type = 'hover', size = 'small' } = props;\n  const {\n    backgroundColor = contents000,\n    contentColor = contents999,\n    maxWidth = 'initial',\n    textAlign = 'center',\n    onClick,\n    zIndex = 0,\n  } = contentOptions ?? {};\n  /**\n   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n   *\n   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n  const isHoverType = hoverable && type === 'hover';\n  const isClickType = !hoverable || type === 'click';\n  const isCloseButtonType = type === 'closeButton';\n  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n  const isClickTrigger = isClickType || isCloseButtonType;\n  const isOpen = isStaticTypeProps(props)\n    ? props.open\n    : isHoverType\n      ? undefined\n      : _open;\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        delayDuration={100}\n        onOpenChange={onOpenChange}\n      >\n        <RadixTooltip.Trigger\n          asChild\n          onClick={\n            isClickTrigger\n              ? () => _setOpen(isClickType ? (prev) => !prev : true)\n              : undefined\n          }\n        >\n          <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n        </RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <TooltipContentWrapper $zIndex={zIndex}>\n            <TooltipContent\n              $size={size}\n              $maxWidth={maxWidth}\n              $backgroundColor={backgroundColor}\n              $contentColor={contentColor}\n              $textAlign={textAlign}\n              sideOffset={gap}\n              side={side}\n              onPointerDownOutside={(e) => {\n                if (isClickType) {\n                  _setOpen(false);\n                }\n                onClickOutside?.(e);\n              }}\n              collisionPadding={20}\n              onClick={(e) => {\n                if (isClickType) {\n                  () => _setOpen(false);\n                }\n                onClick?.(e);\n              }}\n            >\n              {content}\n              {type === 'closeButton' && (\n                <CloseButton onClick={() => _setOpen(false)}>\n                  <IconCloseS />\n                </CloseButton>\n              )}\n              {isLargeSizeProps(props) && props.hasArrow && (\n                <Arrow\n                  width={14}\n                  height={8}\n                  color={backgroundColor}\n                />\n              )}\n            </TooltipContent>\n          </TooltipContentWrapper>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAiBb;AAIe;AAaiC;;;;;AAL9CA;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n  type TooltipProps,\n  type TooltipSize,\n  type TooltipType,\n  isLargeSizeProps,\n  isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n  ? true\n  : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n  Type extends TooltipType = 'hover',\n  Size extends TooltipSize = 'small',\n>({\n  children,\n  content,\n  contentOptions,\n  defaultOpen,\n  side = 'top',\n  gap = 4,\n  avoidCollisions = true,\n  onOpenChange,\n  onClickOutside,\n  ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n  const [_open, _setOpen] = useState(defaultOpen ?? false);\n  const { type = 'hover', size = 'small' } = props;\n  const {\n    backgroundColor = contents000,\n    contentColor = contents999,\n    maxWidth = 'initial',\n    textAlign = 'center',\n    onClick,\n    zIndex = 0,\n  } = contentOptions ?? {};\n  /**\n   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n   *\n   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n  const isHoverType = hoverable && type === 'hover';\n  const isClickType = !hoverable || type === 'click';\n  const isCloseButtonType = type === 'closeButton';\n  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n  const isClickTrigger = isClickType || isCloseButtonType;\n  const isOpen = isStaticTypeProps(props)\n    ? props.open\n    : isHoverType\n      ? undefined\n      : _open;\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        delayDuration={100}\n        onOpenChange={onOpenChange}\n      >\n        <RadixTooltip.Trigger\n          asChild\n          onClick={\n            isClickTrigger\n              ? () => _setOpen(isClickType ? (prev) => !prev : true)\n              : undefined\n          }\n        >\n          <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n        </RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <TooltipContentWrapper $zIndex={zIndex}>\n            <TooltipContent\n              $size={size}\n              $maxWidth={maxWidth}\n              $backgroundColor={backgroundColor}\n              $contentColor={contentColor}\n              $textAlign={textAlign}\n              sideOffset={gap}\n              side={side}\n              onPointerDownOutside={(e) => {\n                if (isClickType) {\n                  _setOpen(false);\n                }\n                onClickOutside?.(e);\n              }}\n              avoidCollisions={avoidCollisions}\n              collisionPadding={20}\n              onClick={(e) => {\n                if (isClickType) {\n                  () => _setOpen(false);\n                }\n                onClick?.(e);\n              }}\n            >\n              {content}\n              {type === 'closeButton' && (\n                <CloseButton onClick={() => _setOpen(false)}>\n                  <IconCloseS />\n                </CloseButton>\n              )}\n              {isLargeSizeProps(props) && props.hasArrow && (\n                <Arrow\n                  width={14}\n                  height={8}\n                  color={backgroundColor}\n                />\n              )}\n            </TooltipContent>\n          </TooltipContentWrapper>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"],"names":["side","gap","avoidCollisions","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAiBb;AAIe;AAciC;;;;;AAN9CA;;AACAC;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAxB;AACAyB;AACE;;AAEA;AACAC;;AAEFxB;AACAyB;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}

package/dist/src/Floating/Tooltip/index.d.ts

@@ -1,4 +1,4 @@
 import { type PropsWithChildren } from 'react';
 import { type TooltipProps, type TooltipSize, type TooltipType } from './types';
-export default function Tooltip<Type extends TooltipType = 'hover', Size extends TooltipSize = 'small'>({ children, content, contentOptions, defaultOpen, side, gap, onOpenChange, onClickOutside, ...props }: PropsWithChildren<TooltipProps<Type, Size>>): import("react/jsx-runtime").JSX.Element;
+export default function Tooltip<Type extends TooltipType = 'hover', Size extends TooltipSize = 'small'>({ children, content, contentOptions, defaultOpen, side, gap, avoidCollisions, onOpenChange, onClickOutside, ...props }: PropsWithChildren<TooltipProps<Type, Size>>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/Floating/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAMjB,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,EACA,QAAQ,EACR,OAAO,EACP,cAAc,EACd,WAAW,EACX,IAAY,EACZ,GAAO,EACP,YAAY,EACZ,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,2CAuF7C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAMjB,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,EACA,QAAQ,EACR,OAAO,EACP,cAAc,EACd,WAAW,EACX,IAAY,EACZ,GAAO,EACP,eAAsB,EACtB,YAAY,EACZ,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,2CAwF7C"}

package/dist/src/Floating/Tooltip/index.esm.js

@@ -10,7 +10,7 @@ import { TooltipTriggerWrapper, TooltipContentWrapper, TooltipContent, CloseButt
 import { isStaticTypeProps, isLargeSizeProps } from './types.esm.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "onOpenChange", "onClickOutside"];
+var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "avoidCollisions", "onOpenChange", "onClickOutside"];
 var hoverable = isSSR() ? true : window.matchMedia('(any-hover: hover)').matches;
 function Tooltip(_ref) {
   var children = _ref.children,
@@ -21,6 +21,8 @@ function Tooltip(_ref) {
     side = _ref$side === void 0 ? 'top' : _ref$side,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 4 : _ref$gap,
+    _ref$avoidCollisions = _ref.avoidCollisions,
+    avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions,
     onOpenChange = _ref.onOpenChange,
     onClickOutside = _ref.onClickOutside,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -87,6 +89,7 @@ function Tooltip(_ref) {
               }
               onClickOutside === null || onClickOutside === void 0 || onClickOutside(e);
             },
+            avoidCollisions: avoidCollisions,
             collisionPadding: 20,
             onClick: function onClick(e) {
               _onClick === null || _onClick === void 0 || _onClick(e);

package/dist/src/Floating/Tooltip/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n  type TooltipProps,\n  type TooltipSize,\n  type TooltipType,\n  isLargeSizeProps,\n  isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n  ? true\n  : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n  Type extends TooltipType = 'hover',\n  Size extends TooltipSize = 'small',\n>({\n  children,\n  content,\n  contentOptions,\n  defaultOpen,\n  side = 'top',\n  gap = 4,\n  onOpenChange,\n  onClickOutside,\n  ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n  const [_open, _setOpen] = useState(defaultOpen ?? false);\n  const { type = 'hover', size = 'small' } = props;\n  const {\n    backgroundColor = contents000,\n    contentColor = contents999,\n    maxWidth = 'initial',\n    textAlign = 'center',\n    onClick,\n    zIndex = 0,\n  } = contentOptions ?? {};\n  /**\n   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n   *\n   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n  const isHoverType = hoverable && type === 'hover';\n  const isClickType = !hoverable || type === 'click';\n  const isCloseButtonType = type === 'closeButton';\n  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n  const isClickTrigger = isClickType || isCloseButtonType;\n  const isOpen = isStaticTypeProps(props)\n    ? props.open\n    : isHoverType\n      ? undefined\n      : _open;\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        delayDuration={100}\n        onOpenChange={onOpenChange}\n      >\n        <RadixTooltip.Trigger\n          asChild\n          onClick={\n            isClickTrigger\n              ? () => _setOpen(isClickType ? (prev) => !prev : true)\n              : undefined\n          }\n        >\n          <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n        </RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <TooltipContentWrapper $zIndex={zIndex}>\n            <TooltipContent\n              $size={size}\n              $maxWidth={maxWidth}\n              $backgroundColor={backgroundColor}\n              $contentColor={contentColor}\n              $textAlign={textAlign}\n              sideOffset={gap}\n              side={side}\n              onPointerDownOutside={(e) => {\n                if (isClickType) {\n                  _setOpen(false);\n                }\n                onClickOutside?.(e);\n              }}\n              collisionPadding={20}\n              onClick={(e) => {\n                if (isClickType) {\n                  () => _setOpen(false);\n                }\n                onClick?.(e);\n              }}\n            >\n              {content}\n              {type === 'closeButton' && (\n                <CloseButton onClick={() => _setOpen(false)}>\n                  <IconCloseS />\n                </CloseButton>\n              )}\n              {isLargeSizeProps(props) && props.hasArrow && (\n                <Arrow\n                  width={14}\n                  height={8}\n                  color={backgroundColor}\n                />\n              )}\n            </TooltipContent>\n          </TooltipContentWrapper>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAiBb;AAIe;AAaiC;;;;;AAL9CA;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n  type TooltipProps,\n  type TooltipSize,\n  type TooltipType,\n  isLargeSizeProps,\n  isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n  ? true\n  : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n  Type extends TooltipType = 'hover',\n  Size extends TooltipSize = 'small',\n>({\n  children,\n  content,\n  contentOptions,\n  defaultOpen,\n  side = 'top',\n  gap = 4,\n  avoidCollisions = true,\n  onOpenChange,\n  onClickOutside,\n  ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n  const [_open, _setOpen] = useState(defaultOpen ?? false);\n  const { type = 'hover', size = 'small' } = props;\n  const {\n    backgroundColor = contents000,\n    contentColor = contents999,\n    maxWidth = 'initial',\n    textAlign = 'center',\n    onClick,\n    zIndex = 0,\n  } = contentOptions ?? {};\n  /**\n   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n   *\n   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n  const isHoverType = hoverable && type === 'hover';\n  const isClickType = !hoverable || type === 'click';\n  const isCloseButtonType = type === 'closeButton';\n  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n  const isClickTrigger = isClickType || isCloseButtonType;\n  const isOpen = isStaticTypeProps(props)\n    ? props.open\n    : isHoverType\n      ? undefined\n      : _open;\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        delayDuration={100}\n        onOpenChange={onOpenChange}\n      >\n        <RadixTooltip.Trigger\n          asChild\n          onClick={\n            isClickTrigger\n              ? () => _setOpen(isClickType ? (prev) => !prev : true)\n              : undefined\n          }\n        >\n          <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n        </RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <TooltipContentWrapper $zIndex={zIndex}>\n            <TooltipContent\n              $size={size}\n              $maxWidth={maxWidth}\n              $backgroundColor={backgroundColor}\n              $contentColor={contentColor}\n              $textAlign={textAlign}\n              sideOffset={gap}\n              side={side}\n              onPointerDownOutside={(e) => {\n                if (isClickType) {\n                  _setOpen(false);\n                }\n                onClickOutside?.(e);\n              }}\n              avoidCollisions={avoidCollisions}\n              collisionPadding={20}\n              onClick={(e) => {\n                if (isClickType) {\n                  () => _setOpen(false);\n                }\n                onClick?.(e);\n              }}\n            >\n              {content}\n              {type === 'closeButton' && (\n                <CloseButton onClick={() => _setOpen(false)}>\n                  <IconCloseS />\n                </CloseButton>\n              )}\n              {isLargeSizeProps(props) && props.hasArrow && (\n                <Arrow\n                  width={14}\n                  height={8}\n                  color={backgroundColor}\n                />\n              )}\n            </TooltipContent>\n          </TooltipContentWrapper>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"],"names":["side","gap","avoidCollisions","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAiBb;AAIe;AAciC;;;;;AAN9CA;;AACAC;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAxB;AACAyB;AACE;;AAEA;AACAC;;AAEFxB;AACAyB;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}

package/dist/src/Floating/Tooltip/types.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n  DismissableLayerProps,\n  PopperContentProps,\n  TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n  content: ReactNode;\n  defaultOpen?: boolean;\n  gap?: 4 | 8 | (number & {});\n  side?: PopperContentProps['side'];\n  type?: Type;\n  size?: Size;\n  contentOptions?: TooltipContentOptionProps;\n  onOpenChange?: RadixTooltipProps['onOpenChange'];\n  onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n  (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n  props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n  'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n  props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n  'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n  maxWidth?: number | string;\n  backgroundColor?: string;\n  contentColor?: string;\n  zIndex?: number;\n  textAlign?: TooltipTextAlign;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":";;IAwBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;;"}
+{"version":3,"file":"types.cjs.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n  DismissableLayerProps,\n  PopperContentProps,\n  TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n  content: ReactNode;\n  defaultOpen?: boolean;\n  gap?: 4 | 8 | (number & {});\n  side?: PopperContentProps['side'];\n  avoidCollisions?: PopperContentProps['avoidCollisions'];\n  type?: Type;\n  size?: Size;\n  contentOptions?: TooltipContentOptionProps;\n  onOpenChange?: RadixTooltipProps['onOpenChange'];\n  onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n  (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n  props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n  'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n  props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n  'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n  maxWidth?: number | string;\n  backgroundColor?: string;\n  contentColor?: string;\n  zIndex?: number;\n  textAlign?: TooltipTextAlign;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":";;IAyBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;;"}

package/dist/src/Floating/Tooltip/types.d.ts

@@ -8,6 +8,7 @@ export type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {
     defaultOpen?: boolean;
     gap?: 4 | 8 | (number & {});
     side?: PopperContentProps['side'];
+    avoidCollisions?: PopperContentProps['avoidCollisions'];
     type?: Type;
     size?: Size;
     contentOptions?: TooltipContentOptionProps;

package/dist/src/Floating/Tooltip/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,IAAI,iBAAiB,EAClC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS,WAAW,EAAE,IAAI,SAAS,WAAW,IAAI;IAC7E,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CAChE,GAAG,CAAC,IAAI,SAAS,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GACxE,CAAC,IAAI,SAAS,OAAO,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,EAAE,CAAC,CAAC;AAEvD,eAAO,MAAM,iBAAiB,UACrB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,yCAED,CAAC;AAE7C,eAAO,MAAM,gBAAgB,UACpB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,wCAEF,CAAC;AAE5C,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,IAAI,iBAAiB,EAClC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS,WAAW,EAAE,IAAI,SAAS,WAAW,IAAI;IAC7E,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,eAAe,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CAChE,GAAG,CAAC,IAAI,SAAS,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GACxE,CAAC,IAAI,SAAS,OAAO,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,EAAE,CAAC,CAAC;AAEvD,eAAO,MAAM,iBAAiB,UACrB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,yCAED,CAAC;AAE7C,eAAO,MAAM,gBAAgB,UACpB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,wCAEF,CAAC;AAE5C,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC"}

package/dist/src/Floating/Tooltip/types.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.esm.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n  DismissableLayerProps,\n  PopperContentProps,\n  TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n  content: ReactNode;\n  defaultOpen?: boolean;\n  gap?: 4 | 8 | (number & {});\n  side?: PopperContentProps['side'];\n  type?: Type;\n  size?: Size;\n  contentOptions?: TooltipContentOptionProps;\n  onOpenChange?: RadixTooltipProps['onOpenChange'];\n  onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n  (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n  props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n  'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n  props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n  'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n  maxWidth?: number | string;\n  backgroundColor?: string;\n  contentColor?: string;\n  zIndex?: number;\n  textAlign?: TooltipTextAlign;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":"IAwBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;"}
+{"version":3,"file":"types.esm.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n  DismissableLayerProps,\n  PopperContentProps,\n  TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n  content: ReactNode;\n  defaultOpen?: boolean;\n  gap?: 4 | 8 | (number & {});\n  side?: PopperContentProps['side'];\n  avoidCollisions?: PopperContentProps['avoidCollisions'];\n  type?: Type;\n  size?: Size;\n  contentOptions?: TooltipContentOptionProps;\n  onOpenChange?: RadixTooltipProps['onOpenChange'];\n  onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n  (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n  props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n  'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n  props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n  'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n  maxWidth?: number | string;\n  backgroundColor?: string;\n  contentColor?: string;\n  zIndex?: number;\n  textAlign?: TooltipTextAlign;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":"IAyBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO;AAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",

package/src/Chips/Chip/Chip.stories.tsx

@@ -1,10 +1,6 @@
-import {
-  getIconComponentFromName,
-  iconNames,
-  isIconName,
-} from '@/stories/util';
+import { IconArrow2LeftS } from '@remember-web/icon';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Fragment, createElement } from 'react';
+import { createElement, Fragment } from 'react';
 
 import { Typography } from '@/Common';
 import {
@@ -15,8 +11,13 @@ import {
   TableHeader,
   TableRow,
 } from '@/stories/common.styles';
-import { IconArrow2LeftS } from '@remember-web/icon';
+import {
+  getIconComponentFromName,
+  iconNames,
+  isIconName,
+} from '@/stories/util';
 import { Chip } from './';
+import { CHIP_SIZES, CHIP_STATES, CHIP_VARIANTS } from './const';
 import type { ChipSize } from './types';
 
 type Story = StoryObj<typeof Chip>;
@@ -27,9 +28,9 @@ const meta = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['filled', 'outline', 'dashedLine'],
+      options: CHIP_VARIANTS,
     },
-    size: { control: 'select', options: ['small', 'medium'] },
+    size: { control: 'select', options: CHIP_SIZES },
     children: { control: 'text' },
     disabled: { control: 'boolean' },
     selected: { control: 'boolean' },
@@ -80,10 +81,6 @@ export const Default: Story = {
   },
 };
 
-const variants = ['filled', 'outline', 'dashedLine'] as const;
-const sizes = ['medium', 'small'] as const;
-const states = ['default', 'hover', 'disabled', 'selected'] as const;
-
 export const Overview: Story = {
   render: () => (
     <Paper $minWidth={800} $maxWidth={1200}>
@@ -94,7 +91,7 @@ export const Overview: Story = {
           <TableRow>
             <TableColumn isHeader>State</TableColumn>
             <TableColumn isHeader>Size</TableColumn>
-            {variants.map((variant) => (
+            {CHIP_VARIANTS.map((variant) => (
               <TableColumn key={variant} isHeader align="center">
                 {variant.charAt(0).toUpperCase() + variant.slice(1)}
               </TableColumn>
@@ -102,19 +99,19 @@ export const Overview: Story = {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {states.map((state) => (
+          {CHIP_STATES.map((state) => (
             <Fragment key={state}>
-              {sizes.map((size: ChipSize, index: number) => (
+              {CHIP_SIZES.map((size: ChipSize, index: number) => (
                 <TableRow key={`${state}-${size}`}>
                   {index === 0 && (
-                    <TableColumn rowSpan={2}>
+                    <TableColumn rowSpan={CHIP_SIZES.length}>
                       {state.charAt(0).toUpperCase() + state.slice(1)}
                     </TableColumn>
                   )}
                   <TableColumn>
                     {size.charAt(0).toUpperCase() + size.slice(1)}
                   </TableColumn>
-                  {variants.map((variant) => (
+                  {CHIP_VARIANTS.map((variant) => (
                     <TableColumn key={variant} align="center">
                       <Chip
                         size={size}

package/src/Chips/Chip/const.ts

@@ -10,34 +10,67 @@ import {
   contents999,
   primary100,
 } from '@remember-web/mixin';
-import type { ChipSize, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';
+import type {
+  ChipSize,
+  ChipSizeStyle,
+  ChipState,
+  ChipVariant,
+  ChipVariantStyleMap,
+} from './types';
 
-
-
-const SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
+const SMALL_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
   typography: 'Caption1',
   padding: '6px 10px',
   height: '28px',
 };
 
-const SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
+const SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
   typography: 'Caption1',
   padding: '7px 11px',
   height: '28px',
 };
 
-const MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
+const MEDIUM_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
   typography: 'UIBody3',
   padding: '5px 12px',
   height: '30px',
 };
 
-const MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
+const MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
   typography: 'UIBody3',
   padding: '6px 14px',
   height: '30px',
 };
 
+const LARGE_WITH_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
+  typography: 'UIBody2',
+  padding: '6px 12px',
+  height: '34px',
+};
+
+const LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE: ChipSizeStyle = {
+  typography: 'UIBody2',
+  padding: '7px 13px',
+  height: '34px',
+};
+
+export const CHIP_SIZES = [
+  'small',
+  'medium',
+  'large',
+] as const satisfies readonly ChipSize[];
+export const CHIP_VARIANTS = [
+  'filled',
+  'outline',
+  'dashedLine',
+] as const satisfies readonly ChipVariant[];
+export const CHIP_STATES = [
+  'default',
+  'hover',
+  'disabled',
+  'selected',
+] as const satisfies readonly ChipState[];
+
 export const CHIP_SIZE_STYLE = {
   small: {
     filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
@@ -49,6 +82,11 @@ export const CHIP_SIZE_STYLE = {
     outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
     dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
   },
+  large: {
+    filled: LARGE_WITHOUT_BORDER_CHIP_SIZE_STYE,
+    outline: LARGE_WITH_BORDER_CHIP_SIZE_STYE,
+    dashedLine: LARGE_WITH_BORDER_CHIP_SIZE_STYE,
+  },
 } as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;
 
 export const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {

package/src/Chips/Chip/styles.ts

@@ -23,8 +23,12 @@ const getVariantStyles = (props: Partial<ChipStyleProps>) => {
         ${getStateStyle($selected ? 'selectedHover' : 'hover')}
       }
 
-      ${$selected ? '&' : '&:active'}:not([data-chip-disabled="true"]) {
-        ${getStateStyle('selected')} 
+      ${
+        $selected &&
+        css`
+        &:not([data-chip-disabled="true"]) {
+          ${getStateStyle('selected')} 
+        }`
       }
       `
     }

package/src/Chips/Chip/typeGuard.ts

@@ -1,4 +1,5 @@
-import type { ChipProps, ChipSize, ChipVariant } from './types';
+import { CHIP_SIZES } from './const';
+import type { ChipProps, ChipVariant } from './types';
 
 export function ensureValidChipProps(props: ChipProps): props is ChipProps {
   if (props.clickable === false && 'selected' in props) {
@@ -29,11 +30,10 @@ export function ensureValidChipProps(props: ChipProps): props is ChipProps {
     throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');
   }
 
-  const validSizes: ChipSize[] = ['small', 'medium'];
-  if (props.size && !validSizes.includes(props.size)) {
+  if (props.size && !CHIP_SIZES.includes(props.size)) {
     throw new Error(
       `오류: 올바르지 않은 size 값입니다: "${props.size}". ` +
-        `유효한 size 값은 다음과 같습니다: ${validSizes.join(', ')}.`
+        `유효한 size 값은 다음과 같습니다: ${CHIP_SIZES.join(', ')}.`
     );
   }
 

package/src/Chips/Chip/types.ts

@@ -2,7 +2,7 @@ import type { TypographyStyle } from '@remember-web/mixin';
 import type { ComponentProps } from 'react';
 
 // Props types -------------------------------------------------------
-export type ChipSize = 'small' | 'medium';
+export type ChipSize = 'small' | 'medium' | 'large';
 
 export type ChipVariant = 'filled' | 'outline' | 'dashedLine';
 

package/src/Floating/Tooltip/Tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import { IconAlarm } from '@remember-web/icon';
+import { IconAlarmM } from '@remember-web/icon';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '@/Buttons';
@@ -28,6 +28,10 @@ const meta = {
       defaultValue: false,
       type: 'boolean',
     },
+    avoidCollisions: {
+      defaultValue: true,
+      type: 'boolean',
+    },
   },
 } satisfies Meta<typeof Tooltip>;
 
@@ -47,7 +51,7 @@ export const Default: Story = {
   render: ({ ...props }) => (
     <Flex gap={24}>
       <Tooltip {...props}>
-        <IconAlarm size={24} />
+        <IconAlarmM />
       </Tooltip>
       <Tooltip {...props}>
         <Button>버튼</Button>

package/src/Floating/Tooltip/index.tsx

@@ -29,6 +29,7 @@ export default function Tooltip<
   defaultOpen,
   side = 'top',
   gap = 4,
+  avoidCollisions = true,
   onOpenChange,
   onClickOutside,
   ...props
@@ -92,6 +93,7 @@ export default function Tooltip<
                 }
                 onClickOutside?.(e);
               }}
+              avoidCollisions={avoidCollisions}
               collisionPadding={20}
               onClick={(e) => {
                 if (isClickType) {

package/src/Floating/Tooltip/types.ts

@@ -14,6 +14,7 @@ export type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {
   defaultOpen?: boolean;
   gap?: 4 | 8 | (number & {});
   side?: PopperContentProps['side'];
+  avoidCollisions?: PopperContentProps['avoidCollisions'];
   type?: Type;
   size?: Size;
   contentOptions?: TooltipContentOptionProps;