npm - @remember-web/primitive - Versions diffs - 0.1.5 → 0.1.6 - Mend

@remember-web/primitive 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/dist/primitive/src/Badge/utils.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.cjs.js","sources":["../../../../src/Badge/utils.ts"],"sourcesContent":["import type { BadgeValueProps } from '@/Badge/types';\n\nimport { getBadgePseudoCss } from '@/Badge/style';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;;;~~IAIaA~~,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA,CAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAAG,EAAAA,CAAAA,MAAA,CAAMH,GAAG,EAAAG,GAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAA,CAASD,OAAO,CAAE,CAAA;AACjD,EAAC;AAEM,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,uBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK,CAAA;KACxC,CAAA;AAAA,GAAA;AACH;;;;;"}
1	+ {"version":3,"file":"utils.cjs.js","sources":["../../../../src/Badge/utils.ts"],"sourcesContent":["import type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgePseudoCss } from '@/Badge/style';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;;;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA,CAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAAG,EAAAA,CAAAA,MAAA,CAAMH,GAAG,EAAAG,GAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAA,CAASD,OAAO,CAAE,CAAA;AACjD,EAAC;AAEM,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,uBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK,CAAA;KACxC,CAAA;AAAA,GAAA;AACH;;;;;"}

package/dist/primitive/src/Badge/utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/Badge/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;~~AAIrD~~,eAAO,MAAM,aAAa,UAAW,eAAe,KAAG,MAQtD,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;0BAEA,eAAe;;;CAGtC,CAAC"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/Badge/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,eAAO,MAAM,aAAa,UAAW,eAAe,KAAG,MAQtD,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;0BAEA,eAAe;;;CAGtC,CAAC"}

package/dist/primitive/src/Badge/utils.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.esm.js","sources":["../../../../src/Badge/utils.ts"],"sourcesContent":["import type { BadgeValueProps } from '@/Badge/types';\n\nimport { getBadgePseudoCss } from '@/Badge/style';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;~~IAIaA~~,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA,CAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAAG,EAAAA,CAAAA,MAAA,CAAMH,GAAG,EAAAG,GAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAA,CAASD,OAAO,CAAE,CAAA;AACjD,EAAC;AAEM,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,iBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK,CAAA;KACxC,CAAA;AAAA,GAAA;AACH;;;;"}
1	+ {"version":3,"file":"utils.esm.js","sources":["../../../../src/Badge/utils.ts"],"sourcesContent":["import type { BadgeValueProps } from '@/Badge/types';\nimport { getBadgePseudoCss } from '@/Badge/style';\n\nexport const getBadgeValue = (props: BadgeValueProps): string => {\n if (typeof props === 'string') {\n return props;\n }\n\n const { max = 99, current = 0 } = props;\n\n return current > max ? `${max}+` : `${current}`;\n};\n\nexport const badgePseudo = {\n getBadgePseudoCss,\n getBadgeAttr: (props: BadgeValueProps) => ({\n 'data-badge-value': getBadgeValue(props),\n }),\n};\n"],"names":["getBadgeValue","props","_props$max","max","_props$current","current","concat","badgePseudo","getBadgePseudoCss","getBadgeAttr"],"mappings":";;IAGaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAsB,EAAa;AAC/D,EAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,OAAOA,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,IAAAC,UAAA,GAAkCD,KAAK,CAA/BE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,UAAA;IAAAE,cAAA,GAAkBH,KAAK,CAArBI,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,cAAA,CAAA;EAE7B,OAAOC,OAAO,GAAGF,GAAG,GAAAG,EAAAA,CAAAA,MAAA,CAAMH,GAAG,EAAAG,GAAAA,CAAAA,GAAAA,EAAAA,CAAAA,MAAA,CAASD,OAAO,CAAE,CAAA;AACjD,EAAC;AAEM,IAAME,WAAW,GAAG;AACzBC,EAAAA,iBAAiB,EAAjBA,iBAAiB;EACjBC,YAAY,EAAE,SAAAA,YAAAA,CAACR,KAAsB,EAAA;IAAA,OAAM;MACzC,kBAAkB,EAAED,aAAa,CAACC,KAAK,CAAA;KACxC,CAAA;AAAA,GAAA;AACH;;;;"}

