@remember-web/primitive 0.3.1 → 0.3.3

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

@@ -2,16 +2,36 @@
 
 var mixin = require('@remember-web/mixin');
 
+var SMALL_WITH_BORDER_CHIP_SIZE_STYE = {
+  typography: 'Caption1',
+  padding: '6px 10px',
+  height: '28px'
+};
+var SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE = {
+  typography: 'Caption1',
+  padding: '7px 11px',
+  height: '28px'
+};
+var MEDIUM_WITH_BORDER_CHIP_SIZE_STYE = {
+  typography: 'UIBody3',
+  padding: '5px 12px',
+  height: '30px'
+};
+var MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE = {
+  typography: 'UIBody3',
+  padding: '6px 14px',
+  height: '30px'
+};
 var CHIP_SIZE_STYLE = {
   small: {
-    typography: 'Caption1',
-    padding: '6px 10px',
-    height: '28px'
+    filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
+    outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,
+    dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE
   },
   medium: {
-    typography: 'UIBody3',
-    padding: '5px 12px',
-    height: '30px'
+    filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
+    outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
+    dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE
   }
 };
 var CHIP_VARIANT_STYLE = {

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

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

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

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

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,EAAyB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE1E,eAAO,MAAM,eAAe;;;;;;;;;;;CAWkB,CAAC;AAE/C,eAAO,MAAM,kBAAkB,EAAE,mBA6GgB,CAAC"}
+{"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"}

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

@@ -1,15 +1,35 @@
 import { bg200, contents150, contents200, contents100, bg300, contents300, primary100, contents999, bg100, contents000 } from '@remember-web/mixin';
 
+var SMALL_WITH_BORDER_CHIP_SIZE_STYE = {
+  typography: 'Caption1',
+  padding: '6px 10px',
+  height: '28px'
+};
+var SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE = {
+  typography: 'Caption1',
+  padding: '7px 11px',
+  height: '28px'
+};
+var MEDIUM_WITH_BORDER_CHIP_SIZE_STYE = {
+  typography: 'UIBody3',
+  padding: '5px 12px',
+  height: '30px'
+};
+var MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE = {
+  typography: 'UIBody3',
+  padding: '6px 14px',
+  height: '30px'
+};
 var CHIP_SIZE_STYLE = {
   small: {
-    typography: 'Caption1',
-    padding: '6px 10px',
-    height: '28px'
+    filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
+    outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,
+    dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE
   },
   medium: {
-    typography: 'UIBody3',
-    padding: '5px 12px',
-    height: '30px'
+    filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
+    outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
+    dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE
   }
 };
 var CHIP_VARIANT_STYLE = {

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n  const { $variant = 'filled', $selected, $clickable } = props;\n  const getStateStyle = (state: ChipState) => css`\n    background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n    color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n    border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n    --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n    --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n  `;\n\n  return css`\n    ${getStateStyle('default')};\n\n    ${\n      $clickable &&\n      css`\n      &:hover:not([data-chip-disabled='true']) {\n        ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n      }\n\n      ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n        ${getStateStyle('selected')} \n      }\n      `\n    }\n    \n    &[data-chip-disabled='true'] {\n      ${getStateStyle('disabled')}\n      cursor: not-allowed;\n    }\n\n    & svg {\n      color: var(--left-icon-color);\n    }\n\n    .delete-button svg {\n      color: var(--delete-button-color);\n    }\n  `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n  ${({ $size, $variant, $clickable = false, ...props }) => css`\n    box-sizing: border-box;\n    user-select: none;\n    cursor: ${$clickable ? 'pointer' : 'default'};\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    gap: 4px;\n\n    width: fit-content;\n    border-radius: 50px;\n    text-align: left;\n    transition: all 0.2s ease-in;\n    height: auto; \n    padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n    ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n    \n    ${getVariantStyles({ $variant, $clickable, ...props })}\n  `}\n`;\n\nexport const ButtonWrapper = styled.button`\n  all: unset;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":";;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAA8B,EAAK;AAC3D,EAAA,IAAAC,eAAA,GAAuDD,KAAK,CAApDE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,eAAA;IAAEE,SAAS,GAAiBH,KAAK,CAA/BG,SAAS;IAAEC,UAAU,GAAKJ,KAAK,CAApBI,UAAU,CAAA;AAClD,EAAA,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAgB,EAAA;IAAA,OAAKC,UAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CACzBC,CAAAA,0BAAAA,EAAAA,gBAAAA,EAAAA,iBAAAA,EAAAA,4BAAAA,EAAAA,gCAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACK,eAAe,EAC9DD,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACM,KAAK,EACxCF,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACO,MAAM,IAAI,MAAM,EACzCH,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACQ,aAAa,EAC7CJ,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACS,iBAAiB,CAAA,CAAA;GAC/E,CAAA;EAED,OAAOR,UAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,uCAAA,sQACNJ,aAAa,CAAC,SAAS,CAAC,EAGxBD,UAAU,IACVG,UAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,uCAAA,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,CAAA;AAYjC,CAAC,CAAA;AAEYa,IAAAA,UAAU,GAAGC,uBAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAZ,uCAAA,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,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;AAAKxB,IAAAA,KAAK,GAAAyB,yCAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAAA,EAAA,OAAOnB,UAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAlB,uCAAA,CAGhDL,CAAAA,qEAAAA,EAAAA,8QAAAA,EAAAA,WAAAA,EAAAA,cAAAA,EAAAA,MAAAA,CAAAA,CAAAA,CAAAA,EAAAA,UAAU,GAAG,SAAS,GAAG,SAAS,EAajCwB,sBAAe,CAACL,KAAK,CAAC,CAACM,OAAO,EAEvCC,yBAAmB,CAACF,sBAAe,CAACL,KAAK,CAAC,CAACQ,UAAU,CAAC,EAEtDhC,gBAAgB,CAAAiC,aAAA,CAAA;AAAG9B,IAAAA,QAAQ,EAARA,QAAQ;AAAEE,IAAAA,UAAU,EAAVA,UAAAA;GAAeJ,EAAAA,KAAK,CAAE,CAAC,CAAA,CAAA;AAAA,CACvD,EACF;AAEYiC,IAAAA,aAAa,GAAGd,uBAAM,CAACe,MAAM,CAAAC,gBAAA,KAAAA,gBAAA,GAAA1B,uCAAA,CAMvC,CAAA,+GAAA,CAAA,CAAA,CAAA;;;;;"}
+{"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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"}

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

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

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

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

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

@@ -1,3 +1,4 @@
+import type { TypographyStyle } from '@remember-web/mixin';
 import type { ComponentProps } from 'react';
 export type ChipSize = 'small' | 'medium';
 export type ChipVariant = 'filled' | 'outline' | 'dashedLine';
@@ -39,5 +40,10 @@ interface ChipStateStyle {
 }
 type ChipStateStyles = Record<ChipState, ChipStateStyle>;
 export type ChipVariantStyleMap = Record<ChipVariant, ChipStateStyles>;
+export interface ChipSizeStyle {
+    typography: TypographyStyle;
+    padding: string;
+    height: string;
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

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,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"}
+{"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"}

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

@@ -122,7 +122,7 @@ function Tooltip(_ref) {
                 return _setOpen(false);
               },
               children: /*#__PURE__*/jsxRuntime.jsx(icon.IconCloseS, {})
-            }), types.isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsxRuntime.jsx(RadixTooltip__namespace.Arrow, {
+            }), types.isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsxRuntime.jsx(styles.Arrow, {
               width: 14,
               height: 8,
               color: backgroundColor

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 { 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                <RadixTooltip.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  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;;"}

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

@@ -6,7 +6,7 @@ import { IconCloseS } from '@remember-web/icon';
 import { contents000, contents999 } from '@remember-web/mixin';
 import { isSSR } from '@remember-web/shared';
 import { useState } from 'react';
-import { TooltipTriggerWrapper, TooltipContentWrapper, TooltipContent, CloseButton } from './styles.esm.js';
+import { TooltipTriggerWrapper, TooltipContentWrapper, TooltipContent, CloseButton, Arrow } from './styles.esm.js';
 import { isStaticTypeProps, isLargeSizeProps } from './types.esm.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -96,7 +96,7 @@ function Tooltip(_ref) {
                 return _setOpen(false);
               },
               children: /*#__PURE__*/jsx(IconCloseS, {})
-            }), isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsx(RadixTooltip.Arrow, {
+            }), isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsx(Arrow, {
               width: 14,
               height: 8,
               color: backgroundColor

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 { 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                <RadixTooltip.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  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;;"}

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

@@ -30,7 +30,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
 var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var TOOLTIP_CONTENT_CONSTANTS = {
   large: {
     padding: '8px 12px',
@@ -56,7 +56,12 @@ var TooltipContent = styled__default.default(RadixTooltip__namespace.Content)(_t
   return [styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n      padding: ", ";\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n    "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, mixin.getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
 });
 var CloseButton = styled__default.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
+var Arrow = styled__default.default(RadixTooltip__namespace.Arrow)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  fill: ", ";\n"])), function (_ref3) {
+  var color = _ref3.color;
+  return color;
+});
 
+exports.Arrow = Arrow;
 exports.CloseButton = CloseButton;
 exports.TooltipContent = TooltipContent;
 exports.TooltipContentWrapper = TooltipContentWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'UIBody2',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'UIBody3',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContentWrapper = styled.div<{\n  $zIndex?: CSSProperties['zIndex'];\n}>`\n  [data-radix-popper-content-wrapper]{\n    ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n  ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC;;;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'UIBody2',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'UIBody3',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContentWrapper = styled.div<{\n  $zIndex?: CSSProperties['zIndex'];\n}>`\n  [data-radix-popper-content-wrapper]{\n    ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n  ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const Arrow = styled(RadixTooltip.Arrow)`\n  fill: ${({color}) => color};\n`"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC;;AAUH;AAAO;AAAW;;;;;;"}

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

@@ -15,4 +15,7 @@ export declare const TooltipContent: import("styled-components").IStyledComponen
     $textAlign?: TooltipTextAlign | undefined;
 }>> & Omit<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const CloseButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const Arrow: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<RadixTooltip.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>> & Omit<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AASxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyB7D,eAAO,MAAM,qBAAqB,gNAMjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;cACtB,aAAa,CAAC,QAAQ,CAAC;GAKlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;WAClB,WAAW;eACP,MAAM,GAAG,MAAM;sBACR,MAAM;mBACT,MAAM;;sLAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,4NAOvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AASxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyB7D,eAAO,MAAM,qBAAqB,gNAMjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;cACtB,aAAa,CAAC,QAAQ,CAAC;GAKlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;WAClB,WAAW;eACP,MAAM,GAAG,MAAM;sBACR,MAAM;mBACT,MAAM;;sLAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,4NAOvB,CAAC;AAEF,eAAO,MAAM,KAAK;;0LAEjB,CAAA"}

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

@@ -4,7 +4,7 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { contents999, contents000, getTypographyStyles } from '@remember-web/mixin';
 import styled, { keyframes, css } from 'styled-components';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var TOOLTIP_CONTENT_CONSTANTS = {
   large: {
     padding: '8px 12px',
@@ -30,6 +30,10 @@ var TooltipContent = styled(RadixTooltip.Content)(_templateObject5 || (_template
   return [css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      padding: ", ";\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n    "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
 });
 var CloseButton = styled.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
+var Arrow = styled(RadixTooltip.Arrow)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  fill: ", ";\n"])), function (_ref3) {
+  var color = _ref3.color;
+  return color;
+});
 
-export { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper };
+export { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper };
 //# sourceMappingURL=styles.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'UIBody2',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'UIBody3',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContentWrapper = styled.div<{\n  $zIndex?: CSSProperties['zIndex'];\n}>`\n  [data-radix-popper-content-wrapper]{\n    ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n  ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'UIBody2',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'UIBody3',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContentWrapper = styled.div<{\n  $zIndex?: CSSProperties['zIndex'];\n}>`\n  [data-radix-popper-content-wrapper]{\n    ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n  ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const Arrow = styled(RadixTooltip.Arrow)`\n  fill: ${({color}) => color};\n`"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC;;AAUH;AAAO;AAAW;;"}

package/package.json

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

package/src/Chips/Chip/const.ts

@@ -10,20 +10,46 @@ import {
   contents999,
   primary100,
 } from '@remember-web/mixin';
-import type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';
+import type { ChipSize, ChipSizeStyle, ChipVariant, ChipVariantStyleMap } from './types';
+
+
+
+const SMALL_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
+  typography: 'Caption1',
+  padding: '6px 10px',
+  height: '28px',
+};
+
+const SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
+  typography: 'Caption1',
+  padding: '7px 11px',
+  height: '28px',
+};
+
+const MEDIUM_WITH_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
+  typography: 'UIBody3',
+  padding: '5px 12px',
+  height: '30px',
+};
+
+const MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE : ChipSizeStyle = {
+  typography: 'UIBody3',
+  padding: '6px 14px',
+  height: '30px',
+};
 
 export const CHIP_SIZE_STYLE = {
   small: {
-    typography: 'Caption1',
-    padding: '6px 10px',
-    height: '28px',
+    filled: SMALL_WITHOUT_BORDER_CHIP_SIZE_STYE,
+    outline: SMALL_WITH_BORDER_CHIP_SIZE_STYE,
+    dashedLine: SMALL_WITH_BORDER_CHIP_SIZE_STYE,
   },
   medium: {
-    typography: 'UIBody3',
-    padding: '5px 12px',
-    height: '30px',
+    filled: MEDIUM_WITHOUT_BORDER_CHIP_SIZE_STYE,
+    outline: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
+    dashedLine: MEDIUM_WITH_BORDER_CHIP_SIZE_STYE,
   },
-} as const satisfies Record<ChipSize, unknown>;
+} as const satisfies Record<ChipSize, Record<ChipVariant, ChipSizeStyle>>;
 
 export const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {
   filled: {

package/src/Chips/Chip/styles.ts

@@ -61,9 +61,9 @@ export const StyledChip = styled.div<ChipStyleProps>`
     text-align: left;
     transition: all 0.2s ease-in;
     height: auto; 
-    padding: ${CHIP_SIZE_STYLE[$size].padding};
+    padding: ${CHIP_SIZE_STYLE[$size][$variant].padding};
 
-    ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}
+    ${getTypographyStyles(CHIP_SIZE_STYLE[$size][$variant].typography)}
     
     ${getVariantStyles({ $variant, $clickable, ...props })}
   `}

package/src/Chips/Chip/types.ts

@@ -1,3 +1,4 @@
+import type { TypographyStyle } from '@remember-web/mixin';
 import type { ComponentProps } from 'react';
 
 // Props types -------------------------------------------------------
@@ -64,3 +65,9 @@ interface ChipStateStyle {
 type ChipStateStyles = Record<ChipState, ChipStateStyle>;
 
 export type ChipVariantStyleMap = Record<ChipVariant, ChipStateStyles>;
+
+export interface ChipSizeStyle {
+  typography: TypographyStyle;
+  padding: string;
+  height: string;
+}

package/src/Floating/Tooltip/index.tsx

@@ -6,7 +6,7 @@ import { contents000, contents999 } from '@remember-web/mixin';
 import { isSSR } from '@remember-web/shared';
 import { type PropsWithChildren, useState } from 'react';
 
-import { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';
+import { Arrow, CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';
 import {
   type TooltipProps,
   type TooltipSize,
@@ -107,7 +107,7 @@ export default function Tooltip<
                 </CloseButton>
               )}
               {isLargeSizeProps(props) && props.hasArrow && (
-                <RadixTooltip.Arrow
+                <Arrow
                   width={14}
                   height={8}
                   color={backgroundColor}

package/src/Floating/Tooltip/styles.ts

@@ -89,3 +89,7 @@ export const CloseButton = styled.button`
     display: block;
   }
 `;
+
+export const Arrow = styled(RadixTooltip.Arrow)`
+  fill: ${({color}) => color};
+`