npm - @remember-web/primitive - Versions diffs - 0.0.0-alpha.5 → 0.0.0-alpha.7 - Mend

@remember-web/primitive 0.0.0-alpha.5 → 0.0.0-alpha.7

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 (240) hide show

package/dist/primitive/src/Control/Toggle.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Toggle.mjs","sources":["../../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n HTMLInputElement,\n Omit<BaseToggleProps, 'variant' | 'type'> & {\n variant: 'bookmark' | 'favorite';\n }\n> = ({ variant, ...props }, ref) => (\n <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n & > svg {\n border-radius: 50%;\n }\n`;\n"],"names":["props","ref","variant"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAKhD;;;AAA2C;;"}

package/dist/primitive/src/Floating/DropdownMenu/{DropdownMenuSection.js → DropdownMenuSection.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { StyledDropdownMenuSection, StyledDropdownMenuSectionTitle } from './styles.js';
+import { StyledDropdownMenuSection, StyledDropdownMenuSectionTitle } from './styles.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 var _excluded = ["title", "children"];
@@ -18,4 +18,4 @@ var DropdownMenuSection = function DropdownMenuSection(_ref) {
 };
 export { DropdownMenuSection };
-//# sourceMappingURL=DropdownMenuSection.js.map
+//# sourceMappingURL=DropdownMenuSection.mjs.map

package/dist/primitive/src/Floating/DropdownMenu/DropdownMenuSection.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DropdownMenuSection.mjs","sources":["../../../../../src/Floating/DropdownMenu/DropdownMenuSection.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n StyledDropdownMenuSectionTitle,\n StyledDropdownMenuSection,\n} from '@/Floating/DropdownMenu/styles';\nimport type { GetStyledComponentProps } from '@remember-web/shared/types/styles';\n\ntype DropdownMenuSectionProps<As> = GetStyledComponentProps<\n typeof StyledDropdownMenuSection,\n As\n> & {\n title?: ReactNode;\n};\n\nexport const DropdownMenuSection = <As,>({\n title,\n children,\n ...props\n}: DropdownMenuSectionProps<As>) => (\n <StyledDropdownMenuSection {...props}>\n {title && (\n <StyledDropdownMenuSectionTitle>{title}</StyledDropdownMenuSectionTitle>\n )}\n {children}\n </StyledDropdownMenuSection>\n);\n"],"names":["DropdownMenuSection","_ref","title","children","props","_objectWithoutProperties","_excluded","_jsxs","StyledDropdownMenuSection","_objectSpread","_jsx","StyledDropdownMenuSectionTitle"],"mappings":";;;;;;;;IAeaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;AACLC,IAAAA,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;EAAA,oBAERC,IAAA,CAACC,yBAAyB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;AAAAD,IAAAA,QAAA,EACjCD,CAAAA,KAAK,iBACJQ,GAAA,CAACC,8BAA8B,EAAA;AAAAR,MAAAA,QAAA,EAAED,KAAAA;KAAsC,CACxE,EACAC,QAAQ,CAAA;AAAA,GAAA,CACgB,CAAC,CAAA;AAAA;;;;"}

package/dist/primitive/src/Floating/DropdownMenu/{index.js → index.mjs} RENAMED Viewed

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import * as RadixPopover from '@radix-ui/react-popover';
-import { StyledDropdownMenuContent, StyledDropdownMenuItem } from './styles.js';
-import Popover from '../Popover/index.js';
-import { DropdownMenuSection } from './DropdownMenuSection.js';
+import { StyledDropdownMenuContent, StyledDropdownMenuItem } from './styles.mjs';
+import Popover from '../Popover/index.mjs';
+import { DropdownMenuSection } from './DropdownMenuSection.mjs';
 import { jsx } from 'react/jsx-runtime';
 var _excluded = ["isInsideCloseable"];
@@ -33,4 +33,4 @@ var DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {
 });
 export { DropdownMenu as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Floating/DropdownMenu/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","sources":["../../../../../src/Floating/DropdownMenu/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\n\nimport type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';\nimport {\n StyledDropdownMenuContent,\n StyledDropdownMenuItem,\n} from '@/Floating/DropdownMenu/styles';\nimport Popover from '@/Floating/Popover';\n\nimport { DropdownMenuSection } from './DropdownMenuSection';\n\nexport interface DropdownContentProps extends PopoverContentProps {}\nexport interface DropdownMenuProps extends PopoverProps {}\n/**\n * Popover에 DropdownMenu Parts들을 추가한 컴포넌트\n * @see Popover\n */\nconst DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {\n Content: ({ isInsideCloseable = false, ...props }: DropdownContentProps) =>\n isInsideCloseable ? (\n <RadixPopover.Close asChild>\n <StyledDropdownMenuContent {...props} />\n </RadixPopover.Close>\n ) : (\n <StyledDropdownMenuContent {...props} />\n ),\n Arrow: Popover.Arrow,\n Trigger: Popover.Trigger,\n Portal: Popover.Portal,\n Anchor: Popover.Anchor,\n Close: Popover.Close,\n Section: DropdownMenuSection,\n Item: StyledDropdownMenuItem,\n});\n\nexport default DropdownMenu;\n"],"names":["DropdownMenu","Object","assign","RadixPopover","Root","bind","Content","_ref","_ref$isInsideCloseabl","isInsideCloseable","props","_objectWithoutProperties","_excluded","_jsx","Close","asChild","children","StyledDropdownMenuContent","_objectSpread","Arrow","Popover","Trigger","Portal","Anchor","Section","DropdownMenuSection","Item","StyledDropdownMenuItem"],"mappings":";;;;;;;;;;;AAaA;AACA;AACA;AACA;AACA,IAAMA,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACC,YAAY,CAACC,IAAI,CAACC,IAAI,CAAC,IAAI,CAAC,EAAE;EAC/DC,OAAO,EAAE,SAAAA,OAAAA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAAC,qBAAA,GAAAD,IAAA,CAAGE,iBAAiB;AAAjBA,MAAAA,iBAAiB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;AAAKE,MAAAA,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,IAAA,OAC7CH,iBAAiB,gBACfI,GAAA,CAACV,YAAY,CAACW,KAAK,EAAA;MAACC,OAAO,EAAA,IAAA;MAAAC,QAAA,eACzBH,GAAA,CAACI,yBAAyB,EAAAC,aAAA,CAAA,EAAA,EAAKR,KAAK,CAAG,CAAA;KACrB,CAAC,gBAErBG,GAAA,CAACI,yBAAyB,EAAAC,aAAA,CAAA,EAAA,EAAKR,KAAK,CAAG,CACxC,CAAA;AAAA,GAAA;EACHS,KAAK,EAAEC,OAAO,CAACD,KAAK;EACpBE,OAAO,EAAED,OAAO,CAACC,OAAO;EACxBC,MAAM,EAAEF,OAAO,CAACE,MAAM;EACtBC,MAAM,EAAEH,OAAO,CAACG,MAAM;EACtBT,KAAK,EAAEM,OAAO,CAACN,KAAK;AACpBU,EAAAA,OAAO,EAAEC,mBAAmB;AAC5BC,EAAAA,IAAI,EAAEC,sBAAAA;AACR,CAAC;;;;"}

package/dist/primitive/src/Floating/DropdownMenu/styles.cjs CHANGED Viewed

@@ -2,7 +2,6 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
 var styles = require('../Popover/styles.cjs');
@@ -11,22 +10,23 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var _excluded = ["active", "disabled"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var dropdownMenuItemCSS = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n\n  ", ";\n  color: ", ";\n  transition: background-color 0.07s;\n  border-radius: unset;\n  text-decoration: none;\n"])), mixin.getTypographyStyles('Body1'), mixin.contents000);
-var DropdownMenuItemHoverCSS = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  &:hover,\n  &:focus-visible {\n    background-color: ", ";\n  }\n"])), mixin.bg200);
-var DropdownMenuItemDisabledCSS = styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  pointer-events: none;\n"])));
-var StyledDropdownMenuSectionTitle = styled__default.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  ", ";\n  ", ";\n  color: ", ";\n"])), dropdownMenuItemCSS, mixin.getTypographyStyles('Body2_M'), mixin.contents200);
+var dropdownMenuItemCSS = styled.css(["display:flex;align-items:center;padding:8px 12px;", ";color:", ";transition:background-color 0.07s;border-radius:unset;text-decoration:none;"], mixin.getTypographyStyles('Body1'), mixin.contents000);
+var DropdownMenuItemHoverCSS = styled.css(["&:hover,&:focus-visible{background-color:", ";}"], mixin.bg200);
+var DropdownMenuItemDisabledCSS = styled.css(["pointer-events:none;"]);
+var StyledDropdownMenuSectionTitle = styled__default.default.span.withConfig({
+  displayName: "styles__StyledDropdownMenuSectionTitle",
+  componentId: "sc-27u5hi-0"
+})(["", ";", ";color:", ";"], dropdownMenuItemCSS, mixin.getTypographyStyles('Body2_M'), mixin.contents200);
 var getDropdownMenuItemCss = function getDropdownMenuItemCss(_ref) {
   var $active = _ref.$active,
     $disabled = _ref.$disabled;
   return styled.css(function () {
-    return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n      font-weight: ", ";\n\n      &:focus-visible {\n        outline: none;\n      }\n    "])), $active ? 600 : 400)];
+    return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, styled.css(["font-weight:", ";&:focus-visible{outline:none;}"], $active ? 600 : 400)];
   });
 };
 var StyledDropdownMenuItem = styled__default.default.div.attrs(function (_ref2) {
@@ -38,9 +38,18 @@ var StyledDropdownMenuItem = styled__default.default.div.attrs(function (_ref2)
     $active: active,
     $disabled: disabled
   }, props);
+}).withConfig({
+  displayName: "styles__StyledDropdownMenuItem",
+  componentId: "sc-27u5hi-1"
 })(getDropdownMenuItemCss);
-var StyledDropdownMenuSection = styled__default.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default([""])));
-var StyledDropdownMenuContent = styled__default.default(styles.StyledPopoverContent)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  ", " {\n    border-bottom: 1px solid ", ";\n  }\n  ", ":last-child {\n    border-bottom: none;\n  }\n"])), StyledDropdownMenuSection, mixin.divider, StyledDropdownMenuSection);
+var StyledDropdownMenuSection = styled__default.default.div.withConfig({
+  displayName: "styles__StyledDropdownMenuSection",
+  componentId: "sc-27u5hi-2"
+})([""]);
+var StyledDropdownMenuContent = styled__default.default(styles.StyledPopoverContent).withConfig({
+  displayName: "styles__StyledDropdownMenuContent",
+  componentId: "sc-27u5hi-3"
+})(["", "{border-bottom:1px solid ", ";}", ":last-child{border-bottom:none;}"], StyledDropdownMenuSection, mixin.divider, StyledDropdownMenuSection);
 StyledDropdownMenuItem.defaultProps = {};
 exports.DropdownMenuItemDisabledCSS = DropdownMenuItemDisabledCSS;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs","sources":["../../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { bg200, contents000, contents200, divider } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\nimport { StyledPopoverContent } from '@/Floating/Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ${getTypographyStyles('Body1')};\n color: ${contents000};\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n`;\n\nexport const DropdownMenuItemHoverCSS = css`\n &:hover,\n &:focus-visible {\n background-color: ${bg200};\n }\n`;\n\nexport const DropdownMenuItemDisabledCSS = css`\n pointer-events: none;\n`;\n\nexport const StyledDropdownMenuSectionTitle = styled.span`\n ${dropdownMenuItemCSS};\n ${getTypographyStyles('Body2_M')};\n color: ${contents200};\n`;\n\nexport type DropdownMenuItemProps =\n ConvertTransientProps<StyledDropdownMenuItemProps>;\n\nexport type StyledDropdownMenuItemProps = {\n $active?: boolean;\n $disabled?: boolean;\n};\n\nexport const getDropdownMenuItemCss = ({\n $active,\n $disabled,\n}: StyledDropdownMenuItemProps) =>\n css(() => [\n dropdownMenuItemCSS,\n !$active && DropdownMenuItemHoverCSS,\n $disabled && DropdownMenuItemDisabledCSS,\n css`\n font-weight: ${$active ? 600 : 400};\n\n &:focus-visible {\n outline: none;\n }\n `,\n ]);\n\nexport const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(\n ({ active, disabled, ...props }) => ({\n tabIndex: active ? -1 : undefined,\n $active: active,\n $disabled: disabled,\n ...props,\n })\n)<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);\n\nexport const StyledDropdownMenuSection = styled.div``;\n\nexport const StyledDropdownMenuContent = styled(StyledPopoverContent)`\n ${StyledDropdownMenuSection} {\n border-bottom: 1px solid ${divider};\n }\n ${StyledDropdownMenuSection}:last-child {\n border-bottom: none;\n }\n`;\nStyledDropdownMenuItem.defaultProps = {};\n"],"names":["dropdownMenuItemCSS","css","~~_templateObject","_taggedTemplateLiteral","~~getTypographyStyles","contents000","DropdownMenuItemHoverCSS","~~_templateObject2~~","~~bg200~~","~~DropdownMenuItemDisabledCSS~~","~~_templateObject3~~","~~StyledDropdownMenuSectionTitle~~","~~styled~~","~~span~~","~~_templateObject4~~","contents200","getDropdownMenuItemCss","_ref","$active","$disabled","~~_templateObject5","~~StyledDropdownMenuItem","div","attrs","_ref2","active","disabled","props","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","undefined","StyledDropdownMenuSection","~~_templateObject6","~~StyledDropdownMenuContent","StyledPopoverContent","~~_templateObject7","~~divider","defaultProps"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;IAOaA~~,mBAAmB,GAAGC,UAAG,~~CAAAC~~,~~eAAA~~,~~KAAAA~~,~~eAAA~~,~~GAAAC~~,~~uCAAA~~,~~gMAKlCC~~,yBAAmB,CAAC,OAAO,CAAC,EACrBC,iBAAW,EAIrB;~~AAEYC~~,~~IAAAA,~~wBAAwB,~~GAAGL~~,UAAG,~~CAAAM~~,~~gBAAA~~,~~KAAAA~~,~~gBAAA~~,~~GAAAJ~~,~~uCAAA~~,~~CAGnBK~~,~~CAAAA,2DAAAA,EAAAA,UAAAA,CAAAA,CAAAA,CAAAA,EAAAA,~~WAAK,EAE5B;~~AAEM~~,~~IAAMC~~,2BAA2B,~~GAAGR~~,UAAG,~~CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,uCAAA,~~CAE7C,CAAA,~~6BAAA~~,CAAA,~~CAAA,CAAA,~~EAAA;~~AAEM~~,~~IAAMQ,~~8BAA8B,GAAGC,uBAAM,CAACC,IAAI,CAAAC,~~gBAAA~~,~~KAAAA~~,~~gBAAA~~,~~GAAAX~~,~~uCAAA~~,~~CAAA~~,~~CAAA~~,~~MAAA~~,~~EAAA~~,~~OAAA~~,~~EAAA~~,~~cAAA~~,~~EAAA~~,~~KAAA~~,~~CAAA~~,~~CAAA~~,~~CAAA~~,~~EACrDH~~,mBAAmB,~~EACnBI~~,yBAAmB,CAAC,SAAS,CAAC,EACvBW,iBAAW,EACrB;IAUYC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IACjCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAAA,EAAA,~~OAETlB~~,UAAG,CAAC,YAAA;IAAA,OAAM,CACRD,mBAAmB,EACnB,~~CAACkB~~,OAAO,IAAIZ,wBAAwB,EACpCa,SAAS,~~IAAIV~~,2BAA2B,~~EACxCR~~,UAAG,~~CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,uCAAA,~~CACce,CAAAA,~~uBAAAA~~,EAAAA,~~qEAAAA~~,CAAAA,~~CAAAA,CAAAA,~~EAAAA,OAAO,GAAG,GAAG,GAAG,GAAG,CAMrC,CAAA,CAAA;GAAC,CAAA,CAAA;AAAA,EAAA;AAEG,~~IAAMG~~,sBAAsB,~~GAAGT~~,uBAAM,~~CAACU~~,GAAG,CAACC,KAAK,CACpD,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;AAAKC,IAAAA,KAAK,GAAAC,yCAAA,CAAAJ,KAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,EAAA,OAAAC,aAAA,CAAA;AAC3BC,IAAAA,QAAQ,EAAEN,MAAM,GAAG,CAAC,CAAC,GAAGO,SAAS;~~AACjCd~~,IAAAA,OAAO,~~EAAEO~~,MAAM;~~AACfN~~,IAAAA,SAAS,~~EAAEO~~,QAAAA;AAAQ,GAAA,EAChBC,KAAK,CAAA,CAAA;AAAA,CAEZ,CAAC,~~CAA8BX~~,sBAAsB,EAAC;~~AAEzCiB~~,~~IAAAA,~~yBAAyB,~~GAAGrB~~,uBAAM,~~CAACU~~,GAAG,~~CAAAY~~,~~gBAAA~~,~~KAAAA~~,~~gBAAA~~,~~GAAA/B~~,~~uCAAA~~,CAAE,CAAA,~~EAAA,~~CAAA,CAAA,CAAA,EAAA;~~IAExCgC~~,yBAAyB,GAAGvB,uBAAM,CAACwB,2BAAoB,CAAC,~~CAAAC~~,~~gBAAA~~,~~KAAAA~~,~~gBAAA~~,~~GAAAlC~~,~~uCAAA~~,~~CACjE8B~~,~~CAAAA~~,~~MAAAA~~,~~EAAAA~~,~~mCAAAA~~,~~EAAAA~~,~~YAAAA~~,~~EAAAA~~,~~gDAAAA~~,~~CAAAA~~,~~CAAAA~~,~~CAAAA~~,~~EAAAA~~,yBAAyB,~~EACEK~~,aAAO,~~EAElCL~~,yBAAyB,EAG5B;AACDZ,sBAAsB,~~CAACkB~~,YAAY,GAAG,EAAE;;;;;;;;;;;"}