package/dist/primitive/src/Buttons/Button/Button.stories.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ declare const meta: {
     title: string;
     component: <T extends import("react").ElementType = "button">(props: {
         as?: T | null | undefined;
-    } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "icon" | keyof import("../../Buttons/Button/types").ButtonStyleProps | "iconPosition"> & import("@remember-web/shared/types").ConvertTransientProps<Partial<import("../../Buttons/Button/types").ButtonStyleProps>> & {
+    } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "icon" | keyof import("./types").ButtonStyleProps | "iconPosition"> & import("@remember-web/shared/types").ConvertTransientProps<Partial<import("./types").ButtonStyleProps>> & {
         icon?: import("react").ReactNode;
         iconPosition?: "right" | "left" | undefined;
     } & {

package/dist/primitive/src/Buttons/Button/const.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"const.cjs.js","sources":["../../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import ~~type~~ { ~~SpinnerSize~~ } from '~~@/Common~~/~~Spinner/types~~';\nimport { ~~contents000,~~ ~~contents300, contents999~~ } from '~~@remember-web~~/~~mixin~~';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: 'Body2_M',\n height: '32px',\n minWidth: '68px',\n padding: '0 16px',\n },\n medium: {\n typography: 'Body1_M',\n height: '36px',\n minWidth: '78px',\n padding: '0 20px',\n },\n large: {\n typography: 'Headline4_M',\n height: '44px',\n minWidth: '108px',\n padding: '0 20px',\n },\n xLarge: {\n typography: 'Headline4_M',\n height: '52px',\n minWidth: '116px',\n padding: '0 24px',\n },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n primary: {\n backgroundColor: contents000,\n color: contents999,\n },\n outline: {\n backgroundColor: 'transparent',\n color: contents000,\n borderColor: contents300,\n },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n small: '4px',\n medium: '4px',\n large: '8px',\n xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;;;~~AAKO~~,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDE,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDG,EAAAA,MAAM,EAAE;AACNN,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;AACX,GAAA;AACF,EAAgD;AAEzC,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,iBAAW;AAC5BC,IAAAA,KAAK,EAAEC,iBAAAA;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,iBAAW;AAClBI,IAAAA,WAAW,EAAEC,iBAAAA;AACf,GAAA;AACF,EAAmD;AAE5C,IAAMC,gBAAgB,GAAG;AAC9BjB,EAAAA,KAAK,EAAE,OAAO;AACdK,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAoD;AAE7C,IAAMW,YAAY,GAAG;AAC1BlB,EAAAA,KAAK,EAAE,KAAK;AACZK,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,KAAA;AACV;;;;;;;"}
1	+ {"version":3,"file":"const.cjs.js","sources":["../../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: 'Body2_M',\n height: '32px',\n minWidth: '68px',\n padding: '0 16px',\n },\n medium: {\n typography: 'Body1_M',\n height: '36px',\n minWidth: '78px',\n padding: '0 20px',\n },\n large: {\n typography: 'Headline4_M',\n height: '44px',\n minWidth: '108px',\n padding: '0 20px',\n },\n xLarge: {\n typography: 'Headline4_M',\n height: '52px',\n minWidth: '116px',\n padding: '0 24px',\n },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n primary: {\n backgroundColor: contents000,\n color: contents999,\n },\n outline: {\n backgroundColor: 'transparent',\n color: contents000,\n borderColor: contents300,\n },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n small: '4px',\n medium: '4px',\n large: '8px',\n xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;;;AAMO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDE,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDG,EAAAA,MAAM,EAAE;AACNN,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;AACX,GAAA;AACF,EAAgD;AAEzC,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,iBAAW;AAC5BC,IAAAA,KAAK,EAAEC,iBAAAA;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,iBAAW;AAClBI,IAAAA,WAAW,EAAEC,iBAAAA;AACf,GAAA;AACF,EAAmD;AAE5C,IAAMC,gBAAgB,GAAG;AAC9BjB,EAAAA,KAAK,EAAE,OAAO;AACdK,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAoD;AAE7C,IAAMW,YAAY,GAAG;AAC1BlB,EAAAA,KAAK,EAAE,KAAK;AACZK,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,KAAA;AACV;;;;;;;"}

package/dist/primitive/src/Buttons/Button/const.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../../src/Buttons/Button/const.ts"],"names":[],"mappings":"~~AAKA~~,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;CAyBuB,CAAC;AAEjD,eAAO,MAAM,aAAa;;;;;;;;;;CAUyB,CAAC;AAEpD,eAAO,MAAM,gBAAgB;;;;;CAKuB,CAAC;AAErD,eAAO,MAAM,YAAY;;;;;CAKsB,CAAC"}
1	+ {"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../../src/Buttons/Button/const.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;CAyBuB,CAAC;AAEjD,eAAO,MAAM,aAAa;;;;;;;;;;CAUyB,CAAC;AAEpD,eAAO,MAAM,gBAAgB;;;;;CAKuB,CAAC;AAErD,eAAO,MAAM,YAAY;;;;;CAKsB,CAAC"}

package/dist/primitive/src/Buttons/Button/const.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"const.esm.js","sources":["../../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import ~~type~~ { ~~SpinnerSize~~ } from '~~@/Common~~/~~Spinner/types~~';\nimport { ~~contents000,~~ ~~contents300, contents999~~ } from '~~@remember-web~~/~~mixin~~';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: 'Body2_M',\n height: '32px',\n minWidth: '68px',\n padding: '0 16px',\n },\n medium: {\n typography: 'Body1_M',\n height: '36px',\n minWidth: '78px',\n padding: '0 20px',\n },\n large: {\n typography: 'Headline4_M',\n height: '44px',\n minWidth: '108px',\n padding: '0 20px',\n },\n xLarge: {\n typography: 'Headline4_M',\n height: '52px',\n minWidth: '116px',\n padding: '0 24px',\n },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n primary: {\n backgroundColor: contents000,\n color: contents999,\n },\n outline: {\n backgroundColor: 'transparent',\n color: contents000,\n borderColor: contents300,\n },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n small: '4px',\n medium: '4px',\n large: '8px',\n xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;~~AAKO~~,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDE,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDG,EAAAA,MAAM,EAAE;AACNN,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;AACX,GAAA;AACF,EAAgD;AAEzC,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,WAAW;AAC5BC,IAAAA,KAAK,EAAEC,WAAAA;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,WAAW;AAClBI,IAAAA,WAAW,EAAEC,WAAAA;AACf,GAAA;AACF,EAAmD;AAE5C,IAAMC,gBAAgB,GAAG;AAC9BjB,EAAAA,KAAK,EAAE,OAAO;AACdK,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAoD;AAE7C,IAAMW,YAAY,GAAG;AAC1BlB,EAAAA,KAAK,EAAE,KAAK;AACZK,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,KAAA;AACV;;;;"}
1	+ {"version":3,"file":"const.esm.js","sources":["../../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: 'Body2_M',\n height: '32px',\n minWidth: '68px',\n padding: '0 16px',\n },\n medium: {\n typography: 'Body1_M',\n height: '36px',\n minWidth: '78px',\n padding: '0 20px',\n },\n large: {\n typography: 'Headline4_M',\n height: '44px',\n minWidth: '108px',\n padding: '0 20px',\n },\n xLarge: {\n typography: 'Headline4_M',\n height: '52px',\n minWidth: '116px',\n padding: '0 24px',\n },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n primary: {\n backgroundColor: contents000,\n color: contents999,\n },\n outline: {\n backgroundColor: 'transparent',\n color: contents000,\n borderColor: contents300,\n },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n small: '4px',\n medium: '4px',\n large: '8px',\n xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;AAMO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDE,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDG,EAAAA,MAAM,EAAE;AACNN,IAAAA,UAAU,EAAE,aAAa;AACzBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;AACX,GAAA;AACF,EAAgD;AAEzC,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,WAAW;AAC5BC,IAAAA,KAAK,EAAEC,WAAAA;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,WAAW;AAClBI,IAAAA,WAAW,EAAEC,WAAAA;AACf,GAAA;AACF,EAAmD;AAE5C,IAAMC,gBAAgB,GAAG;AAC9BjB,EAAAA,KAAK,EAAE,OAAO;AACdK,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAoD;AAE7C,IAAMW,YAAY,GAAG;AAC1BlB,EAAAA,KAAK,EAAE,KAAK;AACZK,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,KAAA;AACV;;;;"}

package/dist/primitive/src/Buttons/Button/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { As } from '@remember-web/shared/types';\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps, ~~ButtonSize~~ } from './types';\n\nconst Button: ForwardRefRenderFunction<\n HTMLButtonElement,\n ButtonProps<'button'> & As<ElementType>\n> = (\n {\n children,\n color,\n size = 'small',\n variant = 'primary',\n layout = 'block',\n isLoading = false,\n filled = variant === 'primary',\n icon,\n iconPosition = 'left',\n ...props\n },\n ref\n) => (\n <StyledButton\n $color={color}\n $size={size}\n $variant={variant}\n $layout={layout}\n $isLoading={isLoading}\n $filled={filled}\n aria-live=\"polite\"\n aria-busy={isLoading}\n ref={ref}\n {...props}\n >\n {isLoading ? (\n <Spinner size={SPINNER_SIZE_MAP[size]} />\n ) : (\n <>\n {iconPosition === 'left' && icon}\n {children}\n {iconPosition === 'right' && icon}\n </>\n )}\n </StyledButton>\n);\n\ntype ButtonComponentWithRef = <T extends ElementType = 'button'>(\n props: { as?: T \| null } & ButtonProps<T> & {\n ref?: React.ComponentPropsWithRef<T>['ref'];\n }\n) => React.ReactElement \| null;\n\nexport default forwardRef(Button) as ButtonComponentWithRef;\n"],"names":["size","variant","layout","isLoading","filled","iconPosition","props","$color","$size","$variant","$layout","$isLoading","$filled","ref","children"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYb;AAgBK;;;AATDA;;AACAC;;AACAC;;AACAC;;AACAC;;;AAEAC;AACGC;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AACA;AACA;AACAC;AAAS;AACAC;;AAG+B;AAEtCA;;AAKD;AACY;AASjB;;"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\nimport type { As } from '@remember-web/shared/types';\n\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps } from './types';\n\nconst Button: ForwardRefRenderFunction<\n HTMLButtonElement,\n ButtonProps<'button'> & As<ElementType>\n> = (\n {\n children,\n color,\n size = 'small',\n variant = 'primary',\n layout = 'block',\n isLoading = false,\n filled = variant === 'primary',\n icon,\n iconPosition = 'left',\n ...props\n },\n ref\n) => (\n <StyledButton\n $color={color}\n $size={size}\n $variant={variant}\n $layout={layout}\n $isLoading={isLoading}\n $filled={filled}\n aria-live=\"polite\"\n aria-busy={isLoading}\n ref={ref}\n {...props}\n >\n {isLoading ? (\n <Spinner size={SPINNER_SIZE_MAP[size]} />\n ) : (\n <>\n {iconPosition === 'left' && icon}\n {children}\n {iconPosition === 'right' && icon}\n </>\n )}\n </StyledButton>\n);\n\ntype ButtonComponentWithRef = <T extends ElementType = 'button'>(\n props: { as?: T \| null } & ButtonProps<T> & {\n ref?: React.ComponentPropsWithRef<T>['ref'];\n }\n) => React.ReactElement \| null;\n\nexport default forwardRef(Button) as ButtonComponentWithRef;\n"],"names":["size","variant","layout","isLoading","filled","iconPosition","props","$color","$size","$variant","$layout","$isLoading","$filled","ref","children"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYb;AAgBK;;;AATDA;;AACAC;;AACAC;;AACAC;;AACAC;;;AAEAC;AACGC;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AACA;AACA;AACAC;AAAS;AACAC;;AAG+B;AAEtCA;;AAKD;AACY;AASjB;;"}

package/dist/primitive/src/Buttons/Button/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Buttons/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAQnE,OAAO,KAAK,EAAE,WAAW,~~EAAc~~,MAAM,SAAS,CAAC;~~AA4CvD~~,KAAK,sBAAsB,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAC7D,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CAC7C,KACA,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;;AAE/B,wBAA4D"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Buttons/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAQnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA4C3C,KAAK,sBAAsB,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAC7D,KAAK,EAAE;IAAE,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CAC7C,KACA,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;;AAE/B,wBAA4D"}

package/dist/primitive/src/Buttons/Button/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { As } from '@remember-web/shared/types';\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps, ~~ButtonSize~~ } from './types';\n\nconst Button: ForwardRefRenderFunction<\n HTMLButtonElement,\n ButtonProps<'button'> & As<ElementType>\n> = (\n {\n children,\n color,\n size = 'small',\n variant = 'primary',\n layout = 'block',\n isLoading = false,\n filled = variant === 'primary',\n icon,\n iconPosition = 'left',\n ...props\n },\n ref\n) => (\n <StyledButton\n $color={color}\n $size={size}\n $variant={variant}\n $layout={layout}\n $isLoading={isLoading}\n $filled={filled}\n aria-live=\"polite\"\n aria-busy={isLoading}\n ref={ref}\n {...props}\n >\n {isLoading ? (\n <Spinner size={SPINNER_SIZE_MAP[size]} />\n ) : (\n <>\n {iconPosition === 'left' && icon}\n {children}\n {iconPosition === 'right' && icon}\n </>\n )}\n </StyledButton>\n);\n\ntype ButtonComponentWithRef = <T extends ElementType = 'button'>(\n props: { as?: T \| null } & ButtonProps<T> & {\n ref?: React.ComponentPropsWithRef<T>['ref'];\n }\n) => React.ReactElement \| null;\n\nexport default forwardRef(Button) as ButtonComponentWithRef;\n"],"names":["size","variant","layout","isLoading","filled","iconPosition","props","$color","$size","$variant","$layout","$isLoading","$filled","ref","children"],"mappings":";;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYb;AAgBK;;;AATDA;;AACAC;;AACAC;;AACAC;;AACAC;;;AAEAC;AACGC;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AACA;AACA;AACAC;AAAS;AACAC;;AAG+B;AAEtCA;;AAKD;AACY;AASjB;;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../../src/Buttons/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\nimport type { As } from '@remember-web/shared/types';\n\nimport { Spinner } from '@/Common';\n\nimport { SPINNER_SIZE_MAP } from './const';\nimport { StyledButton } from './styles';\nimport type { ButtonProps } from './types';\n\nconst Button: ForwardRefRenderFunction<\n HTMLButtonElement,\n ButtonProps<'button'> & As<ElementType>\n> = (\n {\n children,\n color,\n size = 'small',\n variant = 'primary',\n layout = 'block',\n isLoading = false,\n filled = variant === 'primary',\n icon,\n iconPosition = 'left',\n ...props\n },\n ref\n) => (\n <StyledButton\n $color={color}\n $size={size}\n $variant={variant}\n $layout={layout}\n $isLoading={isLoading}\n $filled={filled}\n aria-live=\"polite\"\n aria-busy={isLoading}\n ref={ref}\n {...props}\n >\n {isLoading ? (\n <Spinner size={SPINNER_SIZE_MAP[size]} />\n ) : (\n <>\n {iconPosition === 'left' && icon}\n {children}\n {iconPosition === 'right' && icon}\n </>\n )}\n </StyledButton>\n);\n\ntype ButtonComponentWithRef = <T extends ElementType = 'button'>(\n props: { as?: T \| null } & ButtonProps<T> & {\n ref?: React.ComponentPropsWithRef<T>['ref'];\n }\n) => React.ReactElement \| null;\n\nexport default forwardRef(Button) as ButtonComponentWithRef;\n"],"names":["size","variant","layout","isLoading","filled","iconPosition","props","$color","$size","$variant","$layout","$isLoading","$filled","ref","children"],"mappings":";;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYb;AAgBK;;;AATDA;;AACAC;;AACAC;;AACAC;;AACAC;;;AAEAC;AACGC;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AACA;AACA;AACAC;AAAS;AACAC;;AAG+B;AAEtCA;;AAKD;AACY;AASjB;;"}

package/dist/primitive/src/Buttons/Button/styles.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport type { DataAttributes } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && `width: 100%;`}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius: 4px;\n\n color: ${(props.$variant.startsWith('outline') ? $color : null) ??\n BUTTON_COLORS[props.$variant].color};\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ${primary100};\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${primary200};\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n `,\n\n // primary 스타일\n props.$variant === 'primary' &&\n css`\n background-color: ${$color ??\n BUTTON_COLORS[props.$variant].backgroundColor};\n &:disabled {\n background-color: ${disabled};\n }\n &::before {\n background-color: ${primary200};\n }\n `,\n\n // outline 스타일\n props.$variant === 'outline' &&\n css`\n background-color: ${props.$filled\n ? bg100\n : BUTTON_COLORS[props.$variant].backgroundColor};\n border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n &:disabled {\n border-color: ${disabled};\n color: ${disabled};\n }\n &::before {\n background-color: ${$color ?? primary100};\n }\n `,\n ]\n);\n"],"names":["props","css"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;~~AAgBN~~;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;AACAD;AAYA;;AAeD;;"}
1	+ {"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport type { DataAttributes } from 'styled-components';\nimport styled, { css } from 'styled-components';\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && `width: 100%;`}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius: 4px;\n\n color: ${(props.$variant.startsWith('outline') ? $color : null) ??\n BUTTON_COLORS[props.$variant].color};\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ${primary100};\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${primary200};\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n `,\n\n // primary 스타일\n props.$variant === 'primary' &&\n css`\n background-color: ${$color ??\n BUTTON_COLORS[props.$variant].backgroundColor};\n &:disabled {\n background-color: ${disabled};\n }\n &::before {\n background-color: ${primary200};\n }\n `,\n\n // outline 스타일\n props.$variant === 'outline' &&\n css`\n background-color: ${props.$filled\n ? bg100\n : BUTTON_COLORS[props.$variant].backgroundColor};\n border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n &:disabled {\n border-color: ${disabled};\n color: ${disabled};\n }\n &::before {\n background-color: ${$color ?? primary100};\n }\n `,\n ]\n);\n"],"names":["props","css"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAeN;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;AACAD;AAYA;;AAeD;;"}