1	+ {"version":3,"file":"styles.cjs","sources":["../../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { bg200, contents000, contents200, divider } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\nimport { StyledPopoverContent } from '@/Floating/Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ${getTypographyStyles('Body1')};\n color: ${contents000};\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n`;\n\nexport const DropdownMenuItemHoverCSS = css`\n &:hover,\n &:focus-visible {\n background-color: ${bg200};\n }\n`;\n\nexport const DropdownMenuItemDisabledCSS = css`\n pointer-events: none;\n`;\n\nexport const StyledDropdownMenuSectionTitle = styled.span`\n ${dropdownMenuItemCSS};\n ${getTypographyStyles('Body2_M')};\n color: ${contents200};\n`;\n\nexport type DropdownMenuItemProps =\n ConvertTransientProps<StyledDropdownMenuItemProps>;\n\nexport type StyledDropdownMenuItemProps = {\n $active?: boolean;\n $disabled?: boolean;\n};\n\nexport const getDropdownMenuItemCss = ({\n $active,\n $disabled,\n}: StyledDropdownMenuItemProps) =>\n css(() => [\n dropdownMenuItemCSS,\n !$active && DropdownMenuItemHoverCSS,\n $disabled && DropdownMenuItemDisabledCSS,\n css`\n font-weight: ${$active ? 600 : 400};\n\n &:focus-visible {\n outline: none;\n }\n `,\n ]);\n\nexport const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(\n ({ active, disabled, ...props }) => ({\n tabIndex: active ? -1 : undefined,\n $active: active,\n $disabled: disabled,\n ...props,\n })\n)<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);\n\nexport const StyledDropdownMenuSection = styled.div``;\n\nexport const StyledDropdownMenuContent = styled(StyledPopoverContent)`\n ${StyledDropdownMenuSection} {\n border-bottom: 1px solid ${divider};\n }\n ${StyledDropdownMenuSection}:last-child {\n border-bottom: none;\n }\n`;\nStyledDropdownMenuItem.defaultProps = {};\n"],"names":["dropdownMenuItemCSS","css","getTypographyStyles","contents000","DropdownMenuItemHoverCSS","bg200","DropdownMenuItemDisabledCSS","StyledDropdownMenuSectionTitle","styled","span","withConfig","displayName","componentId","contents200","getDropdownMenuItemCss","_ref","$active","$disabled","StyledDropdownMenuItem","div","attrs","_ref2","active","disabled","props","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","undefined","StyledDropdownMenuSection","StyledDropdownMenuContent","StyledPopoverContent","divider","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AAOO,IAAMA,mBAAmB,GAAGC,UAAG,CAAA,CAAA,mDAAA,EAAA,SAAA,EAAA,8EAAA,CAAA,EAKlCC,yBAAmB,CAAC,OAAO,CAAC,EACrBC,iBAAW,EAIrB;IAEYC,wBAAwB,GAAGH,UAAG,CAAA,CAAA,2CAAA,EAAA,IAAA,CAAA,EAGnBI,WAAK,EAE5B;AAEYC,IAAAA,2BAA2B,GAAGL,UAAG,CAE7C,CAAA,sBAAA,CAAA,EAAA;IAEYM,8BAA8B,GAAGC,uBAAM,CAACC,IAAI,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CACrDZ,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,GAAAA,EAAAA,SAAAA,EAAAA,GAAAA,CAAAA,EAAAA,mBAAmB,EACnBE,yBAAmB,CAAC,SAAS,CAAC,EACvBW,iBAAW,EACrB;IAUYC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IACjCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAAA,EAAA,OAEThB,UAAG,CAAC,YAAA;AAAA,IAAA,OAAM,CACRD,mBAAmB,EACnB,CAACgB,OAAO,IAAIZ,wBAAwB,EACpCa,SAAS,IAAIX,2BAA2B,EACxCL,UAAG,CACce,CAAAA,cAAAA,EAAAA,iCAAAA,CAAAA,EAAAA,OAAO,GAAG,GAAG,GAAG,GAAG,CAMrC,CAAA,CAAA;GAAC,CAAA,CAAA;AAAA,EAAA;AAEG,IAAME,sBAAsB,GAAGV,uBAAM,CAACW,GAAG,CAACC,KAAK,CACpD,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;AAAKC,IAAAA,KAAK,GAAAC,yCAAA,CAAAJ,KAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,EAAA,OAAAC,aAAA,CAAA;AAC3BC,IAAAA,QAAQ,EAAEN,MAAM,GAAG,CAAC,CAAC,GAAGO,SAAS;AACjCb,IAAAA,OAAO,EAAEM,MAAM;AACfL,IAAAA,SAAS,EAAEM,QAAAA;AAAQ,GAAA,EAChBC,KAAK,CAAA,CAAA;AAAA,CAEZ,CAAC,CAAAd,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAA8BE,sBAAsB,EAAC;IAEzCgB,yBAAyB,GAAGtB,uBAAM,CAACW,GAAG,CAAAT,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AAE9C,IAAMmB,yBAAyB,GAAGvB,uBAAM,CAACwB,2BAAoB,CAAC,CAAAtB,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,2BAAA,EAAA,IAAA,EAAA,kCAAA,CAAA,EACjEkB,yBAAyB,EACEG,aAAO,EAElCH,yBAAyB,EAG5B;AACDZ,sBAAsB,CAACgB,YAAY,GAAG,EAAE;;;;;;;;;;;"}

package/dist/primitive/src/Floating/DropdownMenu/{styles.js → styles.mjs} RENAMED Viewed

@@ -1,23 +1,24 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled, { css } from 'styled-components';
 import { getTypographyStyles, contents000, bg200, contents200, divider } from '@remember-web/mixin';
-import { StyledPopoverContent } from '../Popover/styles.js';
+import { StyledPopoverContent } from '../Popover/styles.mjs';
 var _excluded = ["active", "disabled"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var dropdownMenuItemCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n\n  ", ";\n  color: ", ";\n  transition: background-color 0.07s;\n  border-radius: unset;\n  text-decoration: none;\n"])), getTypographyStyles('Body1'), contents000);
-var DropdownMenuItemHoverCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover,\n  &:focus-visible {\n    background-color: ", ";\n  }\n"])), bg200);
-var DropdownMenuItemDisabledCSS = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
-var StyledDropdownMenuSectionTitle = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  color: ", ";\n"])), dropdownMenuItemCSS, getTypographyStyles('Body2_M'), contents200);
+var dropdownMenuItemCSS = css(["display:flex;align-items:center;padding:8px 12px;", ";color:", ";transition:background-color 0.07s;border-radius:unset;text-decoration:none;"], getTypographyStyles('Body1'), contents000);
+var DropdownMenuItemHoverCSS = css(["&:hover,&:focus-visible{background-color:", ";}"], bg200);
+var DropdownMenuItemDisabledCSS = css(["pointer-events:none;"]);
+var StyledDropdownMenuSectionTitle = styled.span.withConfig({
+  displayName: "styles__StyledDropdownMenuSectionTitle",
+  componentId: "sc-27u5hi-0"
+})(["", ";", ";color:", ";"], dropdownMenuItemCSS, getTypographyStyles('Body2_M'), contents200);
 var getDropdownMenuItemCss = function getDropdownMenuItemCss(_ref) {
   var $active = _ref.$active,
     $disabled = _ref.$disabled;
   return css(function () {
-    return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      font-weight: ", ";\n\n      &:focus-visible {\n        outline: none;\n      }\n    "])), $active ? 600 : 400)];
+    return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, css(["font-weight:", ";&:focus-visible{outline:none;}"], $active ? 600 : 400)];
   });
 };
 var StyledDropdownMenuItem = styled.div.attrs(function (_ref2) {
@@ -29,10 +30,19 @@ var StyledDropdownMenuItem = styled.div.attrs(function (_ref2) {
     $active: active,
     $disabled: disabled
   }, props);
+}).withConfig({
+  displayName: "styles__StyledDropdownMenuItem",
+  componentId: "sc-27u5hi-1"
 })(getDropdownMenuItemCss);
-var StyledDropdownMenuSection = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
-var StyledDropdownMenuContent = styled(StyledPopoverContent)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", " {\n    border-bottom: 1px solid ", ";\n  }\n  ", ":last-child {\n    border-bottom: none;\n  }\n"])), StyledDropdownMenuSection, divider, StyledDropdownMenuSection);
+var StyledDropdownMenuSection = styled.div.withConfig({
+  displayName: "styles__StyledDropdownMenuSection",
+  componentId: "sc-27u5hi-2"
+})([""]);
+var StyledDropdownMenuContent = styled(StyledPopoverContent).withConfig({
+  displayName: "styles__StyledDropdownMenuContent",
+  componentId: "sc-27u5hi-3"
+})(["", "{border-bottom:1px solid ", ";}", ":last-child{border-bottom:none;}"], StyledDropdownMenuSection, divider, StyledDropdownMenuSection);
 StyledDropdownMenuItem.defaultProps = {};
 export { DropdownMenuItemDisabledCSS, DropdownMenuItemHoverCSS, StyledDropdownMenuContent, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss };
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Floating/DropdownMenu/styles.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.mjs","sources":["../../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { bg200, contents000, contents200, divider } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared/types/styles';\nimport { StyledPopoverContent } from '@/Floating/Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ${getTypographyStyles('Body1')};\n color: ${contents000};\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n`;\n\nexport const DropdownMenuItemHoverCSS = css`\n &:hover,\n &:focus-visible {\n background-color: ${bg200};\n }\n`;\n\nexport const DropdownMenuItemDisabledCSS = css`\n pointer-events: none;\n`;\n\nexport const StyledDropdownMenuSectionTitle = styled.span`\n ${dropdownMenuItemCSS};\n ${getTypographyStyles('Body2_M')};\n color: ${contents200};\n`;\n\nexport type DropdownMenuItemProps =\n ConvertTransientProps<StyledDropdownMenuItemProps>;\n\nexport type StyledDropdownMenuItemProps = {\n $active?: boolean;\n $disabled?: boolean;\n};\n\nexport const getDropdownMenuItemCss = ({\n $active,\n $disabled,\n}: StyledDropdownMenuItemProps) =>\n css(() => [\n dropdownMenuItemCSS,\n !$active && DropdownMenuItemHoverCSS,\n $disabled && DropdownMenuItemDisabledCSS,\n css`\n font-weight: ${$active ? 600 : 400};\n\n &:focus-visible {\n outline: none;\n }\n `,\n ]);\n\nexport const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(\n ({ active, disabled, ...props }) => ({\n tabIndex: active ? -1 : undefined,\n $active: active,\n $disabled: disabled,\n ...props,\n })\n)<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);\n\nexport const StyledDropdownMenuSection = styled.div``;\n\nexport const StyledDropdownMenuContent = styled(StyledPopoverContent)`\n ${StyledDropdownMenuSection} {\n border-bottom: 1px solid ${divider};\n }\n ${StyledDropdownMenuSection}:last-child {\n border-bottom: none;\n }\n`;\nStyledDropdownMenuItem.defaultProps = {};\n"],"names":["dropdownMenuItemCSS","css","getTypographyStyles","contents000","DropdownMenuItemHoverCSS","bg200","DropdownMenuItemDisabledCSS","StyledDropdownMenuSectionTitle","styled","span","withConfig","displayName","componentId","contents200","getDropdownMenuItemCss","_ref","$active","$disabled","StyledDropdownMenuItem","div","attrs","_ref2","active","disabled","props","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","undefined","StyledDropdownMenuSection","StyledDropdownMenuContent","StyledPopoverContent","divider","defaultProps"],"mappings":";;;;;;;;;AAOO,IAAMA,mBAAmB,GAAGC,GAAG,CAAA,CAAA,mDAAA,EAAA,SAAA,EAAA,8EAAA,CAAA,EAKlCC,mBAAmB,CAAC,OAAO,CAAC,EACrBC,WAAW,EAIrB;IAEYC,wBAAwB,GAAGH,GAAG,CAAA,CAAA,2CAAA,EAAA,IAAA,CAAA,EAGnBI,KAAK,EAE5B;AAEYC,IAAAA,2BAA2B,GAAGL,GAAG,CAE7C,CAAA,sBAAA,CAAA,EAAA;IAEYM,8BAA8B,GAAGC,MAAM,CAACC,IAAI,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CACrDZ,CAAAA,CAAAA,CAAAA,EAAAA,EAAAA,GAAAA,EAAAA,SAAAA,EAAAA,GAAAA,CAAAA,EAAAA,mBAAmB,EACnBE,mBAAmB,CAAC,SAAS,CAAC,EACvBW,WAAW,EACrB;IAUYC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IACjCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAAA,EAAA,OAEThB,GAAG,CAAC,YAAA;AAAA,IAAA,OAAM,CACRD,mBAAmB,EACnB,CAACgB,OAAO,IAAIZ,wBAAwB,EACpCa,SAAS,IAAIX,2BAA2B,EACxCL,GAAG,CACce,CAAAA,cAAAA,EAAAA,iCAAAA,CAAAA,EAAAA,OAAO,GAAG,GAAG,GAAG,GAAG,CAMrC,CAAA,CAAA;GAAC,CAAA,CAAA;AAAA,EAAA;AAEG,IAAME,sBAAsB,GAAGV,MAAM,CAACW,GAAG,CAACC,KAAK,CACpD,UAAAC,KAAA,EAAA;AAAA,EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;AAAKC,IAAAA,KAAK,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,EAAA,OAAAC,aAAA,CAAA;AAC3BC,IAAAA,QAAQ,EAAEN,MAAM,GAAG,CAAC,CAAC,GAAGO,SAAS;AACjCb,IAAAA,OAAO,EAAEM,MAAM;AACfL,IAAAA,SAAS,EAAEM,QAAAA;AAAQ,GAAA,EAChBC,KAAK,CAAA,CAAA;AAAA,CAEZ,CAAC,CAAAd,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAA8BE,sBAAsB,EAAC;IAEzCgB,yBAAyB,GAAGtB,MAAM,CAACW,GAAG,CAAAT,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AAE9C,IAAMmB,yBAAyB,GAAGvB,MAAM,CAACwB,oBAAoB,CAAC,CAAAtB,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,2BAAA,EAAA,IAAA,EAAA,kCAAA,CAAA,EACjEkB,yBAAyB,EACEG,OAAO,EAElCH,yBAAyB,EAG5B;AACDZ,sBAAsB,CAACgB,YAAY,GAAG,EAAE;;;;"}

package/dist/primitive/src/Floating/Popover/{index.js → index.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as RadixPopover from '@radix-ui/react-popover';
-import { StyledPopoverContent } from './styles.js';
+import { StyledPopoverContent } from './styles.mjs';
 import { jsx } from 'react/jsx-runtime';
 var _excluded = ["isInsideCloseable"];
@@ -37,4 +37,4 @@ var Popover = Object.assign(RadixPopover.Root.bind(null), {
 });
 export { Popover as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Floating/Popover/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","sources":["../../../../../src/Floating/Popover/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\n\nimport { StyledPopoverContent } from '@/Floating/Popover/styles';\n\nconst { Trigger, Anchor, Close, PopoverPortal } = RadixPopover;\n\nexport type PopoverProps = RadixPopover.PopoverProps;\nexport type PopoverContentProps = RadixPopover.PopoverContentProps & {\n isInsideCloseable?: boolean;\n};\n\n/**\n * @see https://www.radix-ui.com/docs/primitives/components/popover\n */\n\nconst Popover = Object.assign(RadixPopover.Root.bind(null), {\n Trigger(props: RadixPopover.PopoverTriggerProps) {\n return <Trigger asChild {...props} />;\n },\n Anchor,\n Portal: PopoverPortal,\n Close,\n Arrow: RadixPopover.Arrow,\n Content: ({ isInsideCloseable = false, ...props }: PopoverContentProps) =>\n isInsideCloseable ? (\n <RadixPopover.Close asChild>\n <StyledPopoverContent {...props} />\n </RadixPopover.Close>\n ) : (\n <StyledPopoverContent {...props} />\n ),\n});\n\nexport default Popover;\n"],"names":["Trigger","RadixPopover","Anchor","Close","PopoverPortal","Popover","Object","assign","Root","bind","props","_jsx","_Trigger","_objectSpread","asChild","Portal","Arrow","Content","_ref","_ref$isInsideCloseabl","isInsideCloseable","_objectWithoutProperties","_excluded","children","StyledPopoverContent"],"mappings":";;;;;;;;;AAIA,IAAQA,QAAO,GAAmCC,YAAY,CAAtDD,OAAO;EAAEE,MAAM,GAA2BD,YAAY,CAA7CC,MAAM;EAAEC,KAAK,GAAoBF,YAAY,CAArCE,KAAK;EAAEC,aAAa,GAAKH,YAAY,CAA9BG,aAAa,CAAA;AAO7C;AACA;AACA;;AAEA,IAAMC,OAAO,GAAGC,MAAM,CAACC,MAAM,CAACN,YAAY,CAACO,IAAI,CAACC,IAAI,CAAC,IAAI,CAAC,EAAE;EAC1DT,OAAO,EAAA,SAAAA,OAACU,CAAAA,KAAuC,EAAE;AAC/C,IAAA,oBAAOC,GAAA,CAACC,QAAO,EAAAC,aAAA,CAAA;MAACC,OAAO,EAAA,IAAA;KAAKJ,EAAAA,KAAK,CAAG,CAAC,CAAA;GACtC;AACDR,EAAAA,MAAM,EAANA,MAAM;AACNa,EAAAA,MAAM,EAAEX,aAAa;AACrBD,EAAAA,KAAK,EAALA,KAAK;EACLa,KAAK,EAAEf,YAAY,CAACe,KAAK;EACzBC,OAAO,EAAE,SAAAA,OAAAA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAAC,qBAAA,GAAAD,IAAA,CAAGE,iBAAiB;AAAjBA,MAAAA,iBAAiB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,qBAAA;AAAKT,MAAAA,KAAK,GAAAW,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;AAAA,IAAA,OAC7CF,iBAAiB,gBACfT,GAAA,CAACV,YAAY,CAACE,KAAK,EAAA;MAACW,OAAO,EAAA,IAAA;MAAAS,QAAA,eACzBZ,GAAA,CAACa,oBAAoB,EAAAX,aAAA,CAAA,EAAA,EAAKH,KAAK,CAAG,CAAA;KAChB,CAAC,gBAErBC,GAAA,CAACa,oBAAoB,EAAAX,aAAA,CAAA,EAAA,EAAKH,KAAK,CAAG,CACnC,CAAA;AAAA,GAAA;AACL,CAAC;;;;"}

package/dist/primitive/src/Floating/Popover/styles.cjs CHANGED Viewed

@@ -1,19 +1,19 @@
 'use strict';
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var RadixPopover = require('@radix-ui/react-popover');
 var mixin = require('@remember-web/mixin');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var _templateObject, _templateObject2, _templateObject3;
-var showFadeIn = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n"])));
-var showFadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n"])));
-var StyledPopoverContent = styled__default.default(RadixPopover.PopoverContent)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  contain: paint;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n  border-radius: 4px;\n\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n  color: ", ";\n  background-color: ", ";\n  white-space: pre-line;\n\n  height: 100%;\n  will-change: box-shadow;\n\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation: ", " 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n  &:not([data-state='open']) {\n    animation: ", " 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n"])), mixin.contents000, mixin.bg100, showFadeIn, showFadeOut);
+var showFadeIn = styled.keyframes(["from{opacity:0;}to{opacity:1;}"]);
+var showFadeOut = styled.keyframes(["from{opacity:1;}to{opacity:0;}"]);
+var StyledPopoverContent = styled__default.default(RadixPopover.PopoverContent).withConfig({
+  displayName: "styles__StyledPopoverContent",
+  componentId: "sc-nuba9w-0"
+})(["contain:paint;width:fit-content;margin:0;padding:0;border-radius:4px;box-shadow:0 4px 12px 0 rgba(0,0,0,0.1);color:", ";background-color:", ";white-space:pre-line;height:100%;will-change:box-shadow;&:focus{outline:none;}&[data-state='open']{animation:", " 0.12s cubic-bezier(0.35,0,0.25,1) both;}&:not([data-state='open']){animation:", " 0.16s cubic-bezier(0.35,0,0.25,1) both;}"], mixin.contents000, mixin.bg100, showFadeIn, showFadeOut);
 StyledPopoverContent.defaultProps = {
   avoidCollisions: true,
   align: 'start',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n contain: paint;\n width: fit-content;\n margin: 0;\n padding: 0;\n border-radius: 4px;\n\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n color: ${contents000};\n background-color: ${bg100};\n white-space: pre-line;\n\n height: 100%;\n will-change: box-shadow;\n\n &:focus {\n outline: none;\n }\n &[data-state='open'] {\n animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n &:not([data-state='open']) {\n animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n`;\n\nStyledPopoverContent.defaultProps = {\n avoidCollisions: true,\n align: 'start',\n side: 'bottom',\n sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","~~_templateObject~~","~~_taggedTemplateLiteral~~","~~showFadeOut~~","~~_templateObject2~~","~~StyledPopoverContent~~","~~styled~~","~~PopoverContent~~","~~_templateObject3","~~contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":"~~;;;;;;;;;;;;;AAKO~~,~~IAAMA~~,UAAU,GAAGC,gBAAS,~~CAAAC~~,~~eAAA~~,~~KAAAA~~,~~eAAA~~,~~GAAAC~~,~~uCAAA~~,~~CAOlC~~,~~CAAA~~,~~kFAAA~~,~~CAAA~~,CAAA,CAAA,EAAA;~~AACM~~,~~IAAMC~~,~~WAAW~~,~~GAAGH~~,~~gBAAS~~,~~CAAAI~~,~~gBAAA~~,~~KAAAA~~,~~gBAAA~~,~~GAAAF~~,~~uCAAA,CAOnC,~~CAAA,~~kFAAA~~,~~CAAA~~,~~CAAA~~,~~CAAA~~,EAAA;~~AAEM~~,~~IAAMG~~,~~oBAAoB~~,~~GAAGC~~,~~uBAAM~~,~~CAACC~~,~~2BAAc~~,~~CAAC~~,~~CAAAC~~,~~gBAAA~~,~~KAAAA~~,~~gBAAA~~,~~GAAAN~~,~~uCAAA~~,~~2fAQ~~/CO,iBAAW,EACAC,WAAK,~~EAUVX~~,UAAU,~~EAGVI~~,WAAW,EAE3B;~~AAEDE~~,oBAAoB,~~CAACM~~,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;;;"}
1	+ {"version":3,"file":"styles.cjs","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n contain: paint;\n width: fit-content;\n margin: 0;\n padding: 0;\n border-radius: 4px;\n\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n color: ${contents000};\n background-color: ${bg100};\n white-space: pre-line;\n\n height: 100%;\n will-change: box-shadow;\n\n &:focus {\n outline: none;\n }\n &[data-state='open'] {\n animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n &:not([data-state='open']) {\n animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n`;\n\nStyledPopoverContent.defaultProps = {\n avoidCollisions: true,\n align: 'start',\n side: 'bottom',\n sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","showFadeOut","StyledPopoverContent","styled","PopoverContent","withConfig","displayName","componentId","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;;;;;AAKaA,IAAAA,UAAU,GAAGC,gBAAS,CAOlC,CAAA,gCAAA,CAAA,EAAA;AACYC,IAAAA,WAAW,GAAGD,gBAAS,CAOnC,CAAA,gCAAA,CAAA,EAAA;AAEM,IAAME,oBAAoB,GAAGC,uBAAM,CAACC,2BAAc,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qHAAA,EAAA,oBAAA,EAAA,gHAAA,EAAA,gFAAA,EAAA,2CAAA,CAAA,EAQ/CC,iBAAW,EACAC,WAAK,EAUVV,UAAU,EAGVE,WAAW,EAE3B;AAEDC,oBAAoB,CAACQ,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;;;"}

package/dist/primitive/src/Floating/Popover/styles.mjs ADDED Viewed

@@ -0,0 +1,19 @@
+import styled, { keyframes } from 'styled-components';
+import { PopoverContent } from '@radix-ui/react-popover';
+import { contents000, bg100 } from '@remember-web/mixin';
+var showFadeIn = keyframes(["from{opacity:0;}to{opacity:1;}"]);
+var showFadeOut = keyframes(["from{opacity:1;}to{opacity:0;}"]);
+var StyledPopoverContent = styled(PopoverContent).withConfig({
+  displayName: "styles__StyledPopoverContent",
+  componentId: "sc-nuba9w-0"
+})(["contain:paint;width:fit-content;margin:0;padding:0;border-radius:4px;box-shadow:0 4px 12px 0 rgba(0,0,0,0.1);color:", ";background-color:", ";white-space:pre-line;height:100%;will-change:box-shadow;&:focus{outline:none;}&[data-state='open']{animation:", " 0.12s cubic-bezier(0.35,0,0.25,1) both;}&:not([data-state='open']){animation:", " 0.16s cubic-bezier(0.35,0,0.25,1) both;}"], contents000, bg100, showFadeIn, showFadeOut);
+StyledPopoverContent.defaultProps = {
+  avoidCollisions: true,
+  align: 'start',
+  side: 'bottom',
+  sideOffset: 4
+};
+export { StyledPopoverContent, showFadeIn, showFadeOut };
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Floating/Popover/styles.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.mjs","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n contain: paint;\n width: fit-content;\n margin: 0;\n padding: 0;\n border-radius: 4px;\n\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n color: ${contents000};\n background-color: ${bg100};\n white-space: pre-line;\n\n height: 100%;\n will-change: box-shadow;\n\n &:focus {\n outline: none;\n }\n &[data-state='open'] {\n animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n &:not([data-state='open']) {\n animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n`;\n\nStyledPopoverContent.defaultProps = {\n avoidCollisions: true,\n align: 'start',\n side: 'bottom',\n sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","showFadeOut","StyledPopoverContent","styled","PopoverContent","withConfig","displayName","componentId","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;AAKaA,IAAAA,UAAU,GAAGC,SAAS,CAOlC,CAAA,gCAAA,CAAA,EAAA;AACYC,IAAAA,WAAW,GAAGD,SAAS,CAOnC,CAAA,gCAAA,CAAA,EAAA;AAEM,IAAME,oBAAoB,GAAGC,MAAM,CAACC,cAAc,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qHAAA,EAAA,oBAAA,EAAA,gHAAA,EAAA,gFAAA,EAAA,2CAAA,CAAA,EAQ/CC,WAAW,EACAC,KAAK,EAUVV,UAAU,EAGVE,WAAW,EAE3B;AAEDC,oBAAoB,CAACQ,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;"}

package/dist/primitive/src/Floating/Tooltip/{index.js → index.mjs} RENAMED Viewed

@@ -3,11 +3,11 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { useState } from 'react';
-import { isSSR } from '../../../../shared/utils/common.js';
+import { isSSR } from '../../../../shared/utils/common.mjs';
 import { IconCloseS } from '@remember-web/icon';
 import { contents000, contents999 } from '@remember-web/mixin';
-import { TooltipTriggerWrapper, TooltipContent, CloseButton } from './styles.js';
-import { isStaticTypeProps, isLargeSizeProps } from './types.js';
+import { TooltipTriggerWrapper, TooltipContent, CloseButton } from './styles.mjs';
+import { isStaticTypeProps, isLargeSizeProps } from './types.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "onOpenChange", "onClickOutside"];
@@ -107,4 +107,4 @@ function Tooltip(_ref) {
 }
 export { Tooltip as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Floating/Tooltip/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","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;;"}

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

@@ -1,7 +1,6 @@
 "use client";
 'use strict';
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var RadixTooltip = require('@radix-ui/react-tooltip');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
@@ -26,11 +25,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var TOOLTIP_CONTENT_CONSTANTS = {
   large: {
     padding: '8px 12px',
@@ -41,18 +38,27 @@ var TOOLTIP_CONTENT_CONSTANTS = {
     typography: 'Body2'
   }
 };
-var fadeIn = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var TooltipTriggerWrapper = styled__default.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n"])));
-var TooltipContent = styled__default.default(RadixTooltip__namespace.Content)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ", " 200ms forwards;\n  gap: 4px;\n\n  ", ";\n"])), mixin.contents999, mixin.contents000, fadeIn, function (_ref) {
+var fadeIn = styled.keyframes(["from{opacity:0}to{opacity:1;}"]);
+var TooltipTriggerWrapper = styled__default.default.div.withConfig({
+  displayName: "styles__TooltipTriggerWrapper",
+  componentId: "sc-sfqer9-0"
+})(["width:fit-content;height:fit-content;& > svg{display:block;}"]);
+var TooltipContent = styled__default.default(RadixTooltip__namespace.Content).withConfig({
+  displayName: "styles__TooltipContent",
+  componentId: "sc-sfqer9-1"
+})(["box-sizing:border-box;display:flex;white-space:pre-wrap;color:", ";background-color:", ";border-radius:4px;will-change:opacity;animation:", " 200ms forwards;gap:4px;", ";"], mixin.contents999, mixin.contents000, fadeIn, function (_ref) {
   var $size = _ref.$size,
     $maxWidth = _ref.$maxWidth,
     $zIndex = _ref.$zIndex,
     $backgroundColor = _ref.$backgroundColor,
     $contentColor = _ref.$contentColor,
     $textAlign = _ref.$textAlign;
-  return [styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n      padding: ", ";\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n      z-index: ", ";\n    "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, mixin.getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign, $zIndex), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
+  return [styled.css(["padding:", ";", ";background-color:", ";color:", ";text-align:", ";z-index:", ";"], TOOLTIP_CONTENT_CONSTANTS[$size].padding, mixin.getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign, $zIndex), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
 });
-var CloseButton = styled__default.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
+var CloseButton = styled__default.default.button.withConfig({
+  displayName: "styles__CloseButton",
+  componentId: "sc-sfqer9-2"
+})(["all:unset;appearance:none;cursor:pointer;& > svg{display:block;}"]);
 exports.CloseButton = CloseButton;
 exports.TooltipContent = TooltipContent;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs","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","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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;;;;AAS+C;AAQxC;;;AAAmD;AAkBtD;;;;;;AAMU;AAaX;;;;AAGqC;;;;"}

package/dist/primitive/src/Floating/Tooltip/styles.mjs ADDED Viewed

@@ -0,0 +1,39 @@
+"use client";
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import styled, { keyframes, css } from 'styled-components';
+import { contents999, contents000, getTypographyStyles } from '@remember-web/mixin';
+var TOOLTIP_CONTENT_CONSTANTS = {
+  large: {
+    padding: '8px 12px',
+    typography: 'Body1'
+  },
+  small: {
+    padding: '4px 8px',
+    typography: 'Body2'
+  }
+};
+var fadeIn = keyframes(["from{opacity:0}to{opacity:1;}"]);
+var TooltipTriggerWrapper = styled.div.withConfig({
+  displayName: "styles__TooltipTriggerWrapper",
+  componentId: "sc-sfqer9-0"
+})(["width:fit-content;height:fit-content;& > svg{display:block;}"]);
+var TooltipContent = styled(RadixTooltip.Content).withConfig({
+  displayName: "styles__TooltipContent",
+  componentId: "sc-sfqer9-1"
+})(["box-sizing:border-box;display:flex;white-space:pre-wrap;color:", ";background-color:", ";border-radius:4px;will-change:opacity;animation:", " 200ms forwards;gap:4px;", ";"], contents999, contents000, fadeIn, function (_ref) {
+  var $size = _ref.$size,
+    $maxWidth = _ref.$maxWidth,
+    $zIndex = _ref.$zIndex,
+    $backgroundColor = _ref.$backgroundColor,
+    $contentColor = _ref.$contentColor,
+    $textAlign = _ref.$textAlign;
+  return [css(["padding:", ";", ";background-color:", ";color:", ";text-align:", ";z-index:", ";"], TOOLTIP_CONTENT_CONSTANTS[$size].padding, getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign, $zIndex), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
+});
+var CloseButton = styled.button.withConfig({
+  displayName: "styles__CloseButton",
+  componentId: "sc-sfqer9-2"
+})(["all:unset;appearance:none;cursor:pointer;& > svg{display:block;}"]);
+export { CloseButton, TooltipContent, TooltipTriggerWrapper };
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Floating/Tooltip/styles.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.mjs","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"],"mappings":";;;;;AAcA;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;;;;AAS+C;AAQxC;;;AAAmD;AAkBtD;;;;;;AAMU;AAaX;;;;AAGqC;;"}

package/dist/primitive/src/Floating/Tooltip/{types.js → types.mjs} RENAMED Viewed

@@ -6,4 +6,4 @@ var isLargeSizeProps = function isLargeSizeProps(props) {
 };
 export { isLargeSizeProps, isStaticTypeProps };
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.mjs.map

package/dist/primitive/src/Floating/Tooltip/types.mjs.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/primitive/src/Inputs/Select/DesignedSelect/{const.js → const.mjs} RENAMED Viewed

@@ -2,4 +2,4 @@ var OPTION_ITEM_HEIGHT_PX = 44;
 var DEFAULT_MAX_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX * 4;
 export { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX };
-//# sourceMappingURL=const.js.map
+//# sourceMappingURL=const.mjs.map

package/dist/primitive/src/Inputs/Select/DesignedSelect/const.mjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"const.mjs","sources":["../../../../../../src/Inputs/Select/DesignedSelect/const.ts"],"sourcesContent":["export const OPTION_ITEM_HEIGHT_PX = 44;\nexport const DEFAULT_MAX_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX * 4;\n"],"names":["OPTION_ITEM_HEIGHT_PX","DEFAULT_MAX_HEIGHT_PX"],"mappings":"AAAO,IAAMA,qBAAqB,GAAG,GAAE;AAC1BC,IAAAA,qBAAqB,GAAGD,qBAAqB,GAAG;;;;"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/{index.js → index.mjs} RENAMED Viewed

@@ -3,13 +3,13 @@ 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.js';
-import useMouseEventAway from '../../../hooks/useMouseEventAway.js';
+import { focusSibling } from '../utils.mjs';
+import useMouseEventAway from '../../../hooks/useMouseEventAway.mjs';
 import { IconArrow2Up, IconArrow2Down } from '@remember-web/icon';
-import { OptionHolder } from '../Option/index.js';
-import { SelectContainer } from '../styles.js';
-import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.js';
-import { StyledSelect, SelectDownIcon, SelectOptionWrapper, SelectOption } from './styles.js';
+import { OptionHolder } from '../Option/index.mjs';
+import { SelectContainer } from '../styles.mjs';
+import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.mjs';
+import { StyledSelect, SelectDownIcon, SelectOptionWrapper, SelectOption } from './styles.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "disabled"];
@@ -238,4 +238,4 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
 var DesignedSelect$1 = /*#__PURE__*/forwardRef(DesignedSelect);
 export { DesignedSelect$1 as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Inputs/Select/DesignedSelect/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","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;;"}