package/dist/primitive/src/Buttons/Button/styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Buttons/Button/styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;~~AAYxD~~,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,YAAY,0PAmGxB,CAAC"}
1	+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Buttons/Button/styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAWxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,YAAY,0PAmGxB,CAAC"}

package/dist/primitive/src/Buttons/Button/styles.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.esm.js","sources":["../../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport type { DataAttributes } from 'styled-components';\nimport styled, { css } from 'styled-components';\n\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && `width: 100%;`}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius: 4px;\n\n color: ${(props.$variant.startsWith('outline') ? $color : null) ??\n BUTTON_COLORS[props.$variant].color};\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ${primary100};\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${primary200};\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n `,\n\n // primary 스타일\n props.$variant === 'primary' &&\n css`\n background-color: ${$color ??\n BUTTON_COLORS[props.$variant].backgroundColor};\n &:disabled {\n background-color: ${disabled};\n }\n &::before {\n background-color: ${primary200};\n }\n `,\n\n // outline 스타일\n props.$variant === 'outline' &&\n css`\n background-color: ${props.$filled\n ? bg100\n : BUTTON_COLORS[props.$variant].backgroundColor};\n border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n &:disabled {\n border-color: ${disabled};\n color: ${disabled};\n }\n &::before {\n background-color: ${$color ?? primary100};\n }\n `,\n ]\n);\n"],"names":["props","css"],"mappings":";;;;;;;AAAa;AAAA;~~AAgBN~~;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;AACAD;AAYA;;AAeD;;"}
1	+ {"version":3,"file":"styles.esm.js","sources":["../../../../../src/Buttons/Button/styles.ts"],"sourcesContent":["'use client';\n\nimport type { DataAttributes } from 'styled-components';\nimport styled, { css } from 'styled-components';\nimport {\n bg100,\n disabled,\n getTypographyStyles,\n primary100,\n primary200,\n} from '@remember-web/mixin';\n\nimport { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';\nimport type { ButtonStyleProps } from './types';\n\nexport const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(\n ({ $size, $layout, $color, ...props }) => [\n // 공용 스타일\n css`\n all: unset;\n appearance: none;\n\n box-sizing: border-box;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n\n display: ${$layout === 'inline' ? 'inline-flex' : 'flex'};\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n gap: ${ICON_GAP_MAP[$size]};\n\n ${getTypographyStyles(BUTTON_SIZES[$size].typography)}\n text-align: center;\n\n width: fit-content;\n ${$layout === 'fullBlock' && `width: 100%;`}\n min-width: ${BUTTON_SIZES[$size].minWidth};\n height: ${BUTTON_SIZES[$size].height};\n padding: ${BUTTON_SIZES[$size].padding};\n border-radius: 4px;\n\n color: ${(props.$variant.startsWith('outline') ? $color : null) ??\n BUTTON_COLORS[props.$variant].color};\n\n &:focus-visible:not(:disabled) {\n outline: 2px solid ${primary100};\n outline-offset: 2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n\n &::before {\n display: none;\n }\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${primary200};\n opacity: 0;\n pointer-events: none;\n\n transition: opacity 0.2s;\n }\n @media (hover: hover) {\n &:hover::before {\n opacity: 0.1;\n }\n }\n &:active::before {\n opacity: 0.2;\n }\n `,\n\n // primary 스타일\n props.$variant === 'primary' &&\n css`\n background-color: ${$color ??\n BUTTON_COLORS[props.$variant].backgroundColor};\n &:disabled {\n background-color: ${disabled};\n }\n &::before {\n background-color: ${primary200};\n }\n `,\n\n // outline 스타일\n props.$variant === 'outline' &&\n css`\n background-color: ${props.$filled\n ? bg100\n : BUTTON_COLORS[props.$variant].backgroundColor};\n border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};\n &:disabled {\n border-color: ${disabled};\n color: ${disabled};\n }\n &::before {\n background-color: ${$color ?? primary100};\n }\n `,\n ]\n);\n"],"names":["props","css"],"mappings":";;;;;;;AAAa;AAAA;AAeN;AACL;AAAA;;;AAA8BA;AAAK;AAEjCC;AAmEA;AACAD;AAYA;;AAeD;;"}

package/dist/primitive/src/Buttons/Button/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Buttons/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;~~AAEzC~~,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,aAAa,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,KAAK,YAAY,GAAG,qBAAqB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,WAAW,CAAC,GAAG,SAAS,WAAW,IAAI,IAAI,CACrD,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACnC,MAAM,gBAAgB,GAAG,MAAM,GAAG,cAAc,CACjD,GACC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACjC,CAAC"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Buttons/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,aAAa,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,KAAK,YAAY,GAAG,qBAAqB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,WAAW,CAAC,GAAG,SAAS,WAAW,IAAI,IAAI,CACrD,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACnC,MAAM,gBAAgB,GAAG,MAAM,GAAG,cAAc,CACjD,GACC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACjC,CAAC"}

package/dist/primitive/src/Common/Divider/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport styled from 'styled-components';\n\nimport { divider } from '@remember-web/mixin';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n color?: string;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n background-color: ${({ color = divider }) => color};\n &[data-orientation='horizontal'] {\n height: 1px;\n width: 100%;\n }\n\n &[data-orientation='vertical'] {\n height: 100%;\n width: 1px;\n }\n`;\n\n/*\n @prop {\"horizontal\" \| \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;~~AAWb~~;AACsB;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport styled from 'styled-components';\nimport { divider } from '@remember-web/mixin';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n color?: string;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n background-color: ${({ color = divider }) => color};\n &[data-orientation='horizontal'] {\n height: 1px;\n width: 100%;\n }\n\n &[data-orientation='vertical'] {\n height: 100%;\n width: 1px;\n }\n`;\n\n/*\n @prop {\"horizontal\" \| \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAUb;AACsB;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}

package/dist/primitive/src/Common/Divider/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Divider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;~~AAKhE~~,MAAM,WAAW,YAAa,SAAQ,kBAAkB,CAAC,cAAc;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAeD;;;GAGG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,4CAAiC,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Divider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAIhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB,CAAC,cAAc;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAeD;;;GAGG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,4CAAiC,CAAC"}

package/dist/primitive/src/Common/Divider/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport styled from 'styled-components';\n\nimport { divider } from '@remember-web/mixin';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n color?: string;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n background-color: ${({ color = divider }) => color};\n &[data-orientation='horizontal'] {\n height: 1px;\n width: 100%;\n }\n\n &[data-orientation='vertical'] {\n height: 100%;\n width: 1px;\n }\n`;\n\n/*\n @prop {\"horizontal\" \| \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;~~AAWb~~;AACsB;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport styled from 'styled-components';\nimport { divider } from '@remember-web/mixin';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n color?: string;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n background-color: ${({ color = divider }) => color};\n &[data-orientation='horizontal'] {\n height: 1px;\n width: 100%;\n }\n\n &[data-orientation='vertical'] {\n height: 100%;\n width: 1px;\n }\n`;\n\n/*\n @prop {\"horizontal\" \| \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAUb;AACsB;AAAGA;AAAe;AAAY;;AAYpD;AACA;AACA;AACA;;;AAC4E;;"}

package/dist/primitive/src/Common/Flex/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ElementType, HTMLAttributes } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nexport interface FlexProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType;\n $align?: CSSProperties['alignItems'];\n $direction?: CSSProperties['flexDirection'];\n $justify?: CSSProperties['justifyContent'];\n $wrap?: CSSProperties['flexWrap'];\n $gap?: string \| number;\n $width?: string \| number;\n $height?: string \| number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexProps>>(\n ({\n $align = 'center',\n $direction = 'row',\n $justify = 'center',\n $wrap = 'nowrap',\n $gap = 0,\n $width = 'auto',\n $height = 'auto',\n }) => css`\n box-sizing: border-box;\n display: flex;\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n align-items: ${$align};\n justify-content: ${$justify};\n flex-direction: ${$direction};\n flex-wrap: ${$wrap};\n `\n);\n\n/*\n @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\nexport const Flex = ({\n as,\n width,\n height,\n direction,\n gap,\n align,\n justify,\n wrap,\n ...props\n}: ConvertTransientProps<FlexProps>) => (\n <StyledFlex\n as={as}\n $width={width}\n $height={height}\n $direction={direction}\n $gap={gap}\n $align={align}\n $justify={justify}\n $wrap={wrap}\n {...props}\n />\n);\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","props","as"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;~~AAkBb~~;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACiB;;;;;;;;AASZC;AAAK;AAGNC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ElementType, HTMLAttributes } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nexport interface FlexProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType;\n $align?: CSSProperties['alignItems'];\n $direction?: CSSProperties['flexDirection'];\n $justify?: CSSProperties['justifyContent'];\n $wrap?: CSSProperties['flexWrap'];\n $gap?: string \| number;\n $width?: string \| number;\n $height?: string \| number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexProps>>(\n ({\n $align = 'center',\n $direction = 'row',\n $justify = 'center',\n $wrap = 'nowrap',\n $gap = 0,\n $width = 'auto',\n $height = 'auto',\n }) => css`\n box-sizing: border-box;\n display: flex;\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n align-items: ${$align};\n justify-content: ${$justify};\n flex-direction: ${$direction};\n flex-wrap: ${$wrap};\n `\n);\n\n/*\n @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\nexport const Flex = ({\n as,\n width,\n height,\n direction,\n gap,\n align,\n justify,\n wrap,\n ...props\n}: ConvertTransientProps<FlexProps>) => (\n <StyledFlex\n as={as}\n $width={width}\n $height={height}\n $direction={direction}\n $gap={gap}\n $align={align}\n $justify={justify}\n $wrap={wrap}\n {...props}\n />\n);\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","props","as"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAiBb;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACiB;;;;;;;;AASZC;AAAK;AAGNC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}

package/dist/primitive/src/Common/Flex/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Flex/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;~~AAGxE~~,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAyBD;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,0EAUd,sBAAsB,SAAS,CAAC,4CAYlC,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Flex/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAyBD;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,0EAUd,sBAAsB,SAAS,CAAC,4CAYlC,CAAC"}

package/dist/primitive/src/Common/Flex/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ElementType, HTMLAttributes } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nexport interface FlexProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType;\n $align?: CSSProperties['alignItems'];\n $direction?: CSSProperties['flexDirection'];\n $justify?: CSSProperties['justifyContent'];\n $wrap?: CSSProperties['flexWrap'];\n $gap?: string \| number;\n $width?: string \| number;\n $height?: string \| number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexProps>>(\n ({\n $align = 'center',\n $direction = 'row',\n $justify = 'center',\n $wrap = 'nowrap',\n $gap = 0,\n $width = 'auto',\n $height = 'auto',\n }) => css`\n box-sizing: border-box;\n display: flex;\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n align-items: ${$align};\n justify-content: ${$justify};\n flex-direction: ${$direction};\n flex-wrap: ${$wrap};\n `\n);\n\n/*\n @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\nexport const Flex = ({\n as,\n width,\n height,\n direction,\n gap,\n align,\n justify,\n wrap,\n ...props\n}: ConvertTransientProps<FlexProps>) => (\n <StyledFlex\n as={as}\n $width={width}\n $height={height}\n $direction={direction}\n $gap={gap}\n $align={align}\n $justify={justify}\n $wrap={wrap}\n {...props}\n />\n);\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","props","as"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAAA;~~AAkBb~~;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACiB;;;;;;;;AASZC;AAAK;AAGNC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../../src/Common/Flex/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ElementType, HTMLAttributes } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\n\nexport interface FlexProps extends HTMLAttributes<HTMLDivElement> {\n as?: ElementType;\n $align?: CSSProperties['alignItems'];\n $direction?: CSSProperties['flexDirection'];\n $justify?: CSSProperties['justifyContent'];\n $wrap?: CSSProperties['flexWrap'];\n $gap?: string \| number;\n $width?: string \| number;\n $height?: string \| number;\n}\n\nconst StyledFlex = styled.div<Partial<FlexProps>>(\n ({\n $align = 'center',\n $direction = 'row',\n $justify = 'center',\n $wrap = 'nowrap',\n $gap = 0,\n $width = 'auto',\n $height = 'auto',\n }) => css`\n box-sizing: border-box;\n display: flex;\n width: ${typeof $width === 'number' ? `${$width}px` : $width};\n height: ${typeof $height === 'number' ? `${$height}px` : $height};\n\n gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};\n align-items: ${$align};\n justify-content: ${$justify};\n flex-direction: ${$direction};\n flex-wrap: ${$wrap};\n `\n);\n\n/*\n @prop {string} width\n * @prop {string} height\n * @prop {string} gap\n * @prop {CSSProperties['alignItems']} align\n * @prop {CSSProperties['justifyContent']} justify\n * @prop {CSSProperties['flexDirection']} direction\n * @prop {CSSProperties['flexWrap']} wrap\n */\nexport const Flex = ({\n as,\n width,\n height,\n direction,\n gap,\n align,\n justify,\n wrap,\n ...props\n}: ConvertTransientProps<FlexProps>) => (\n <StyledFlex\n as={as}\n $width={width}\n $height={height}\n $direction={direction}\n $gap={gap}\n $align={align}\n $justify={justify}\n $wrap={wrap}\n {...props}\n />\n);\n"],"names":["$align","$direction","$justify","$wrap","$gap","$width","$height","props","as"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAAA;AAiBb;AACE;AACEA;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AACAC;;AAWkB;;AAItB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACiB;;;;;;;;AASZC;AAAK;AAGNC;AACAH;AACAC;AACAL;AACAG;AACAJ;AACAE;AACAC;;AAEA;;"}

package/dist/primitive/src/Common/Spinner/Spinner.stories.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { Spinner } from './index';
 type Story = StoryObj<typeof Spinner>;
 declare const meta: {
     title: string;
-    component: ({ size, className, color, layout, }: import("../../Common/Spinner/types").SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ size, className, color, layout, }: import("./types").SpinnerProps) => import("react/jsx-runtime").JSX.Element;
     args: {};
 };
 export declare const Default: Story;

package/dist/primitive/src/Common/Spinner/Spinner.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Spinner/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;~~AAIvD~~,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,QAAA,MAAM,IAAI;;;;CAIsB,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Spinner/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,QAAA,MAAM,IAAI;;;;CAIsB,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/primitive/src/Control/BaseToggle/ToggleIcon/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\n\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: { on: ControlCheckOn, off: ControlCheckOff },\n checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },\n favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },\n bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },\n radio: { on: ControlRadioOn, off: ControlRadioOff },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n const Icon = ICON_NAME[variant][status];\n\n return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;~~AAwBA~~;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: { on: ControlCheckOn, off: ControlCheckOff },\n checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },\n favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },\n bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },\n radio: { on: ControlRadioOn, off: ControlRadioOff },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n const Icon = ICON_NAME[variant][status];\n\n return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;AAuBA;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}

package/dist/primitive/src/Control/BaseToggle/ToggleIcon/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"names":[],"mappings":"~~AAeA~~,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAapE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,2CAMf"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAapE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,2CAMf"}

package/dist/primitive/src/Control/BaseToggle/ToggleIcon/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\n\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: { on: ControlCheckOn, off: ControlCheckOff },\n checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },\n favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },\n bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },\n radio: { on: ControlRadioOn, off: ControlRadioOff },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n const Icon = ICON_NAME[variant][status];\n\n return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;~~AAwBA~~;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n ControlBookmarkOff,\n ControlBookmarkOn,\n ControlCheckOff,\n ControlCheckOn,\n ControlCheckboxOff,\n ControlCheckboxOn,\n ControlFavoriteOff,\n ControlFavoriteOn,\n ControlRadioOff,\n ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n SVG_SIZES,\n isSvgRegularSize,\n type SvgSizeProps,\n type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n check: { on: ControlCheckOn, off: ControlCheckOff },\n checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },\n favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },\n bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },\n radio: { on: ControlRadioOn, off: ControlRadioOff },\n} as const satisfies Record<\n ToggleVariantType,\n Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n size,\n status,\n variant,\n className,\n}: {\n variant: ToggleVariantType;\n status: ToggleStatusType;\n className?: string;\n} & SvgSizeProps) {\n const iconSize =\n typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n const Icon = ICON_NAME[variant][status];\n\n return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;AAuBA;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}

package/dist/primitive/src/Control/Checkbox.stories.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { Checkbox } from './Checkbox';
 type Story = StoryObj<typeof Checkbox>;
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("../Control/BaseToggle/types").BaseToggleProps, "type" | "variant"> & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("./BaseToggle/types").BaseToggleProps, "type" | "variant"> & {
         variant?: "checkbox" | "check" | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {

package/dist/primitive/src/Control/Radio.stories.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { Radio } from './Radio';
 type Story = StoryObj<typeof Radio>;
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("../Control/BaseToggle/types").BaseToggleProps, "type" | "onToggle" | "variant"> & import("react").RefAttributes<HTMLInputElement>>;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./BaseToggle/types").BaseToggleProps, "type" | "onToggle" | "variant"> & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         inputClassName: {
             table: {

package/dist/primitive/src/Control/Switch/styles.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\n\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n display: inline-flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n size: SwitchProps['size'];\n}>`\n all: unset;\n background-color: ${contents300};\n border-radius: 24px;\n position: relative;\n cursor: pointer;\n\n &:focus-visible {\n outline: solid 2px black;\n outline-offset: 2px;\n }\n &[data-state='checked'] {\n background-color: ${secondary100};\n }\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 36px;\n height: 20px;\n `) \|\|\n (size === 'large' &&\n css`\n width: 64px;\n height: 38px;\n `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n size: SwitchProps['size'];\n}>`\n display: block;\n background-color: ${contents999};\n border-radius: 50%;\n transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n will-change: transform;\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 14px;\n height: 14px;\n transform: translateX(3px);\n &[data-state='checked'] {\n transform: translateX(19px);\n }\n `) \|\|\n (size === 'large' &&\n css`\n width: 28px;\n height: 28px;\n transform: translateX(5px);\n &[data-state='checked'] {\n transform: translateX(31px);\n }\n `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;~~AASAA~~;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;;;"}
1	+ {"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n display: inline-flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n size: SwitchProps['size'];\n}>`\n all: unset;\n background-color: ${contents300};\n border-radius: 24px;\n position: relative;\n cursor: pointer;\n\n &:focus-visible {\n outline: solid 2px black;\n outline-offset: 2px;\n }\n &[data-state='checked'] {\n background-color: ${secondary100};\n }\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 36px;\n height: 20px;\n `) \|\|\n (size === 'large' &&\n css`\n width: 64px;\n height: 38px;\n `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n size: SwitchProps['size'];\n}>`\n display: block;\n background-color: ${contents999};\n border-radius: 50%;\n transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n will-change: transform;\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 14px;\n height: 14px;\n transform: translateX(3px);\n &[data-state='checked'] {\n transform: translateX(19px);\n }\n `) \|\|\n (size === 'large' &&\n css`\n width: 28px;\n height: 28px;\n transform: translateX(5px);\n &[data-state='checked'] {\n transform: translateX(31px);\n }\n `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAQAA;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;;;"}

package/dist/primitive/src/Control/Switch/styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Control/Switch/styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;~~AAK1D~~,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,KAAK,yNAIjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;UACf,WAAW,CAAC,MAAM,CAAC;oLA2B1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;UAChB,WAAW,CAAC,MAAM,CAAC;uLA2B1B,CAAC"}
1	+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Control/Switch/styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,KAAK,yNAIjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;UACf,WAAW,CAAC,MAAM,CAAC;oLA2B1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;UAChB,WAAW,CAAC,MAAM,CAAC;uLA2B1B,CAAC"}

package/dist/primitive/src/Control/Switch/styles.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.esm.js","sources":["../../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\n\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n display: inline-flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n size: SwitchProps['size'];\n}>`\n all: unset;\n background-color: ${contents300};\n border-radius: 24px;\n position: relative;\n cursor: pointer;\n\n &:focus-visible {\n outline: solid 2px black;\n outline-offset: 2px;\n }\n &[data-state='checked'] {\n background-color: ${secondary100};\n }\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 36px;\n height: 20px;\n `) \|\|\n (size === 'large' &&\n css`\n width: 64px;\n height: 38px;\n `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n size: SwitchProps['size'];\n}>`\n display: block;\n background-color: ${contents999};\n border-radius: 50%;\n transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n will-change: transform;\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 14px;\n height: 14px;\n transform: translateX(3px);\n &[data-state='checked'] {\n transform: translateX(19px);\n }\n `) \|\|\n (size === 'large' &&\n css`\n width: 28px;\n height: 28px;\n transform: translateX(5px);\n &[data-state='checked'] {\n transform: translateX(31px);\n }\n `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;AAAa;~~AASAA~~;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;"}
1	+ {"version":3,"file":"styles.esm.js","sources":["../../../../../src/Control/Switch/styles.ts"],"sourcesContent":["'use client';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport styled, { css } from 'styled-components';\nimport { contents300, contents999, secondary100 } from '@remember-web/mixin';\n\nimport type { SwitchProps } from './types';\n\nexport const Label = styled.label`\n display: inline-flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const SwitchRoot = styled(SwitchPrimitive.Root)<{\n size: SwitchProps['size'];\n}>`\n all: unset;\n background-color: ${contents300};\n border-radius: 24px;\n position: relative;\n cursor: pointer;\n\n &:focus-visible {\n outline: solid 2px black;\n outline-offset: 2px;\n }\n &[data-state='checked'] {\n background-color: ${secondary100};\n }\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 36px;\n height: 20px;\n `) \|\|\n (size === 'large' &&\n css`\n width: 64px;\n height: 38px;\n `)};\n`;\n\nexport const SwitchThumb = styled(SwitchPrimitive.Thumb)<{\n size: SwitchProps['size'];\n}>`\n display: block;\n background-color: ${contents999};\n border-radius: 50%;\n transition: transform 0.2s cubic-bezier(0, 0.6, 0, 0.99);\n will-change: transform;\n\n ${({ size }) =>\n (size === 'small' &&\n css`\n width: 14px;\n height: 14px;\n transform: translateX(3px);\n &[data-state='checked'] {\n transform: translateX(19px);\n }\n `) \|\|\n (size === 'large' &&\n css`\n width: 28px;\n height: 28px;\n transform: translateX(5px);\n &[data-state='checked'] {\n transform: translateX(31px);\n }\n `)};\n`;\n"],"names":["Label"],"mappings":";;;;;;AAAa;AAQAA;AAMN;AAiBH;;AAUI;;AAYJ;;AAkBI;;"}

package/dist/primitive/src/Control/Toggle.stories.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { Toggle } from './Toggle';
 type Story = StoryObj<typeof Toggle>;
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("../Control/BaseToggle/types").BaseToggleProps, "type" | "variant"> & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("./BaseToggle/types").BaseToggleProps, "type" | "variant"> & {
         variant: "bookmark" | "favorite";
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {

package/dist/primitive/src/Floating/DropdownMenu/DropdownMenu.stories.d.ts CHANGED Viewed

@@ -16,7 +16,7 @@ declare const meta: {
         }) => import("react/jsx-runtime").JSX.Element;
         Item: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-        }>, import("@remember-web/shared/types").ConvertTransientProps<import("../../Floating/DropdownMenu/styles").StyledDropdownMenuItemProps>>, import("../../Floating/DropdownMenu/styles").StyledDropdownMenuItemProps>>;
+        }>, import("@remember-web/shared/types").ConvertTransientProps<import("@").StyledDropdownMenuItemProps>>, import("@").StyledDropdownMenuItemProps>>;
     };
 };
 export declare const Default: Story;

package/dist/primitive/src/Floating/Tooltip/index.cjs.js.map CHANGED Viewed

	@@ -1 +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 { useState, type PropsWithChildren } from 'react';\n\nimport { isSSR } from '@remember-web/shared/utils/common';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n isLargeSizeProps,\n isStaticTypeProps,\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\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 <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n $zIndex={zIndex}\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 </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","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","$zIndex","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;~~AAkBb~~;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;;AAIvDK;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;AAGZ;;AAED;AAG1B;;"}
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 { useState, type PropsWithChildren } from 'react';\nimport { isSSR } from '@remember-web/shared/utils/common';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n isLargeSizeProps,\n isStaticTypeProps,\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\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 <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n $zIndex={zIndex}\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 </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","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","$zIndex","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;;AAIvDK;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;AAGZ;;AAED;AAG1B;;"}

package/dist/primitive/src/Floating/Tooltip/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;~~AAOzD~~,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,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,2CAsF7C"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMzD,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,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,2CAsF7C"}

package/dist/primitive/src/Floating/Tooltip/index.esm.js.map CHANGED Viewed

	@@ -1 +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 { useState, type PropsWithChildren } from 'react';\n\nimport { isSSR } from '@remember-web/shared/utils/common';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n isLargeSizeProps,\n isStaticTypeProps,\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\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 <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n $zIndex={zIndex}\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 </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","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","$zIndex","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;~~AAkBb~~;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;;AAIvDK;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;AAGZ;;AAED;AAG1B;;"}
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 { useState, type PropsWithChildren } from 'react';\nimport { isSSR } from '@remember-web/shared/utils/common';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n isLargeSizeProps,\n isStaticTypeProps,\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\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 <TooltipContent\n $size={size}\n $maxWidth={maxWidth}\n $backgroundColor={backgroundColor}\n $contentColor={contentColor}\n $textAlign={textAlign}\n $zIndex={zIndex}\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 </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","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","$zIndex","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;;AAIvDK;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;AAGZ;;AAED;AAG1B;;"}

package/dist/primitive/src/Floating/Tooltip/styles.cjs.js.map CHANGED Viewed

	@@ -1 +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 styled, { css, keyframes } from 'styled-components';\n\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\n\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: 'Body1',\n },\n small: {\n padding: '4px 8px',\n typography: 'Body2',\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 TooltipContent = styled(RadixTooltip.Content)<{\n $size: TooltipSize;\n $maxWidth: number \| string;\n $backgroundColor: string;\n $contentColor: string;\n $textAlign?: TooltipTextAlign;\n $zIndex?: number;\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\n ${({\n $size,\n $maxWidth,\n $zIndex,\n $backgroundColor,\n $contentColor,\n $textAlign,\n }) => [\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 z-index: ${$zIndex};\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","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;~~AAcb~~;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;;;"}
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 styled, { css, keyframes } from 'styled-components';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\n\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: 'Body1',\n },\n small: {\n padding: '4px 8px',\n typography: 'Body2',\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 TooltipContent = styled(RadixTooltip.Content)<{\n $size: TooltipSize;\n $maxWidth: number \| string;\n $backgroundColor: string;\n $contentColor: string;\n $textAlign?: TooltipTextAlign;\n $zIndex?: number;\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\n ${({\n $size,\n $maxWidth,\n $zIndex,\n $backgroundColor,\n $contentColor,\n $textAlign,\n }) => [\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 z-index: ${$zIndex};\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","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAab;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;;;"}

package/dist/primitive/src/Floating/Tooltip/styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Floating/Tooltip/styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;~~AAUxD~~,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyB7D,eAAO,MAAM,qBAAqB,gNAMjC,CAAC;AAEF,eAAO,MAAM,cAAc;;;WAClB,WAAW;eACP,MAAM,GAAG,MAAM;sBACR,MAAM;mBACT,MAAM;;;sLAkCtB,CAAC;AAEF,eAAO,MAAM,WAAW,4NAOvB,CAAC"}
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,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyB7D,eAAO,MAAM,qBAAqB,gNAMjC,CAAC;AAEF,eAAO,MAAM,cAAc;;;WAClB,WAAW;eACP,MAAM,GAAG,MAAM;sBACR,MAAM;mBACT,MAAM;;;sLAkCtB,CAAC;AAEF,eAAO,MAAM,WAAW,4NAOvB,CAAC"}

package/dist/primitive/src/Floating/Tooltip/styles.esm.js.map CHANGED Viewed

	@@ -1 +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 styled, { css, keyframes } from 'styled-components';\n\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\n\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: 'Body1',\n },\n small: {\n padding: '4px 8px',\n typography: 'Body2',\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 TooltipContent = styled(RadixTooltip.Content)<{\n $size: TooltipSize;\n $maxWidth: number \| string;\n $backgroundColor: string;\n $contentColor: string;\n $textAlign?: TooltipTextAlign;\n $zIndex?: number;\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\n ${({\n $size,\n $maxWidth,\n $zIndex,\n $backgroundColor,\n $contentColor,\n $textAlign,\n }) => [\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 z-index: ${$zIndex};\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","CloseButton"],"mappings":";;;;;;AAAa;~~AAcb~~;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;"}
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 styled, { css, keyframes } from 'styled-components';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\n\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: 'Body1',\n },\n small: {\n padding: '4px 8px',\n typography: 'Body2',\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 TooltipContent = styled(RadixTooltip.Content)<{\n $size: TooltipSize;\n $maxWidth: number \| string;\n $backgroundColor: string;\n $contentColor: string;\n $textAlign?: TooltipTextAlign;\n $zIndex?: number;\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\n ${({\n $size,\n $maxWidth,\n $zIndex,\n $backgroundColor,\n $contentColor,\n $textAlign,\n }) => [\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 z-index: ${$zIndex};\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","CloseButton"],"mappings":";;;;;;AAAa;AAab;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;"}

package/dist/primitive/src/Floating/index.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ export { default as DropdownMenu } from './DropdownMenu';
 export { default as Popover } from './Popover';
 export { default as Tooltip } from './Tooltip';
 /** GNB에서 의존하기 때문에 export */
-export { StyledDropdownMenuContent, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss, } from './DropdownMenu/styles';
+export type { StyledDropdownMenuItemProps } from './DropdownMenu/styles';
+export { StyledDropdownMenuContent, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss, } from './DropdownMenu/styles';
 export { StyledPopoverContent } from './Popover/styles';
 //# sourceMappingURL=index.d.ts.map

package/dist/primitive/src/Floating/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAE/C,4BAA4B;AAC5B,OAAO,EACL,yBAAyB,EACzB,~~sBAAsB,EACtB,~~yBAAyB,EACzB,8BAA8B,EAC9B,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAE/C,4BAA4B;AAC5B,YAAY,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EACzB,8BAA8B,EAC9B,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/index.cjs.js CHANGED Viewed

@@ -5,9 +5,9 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('react');
-var utils = require('../utils.cjs.js');
-var useMouseEventAway = require('../../../hooks/useMouseEventAway.cjs.js');
 var icon = require('@remember-web/icon');
+var useMouseEventAway = require('../../../hooks/useMouseEventAway.cjs.js');
+var utils = require('../utils.cjs.js');
 var index = require('../Option/index.cjs.js');
 var styles = require('../styles.cjs.js');
 var _const = require('./const.cjs.js');

package/dist/primitive/src/Inputs/Select/DesignedSelect/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useRef,\n useState,\n useId,\n} from 'react';\n\nimport { ~~focusSibling~~ } from '~~../utils~~';\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\nimport { ~~IconArrow2Down,~~ ~~IconArrow2Up~~ } from '~~@remember-web/icon~~';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n SelectDownIcon,\n SelectOption,\n SelectOptionWrapper,\n StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n {\n children,\n value,\n maxHeight = DEFAULT_MAX_HEIGHT_PX,\n placeholder,\n onChange,\n width,\n extendDirection,\n disabled,\n ...props\n }: DesignedSelectInternalProps<Value>,\n ref?: Ref<HTMLDivElement>\n) => {\n const id = useId();\n const [expandedDirection, _setExpandedDirection] =\n useState<ExpandedType>('none');\n const selectContainerRef = useRef<HTMLDivElement \| null>(null);\n const selectListRef = useRef<HTMLUListElement \| null>(null);\n const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n 'pointerdown',\n () => {\n setExpandedDirection('none');\n }\n );\n\n const setExpandedDirection = useCallback(\n (...args: Parameters<typeof _setExpandedDirection>) => {\n if (disabled) {\n return;\n }\n _setExpandedDirection(...args);\n },\n [disabled]\n );\n\n const options = Children.toArray(children)\n .filter(\n (child): child is OptionElementType<Value> =>\n isValidElement(child) && child.type === OptionHolder\n )\n .map(\n ({\n props: { children: _children, value: _value, disabled: _disabled },\n }) => ({\n label: _children,\n value: _value,\n disabled: _disabled,\n })\n );\n\n const selectedOption = options.find((option) => value === option.value);\n\n const isExpanded = expandedDirection !== 'none';\n\n const onSelectOption = (_value: Value, _label: ReactNode) => {\n onChange?.(_value, _label);\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n };\n\n // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n // direction이 props로 전달되었다면 해당 방향으로 확장\n const expandSelectListAtComputedPosition = () => {\n if (extendDirection) {\n setExpandedDirection(extendDirection);\n return;\n }\n\n const selectContainerRect =\n selectContainerRef.current?.getBoundingClientRect();\n\n if (!selectContainerRect) {\n setExpandedDirection('below');\n return;\n }\n\n // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n const currentSelectHeight = Math.min(\n maxHeight,\n options.length * OPTION_ITEM_HEIGHT_PX\n );\n const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n };\n\n const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n (ele) => {\n if (!ele) {\n return;\n }\n\n // 선택한 요소가 없을때는 첫번째 요소에 focus\n if (!value && !ele.previousSibling) {\n setTimeout(() => ele.focus());\n return;\n }\n\n // 선택한 요소가 있다면 해당 요소에 focus\n const optionValue = ele.dataset.optionValue \|\| null;\n if (optionValue === value) {\n setTimeout(() => ele.focus());\n }\n },\n [value]\n );\n\n const keyDownHandler = (e: KeyboardEvent) => {\n const focusedElement = document.activeElement;\n\n if (!focusedElement \|\| !(focusedElement instanceof HTMLElement)) {\n return;\n }\n\n switch (e.key) {\n case 'Tab':\n if (isExpanded) {\n e.preventDefault();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'previous');\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'next');\n break;\n case 'Escape':\n e.preventDefault();\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n\n if (e.target === e.currentTarget) {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n expandSelectListAtComputedPosition();\n }\n\n if (\n focusedElement?.matches('[data-option-value]') &&\n focusedElement instanceof HTMLLIElement &&\n focusedElement.dataset.optionValue\n ) {\n onSelectOption(\n focusedElement.dataset.optionValue as Value,\n focusedElement.innerText\n );\n }\n break;\n default:\n break;\n }\n };\n\n return (\n <SelectContainer\n ref={(el) => {\n if (!el) {\n return;\n }\n selectContainerRef.current = el;\n clickAwayRef.current = el;\n }}\n $width={width}\n tabIndex={disabled ? undefined : 0}\n aria-expanded={isExpanded}\n aria-haspopup=\"listbox\"\n aria-disabled={disabled}\n onKeyDown={keyDownHandler}\n {...props}\n >\n <StyledSelect\n ref={ref}\n expandedDirection={expandedDirection}\n isPlaceholder={!selectedOption && !!placeholder}\n onPointerDown={(e) => {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n\n e.stopPropagation();\n\n expandSelectListAtComputedPosition();\n }}\n >\n {selectedOption?.label \|\| placeholder \|\| 'ㅤ'}\n </StyledSelect>\n <SelectDownIcon>\n {isExpanded ? (\n <IconArrow2Up size=\"small\" />\n ) : (\n <IconArrow2Down size=\"small\" />\n )}\n </SelectDownIcon>\n {isExpanded && (\n <SelectOptionWrapper\n role=\"listbox\"\n aria-activedescendant={\n value != null ? `${id}-select-option-${value}` : undefined\n }\n ref={selectListRef}\n expandedDirection={expandedDirection}\n maxHeight={maxHeight}\n >\n {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n <SelectOption\n id={`${id}-select-option-${optionValue}`}\n role=\"option\"\n key={optionValue}\n tabIndex={_disabled ? undefined : 0}\n aria-selected={optionValue === value}\n aria-disabled={_disabled}\n ref={optionItemRef}\n isSelected={optionValue === value}\n data-option-value={optionValue}\n // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n onMouseMove={(e) => {\n if (e.currentTarget === document.activeElement) {\n return;\n }\n e.currentTarget.focus({\n preventScroll: true,\n });\n }}\n onFocus={() => {\n selectListRef.current?.setAttribute(\n 'aria-activedescendant',\n `${id}-select-option-${optionValue}`\n );\n }}\n onClick={() => {\n if (_disabled) {\n return;\n }\n\n onSelectOption(optionValue, label);\n }}\n >\n {label}\n </SelectOption>\n ))}\n </SelectOptionWrapper>\n )}\n </SelectContainer>\n );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAaK;;;AATDA;;;;;;AAMGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AAA0B;;AAIxBH;AACAR;AACAY;AACAC;AACE;;AAEE;AACF;;AAIAP;;;AAG0C;AAE/BQ;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAR;AACAR;AACAF;AAAqBgB;AAER;;;;;AAGTE;AAEAN;;AAEA;AACAF;;;AAGA;AAAA;AACAS;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useRef,\n useState,\n useId,\n} from 'react';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { focusSibling } from '../utils';\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n SelectDownIcon,\n SelectOption,\n SelectOptionWrapper,\n StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n {\n children,\n value,\n maxHeight = DEFAULT_MAX_HEIGHT_PX,\n placeholder,\n onChange,\n width,\n extendDirection,\n disabled,\n ...props\n }: DesignedSelectInternalProps<Value>,\n ref?: Ref<HTMLDivElement>\n) => {\n const id = useId();\n const [expandedDirection, _setExpandedDirection] =\n useState<ExpandedType>('none');\n const selectContainerRef = useRef<HTMLDivElement \| null>(null);\n const selectListRef = useRef<HTMLUListElement \| null>(null);\n const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n 'pointerdown',\n () => {\n setExpandedDirection('none');\n }\n );\n\n const setExpandedDirection = useCallback(\n (...args: Parameters<typeof _setExpandedDirection>) => {\n if (disabled) {\n return;\n }\n _setExpandedDirection(...args);\n },\n [disabled]\n );\n\n const options = Children.toArray(children)\n .filter(\n (child): child is OptionElementType<Value> =>\n isValidElement(child) && child.type === OptionHolder\n )\n .map(\n ({\n props: { children: _children, value: _value, disabled: _disabled },\n }) => ({\n label: _children,\n value: _value,\n disabled: _disabled,\n })\n );\n\n const selectedOption = options.find((option) => value === option.value);\n\n const isExpanded = expandedDirection !== 'none';\n\n const onSelectOption = (_value: Value, _label: ReactNode) => {\n onChange?.(_value, _label);\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n };\n\n // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n // direction이 props로 전달되었다면 해당 방향으로 확장\n const expandSelectListAtComputedPosition = () => {\n if (extendDirection) {\n setExpandedDirection(extendDirection);\n return;\n }\n\n const selectContainerRect =\n selectContainerRef.current?.getBoundingClientRect();\n\n if (!selectContainerRect) {\n setExpandedDirection('below');\n return;\n }\n\n // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n const currentSelectHeight = Math.min(\n maxHeight,\n options.length * OPTION_ITEM_HEIGHT_PX\n );\n const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n };\n\n const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n (ele) => {\n if (!ele) {\n return;\n }\n\n // 선택한 요소가 없을때는 첫번째 요소에 focus\n if (!value && !ele.previousSibling) {\n setTimeout(() => ele.focus());\n return;\n }\n\n // 선택한 요소가 있다면 해당 요소에 focus\n const optionValue = ele.dataset.optionValue \|\| null;\n if (optionValue === value) {\n setTimeout(() => ele.focus());\n }\n },\n [value]\n );\n\n const keyDownHandler = (e: KeyboardEvent) => {\n const focusedElement = document.activeElement;\n\n if (!focusedElement \|\| !(focusedElement instanceof HTMLElement)) {\n return;\n }\n\n switch (e.key) {\n case 'Tab':\n if (isExpanded) {\n e.preventDefault();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'previous');\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!isExpanded) {\n expandSelectListAtComputedPosition();\n break;\n }\n focusSibling(focusedElement, 'next');\n break;\n case 'Escape':\n e.preventDefault();\n setExpandedDirection('none');\n selectContainerRef.current?.focus();\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n\n if (e.target === e.currentTarget) {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n expandSelectListAtComputedPosition();\n }\n\n if (\n focusedElement?.matches('[data-option-value]') &&\n focusedElement instanceof HTMLLIElement &&\n focusedElement.dataset.optionValue\n ) {\n onSelectOption(\n focusedElement.dataset.optionValue as Value,\n focusedElement.innerText\n );\n }\n break;\n default:\n break;\n }\n };\n\n return (\n <SelectContainer\n ref={(el) => {\n if (!el) {\n return;\n }\n selectContainerRef.current = el;\n clickAwayRef.current = el;\n }}\n $width={width}\n tabIndex={disabled ? undefined : 0}\n aria-expanded={isExpanded}\n aria-haspopup=\"listbox\"\n aria-disabled={disabled}\n onKeyDown={keyDownHandler}\n {...props}\n >\n <StyledSelect\n ref={ref}\n expandedDirection={expandedDirection}\n isPlaceholder={!selectedOption && !!placeholder}\n onPointerDown={(e) => {\n if (isExpanded) {\n setExpandedDirection('none');\n return;\n }\n\n e.stopPropagation();\n\n expandSelectListAtComputedPosition();\n }}\n >\n {selectedOption?.label \|\| placeholder \|\| 'ㅤ'}\n </StyledSelect>\n <SelectDownIcon>\n {isExpanded ? (\n <IconArrow2Up size=\"small\" />\n ) : (\n <IconArrow2Down size=\"small\" />\n )}\n </SelectDownIcon>\n {isExpanded && (\n <SelectOptionWrapper\n role=\"listbox\"\n aria-activedescendant={\n value != null ? `${id}-select-option-${value}` : undefined\n }\n ref={selectListRef}\n expandedDirection={expandedDirection}\n maxHeight={maxHeight}\n >\n {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n <SelectOption\n id={`${id}-select-option-${optionValue}`}\n role=\"option\"\n key={optionValue}\n tabIndex={_disabled ? undefined : 0}\n aria-selected={optionValue === value}\n aria-disabled={_disabled}\n ref={optionItemRef}\n isSelected={optionValue === value}\n data-option-value={optionValue}\n // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n onMouseMove={(e) => {\n if (e.currentTarget === document.activeElement) {\n return;\n }\n e.currentTarget.focus({\n preventScroll: true,\n });\n }}\n onFocus={() => {\n selectListRef.current?.setAttribute(\n 'aria-activedescendant',\n `${id}-select-option-${optionValue}`\n );\n }}\n onClick={() => {\n if (_disabled) {\n return;\n }\n\n onSelectOption(optionValue, label);\n }}\n >\n {label}\n </SelectOption>\n ))}\n </SelectOptionWrapper>\n )}\n </SelectContainer>\n );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAaK;;;AATDA;;;;;;AAMGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AAA0B;;AAIxBH;AACAR;AACAY;AACAC;AACE;;AAEE;AACF;;AAIAP;;;AAG0C;AAE/BQ;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAR;AACAR;AACAF;AAAqBgB;AAER;;;;;AAGTE;AAEAN;;AAEA;AACAF;;;AAGA;AAAA;AACAS;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/index.esm.js CHANGED Viewed

@@ -3,9 +3,9 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useId, useState, useRef, useCallback, Children, isValidElement } from 'react';
-import { focusSibling } from '../utils.esm.js';
-import useMouseEventAway from '../../../hooks/useMouseEventAway.esm.js';
 import { IconArrow2Up, IconArrow2Down } from '@remember-web/icon';
+import useMouseEventAway from '../../../hooks/useMouseEventAway.esm.js';
+import { focusSibling } from '../utils.esm.js';
 import { OptionHolder } from '../Option/index.esm.js';
 import { SelectContainer } from '../styles.esm.js';
 import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.esm.js';