npm - @remember-web/primitive - Versions diffs - 0.1.19 → 0.2.0 - Mend

@remember-web/primitive 0.1.19 → 0.2.0

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

package/dist/src/Control/Toggle.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.cjs.js","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' \| 'indeterminate'> & {\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","CircleBaseToggle"],"mappings":";;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;;;"}
1	+ {"version":3,"file":"Toggle.cjs.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { type ForwardRefRenderFunction, forwardRef } 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' \| 'indeterminate'> & {\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","CircleBaseToggle"],"mappings":";;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;;;"}

package/dist/src/Control/Toggle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/Control/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,~~EAAc~~,KAAK,wBAAwB,~~EAAE~~,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,wBAAwB,CAC5C,gBAAgB,EAChB,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,eAAe,CAAC,GAAG;IAC5D,OAAO,EAAE,UAAU,GAAG,UAAU,CAAC;CAClC,CAGF,CAAC;AAEF,eAAO,MAAM,MAAM;aANN,UAAU,GAAG,UAAU;oDAMK,CAAC;AAE1C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;sMAI5B,CAAC"}
1	+ {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/Control/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,wBAAwB,CAC5C,gBAAgB,EAChB,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,eAAe,CAAC,GAAG;IAC5D,OAAO,EAAE,UAAU,GAAG,UAAU,CAAC;CAClC,CAGF,CAAC;AAEF,eAAO,MAAM,MAAM;aANN,UAAU,GAAG,UAAU;oDAMK,CAAC;AAE1C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;sMAI5B,CAAC"}

package/dist/src/Control/Toggle.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.esm.js","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' \| 'indeterminate'> & {\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","CircleBaseToggle"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;"}
1	+ {"version":3,"file":"Toggle.esm.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { type ForwardRefRenderFunction, forwardRef } 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' \| 'indeterminate'> & {\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","CircleBaseToggle"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;"}

package/dist/src/Floating/DropdownMenu/DropdownMenuSection.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownMenuSection.cjs.js","sources":["../../../../src/Floating/DropdownMenu/DropdownMenuSection.tsx"],"sourcesContent":["import type { ~~ReactNode~~ } from '~~react~~';\nimport type { ~~GetStyledComponentProps~~ } from '~~@remember-web/shared~~';\n\nimport {\n ~~StyledDropdownMenuSectionTitle~~,\n ~~StyledDropdownMenuSection~~,\n} from '@/Floating/DropdownMenu/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,yCAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;EAAA,oBAERC,eAAA,CAACC,gCAAyB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;AAAAD,IAAAA,QAAA,EACjCD,CAAAA,KAAK,iBACJQ,cAAA,CAACC,qCAA8B,EAAA;AAAAR,MAAAA,QAAA,EAAED,KAAAA;KAAsC,CACxE,EACAC,QAAQ,CAAA;AAAA,GAAA,CACgB,CAAC,CAAA;AAAA;;;;"}
1	+ {"version":3,"file":"DropdownMenuSection.cjs.js","sources":["../../../../src/Floating/DropdownMenu/DropdownMenuSection.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared';\nimport type { ReactNode } from 'react';\n\nimport {\n StyledDropdownMenuSection,\n StyledDropdownMenuSectionTitle,\n} from '@/Floating/DropdownMenu/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,yCAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;EAAA,oBAERC,eAAA,CAACC,gCAAyB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;AAAAD,IAAAA,QAAA,EACjCD,CAAAA,KAAK,iBACJQ,cAAA,CAACC,qCAA8B,EAAA;AAAAR,MAAAA,QAAA,EAAED,KAAAA;KAAsC,CACxE,EACAC,QAAQ,CAAA;AAAA,GAAA,CACgB,CAAC,CAAA;AAAA;;;;"}

package/dist/src/Floating/DropdownMenu/DropdownMenuSection.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import type { GetStyledComponentProps } from '@remember-web/shared';
+import type { ReactNode } from 'react';
 import { StyledDropdownMenuSection } from '../../Floating/DropdownMenu/styles';
 type DropdownMenuSectionProps<As> = GetStyledComponentProps<typeof StyledDropdownMenuSection, As> & {
     title?: ReactNode;

package/dist/src/Floating/DropdownMenu/DropdownMenuSection.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownMenuSection.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/DropdownMenuSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,~~SAAS~~,EAAE,MAAM,~~OAAO~~,CAAC;~~AACvC~~,OAAO,KAAK,EAAE,~~uBAAuB~~,EAAE,MAAM,~~sBAAsB~~,CAAC;~~AAEpE~~,OAAO,~~EAEL~~,yBAAyB,~~EAC1B~~,MAAM,gCAAgC,CAAC;AAExC,KAAK,wBAAwB,CAAC,EAAE,IAAI,uBAAuB,CACzD,OAAO,yBAAyB,EAChC,EAAE,CACH,GAAG;IACF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,sCAI7B,yBAAyB,EAAE,CAAC,4CAO9B,CAAC"}
1	+ {"version":3,"file":"DropdownMenuSection.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/DropdownMenuSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EACL,yBAAyB,EAE1B,MAAM,gCAAgC,CAAC;AAExC,KAAK,wBAAwB,CAAC,EAAE,IAAI,uBAAuB,CACzD,OAAO,yBAAyB,EAChC,EAAE,CACH,GAAG;IACF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,sCAI7B,yBAAyB,EAAE,CAAC,4CAO9B,CAAC"}

package/dist/src/Floating/DropdownMenu/DropdownMenuSection.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownMenuSection.esm.js","sources":["../../../../src/Floating/DropdownMenu/DropdownMenuSection.tsx"],"sourcesContent":["import type { ~~ReactNode~~ } from '~~react~~';\nimport type { ~~GetStyledComponentProps~~ } from '~~@remember-web/shared~~';\n\nimport {\n ~~StyledDropdownMenuSectionTitle~~,\n ~~StyledDropdownMenuSection~~,\n} from '@/Floating/DropdownMenu/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;;;;"}
1	+ {"version":3,"file":"DropdownMenuSection.esm.js","sources":["../../../../src/Floating/DropdownMenu/DropdownMenuSection.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared';\nimport type { ReactNode } from 'react';\n\nimport {\n StyledDropdownMenuSection,\n StyledDropdownMenuSectionTitle,\n} from '@/Floating/DropdownMenu/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/src/Floating/DropdownMenu/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","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,uBAAY,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,yCAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,IAAA,OAC7CH,iBAAiB,gBACfI,cAAA,CAACV,uBAAY,CAACW,KAAK,EAAA;MAACC,OAAO,EAAA,IAAA;MAAAC,QAAA,eACzBH,cAAA,CAACI,gCAAyB,EAAAC,aAAA,CAAA,EAAA,EAAKR,KAAK,CAAG,CAAA;KACrB,CAAC,gBAErBG,cAAA,CAACI,gCAAyB,EAAAC,aAAA,CAAA,EAAA,EAAKR,KAAK,CAAG,CACxC,CAAA;AAAA,GAAA;EACHS,KAAK,EAAEC,KAAO,CAACD,KAAK;EACpBE,OAAO,EAAED,KAAO,CAACC,OAAO;EACxBC,MAAM,EAAEF,KAAO,CAACE,MAAM;EACtBC,MAAM,EAAEH,KAAO,CAACG,MAAM;EACtBT,KAAK,EAAEM,KAAO,CAACN,KAAK;AACpBU,EAAAA,OAAO,EAAEC,uCAAmB;AAC5BC,EAAAA,IAAI,EAAEC,6BAAAA;AACR,CAAC;;;;"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\n\nimport {\n StyledDropdownMenuContent,\n StyledDropdownMenuItem,\n} from '@/Floating/DropdownMenu/styles';\nimport type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';\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,uBAAY,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,yCAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,IAAA,OAC7CH,iBAAiB,gBACfI,cAAA,CAACV,uBAAY,CAACW,KAAK,EAAA;MAACC,OAAO,EAAA,IAAA;MAAAC,QAAA,eACzBH,cAAA,CAACI,gCAAyB,EAAAC,aAAA,CAAA,EAAA,EAAKR,KAAK,CAAG,CAAA;KACrB,CAAC,gBAErBG,cAAA,CAACI,gCAAyB,EAAAC,aAAA,CAAA,EAAA,EAAKR,KAAK,CAAG,CACxC,CAAA;AAAA,GAAA;EACHS,KAAK,EAAEC,KAAO,CAACD,KAAK;EACpBE,OAAO,EAAED,KAAO,CAACC,OAAO;EACxBC,MAAM,EAAEF,KAAO,CAACE,MAAM;EACtBC,MAAM,EAAEH,KAAO,CAACG,MAAM;EACtBT,KAAK,EAAEM,KAAO,CAACN,KAAK;AACpBU,EAAAA,OAAO,EAAEC,uCAAmB;AAC5BC,EAAAA,IAAI,EAAEC,6BAAAA;AACR,CAAC;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;~~AAExD~~,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;~~AAS5E~~,MAAM,WAAW,oBAAqB,SAAQ,mBAAmB;CAAG;AACpE,MAAM,WAAW,iBAAkB,SAAQ,YAAY;CAAG;AAC1D;;;GAGG;AACH,QAAA,MAAM,YAAY;+CACmC,oBAAoB;;;;;;;;;;;;CAevE,CAAC;AAEH,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAMxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAK5E,MAAM,WAAW,oBAAqB,SAAQ,mBAAmB;CAAG;AACpE,MAAM,WAAW,iBAAkB,SAAQ,YAAY;CAAG;AAC1D;;;GAGG;AACH,QAAA,MAAM,YAAY;+CACmC,oBAAoB;;;;;;;;;;;;CAevE,CAAC;AAEH,eAAe,YAAY,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","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;;;;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/DropdownMenu/index.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\n\nimport {\n StyledDropdownMenuContent,\n StyledDropdownMenuItem,\n} from '@/Floating/DropdownMenu/styles';\nimport type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';\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/src/Floating/DropdownMenu/styles.cjs.js CHANGED Viewed

@@ -3,8 +3,8 @@
 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 styled = require('styled-components');
 var styles = require('../Popover/styles.cjs.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import ~~styled,~~ { ~~css } from 'styled-components';\nimport {~~\n bg200,\n contents000,\n contents200,\n divider,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\n\nimport { StyledPopoverContent } from '../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":";;;;;;;;;;;;;;;;;;;;IAYaA,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.js","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import {\n bg200,\n contents000,\n contents200,\n divider,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nimport { StyledPopoverContent } from '../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":";;;;;;;;;;;;;;;;;;;;IAYaA,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;;;;;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"names":[],"mappings":";~~AAQA~~,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;~~AAIlE~~,eAAO,MAAM,mBAAmB,6CAU/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,6CAKpC,CAAC;AAEF,eAAO,MAAM,2BAA2B,6CAEvC,CAAC;AAEF,eAAO,MAAM,8BAA8B,kNAI1C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAC/B,qBAAqB,CAAC,2BAA2B,CAAC,CAAC;AAErD,MAAM,MAAM,2BAA2B,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,4BAGhC,2BAA2B,gDAY1B,CAAC;AAEL,eAAO,MAAM,sBAAsB;;sFAOmB,CAAC;AAEvD,eAAO,MAAM,yBAAyB,gNAAe,CAAC;AAEtD,eAAO,MAAM,yBAAyB;;;;kQAOrC,CAAC"}
1	+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAKlE,eAAO,MAAM,mBAAmB,6CAU/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,6CAKpC,CAAC;AAEF,eAAO,MAAM,2BAA2B,6CAEvC,CAAC;AAEF,eAAO,MAAM,8BAA8B,kNAI1C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAC/B,qBAAqB,CAAC,2BAA2B,CAAC,CAAC;AAErD,MAAM,MAAM,2BAA2B,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,4BAGhC,2BAA2B,gDAY1B,CAAC;AAEL,eAAO,MAAM,sBAAsB;;sFAOmB,CAAC;AAEvD,eAAO,MAAM,yBAAyB,gNAAe,CAAC;AAEtD,eAAO,MAAM,yBAAyB;;;;kQAOrC,CAAC"}

package/dist/src/Floating/DropdownMenu/styles.esm.js CHANGED Viewed

@@ -1,8 +1,8 @@
 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 styled, { css } from 'styled-components';
 import { StyledPopoverContent } from '../Popover/styles.esm.js';
 var _excluded = ["active", "disabled"];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import ~~styled,~~ { ~~css } from 'styled-components';\nimport {~~\n bg200,\n contents000,\n contents200,\n divider,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\n\nimport { StyledPopoverContent } from '../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":";;;;;;;;;;;IAYaA,mBAAmB,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gMAKlCC,mBAAmB,CAAC,OAAO,CAAC,EACrBC,WAAW,EAIrB;AAEYC,IAAAA,wBAAwB,GAAGL,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,sBAAA,CAGnBK,CAAAA,2DAAAA,EAAAA,UAAAA,CAAAA,CAAAA,CAAAA,EAAAA,KAAK,EAE5B;AAEM,IAAMC,2BAA2B,GAAGR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,CAE7C,CAAA,6BAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMQ,8BAA8B,GAAGC,MAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,CAAA,CAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EACrDH,mBAAmB,EACnBI,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,OAETlB,GAAG,CAAC,YAAA;IAAA,OAAM,CACRD,mBAAmB,EACnB,CAACkB,OAAO,IAAIZ,wBAAwB,EACpCa,SAAS,IAAIV,2BAA2B,EACxCR,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,sBAAA,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,MAAM,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,wBAAA,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,MAAM,CAACU,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAA/B,sBAAA,CAAE,CAAA,EAAA,CAAA,CAAA,CAAA,EAAA;IAExCgC,yBAAyB,GAAGvB,MAAM,CAACwB,oBAAoB,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlC,sBAAA,CACjE8B,CAAAA,MAAAA,EAAAA,mCAAAA,EAAAA,YAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAyB,EACEK,OAAO,EAElCL,yBAAyB,EAG5B;AACDZ,sBAAsB,CAACkB,YAAY,GAAG,EAAE;;;;"}
1	+ {"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import {\n bg200,\n contents000,\n contents200,\n divider,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nimport { StyledPopoverContent } from '../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":";;;;;;;;;;;IAYaA,mBAAmB,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gMAKlCC,mBAAmB,CAAC,OAAO,CAAC,EACrBC,WAAW,EAIrB;AAEYC,IAAAA,wBAAwB,GAAGL,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,sBAAA,CAGnBK,CAAAA,2DAAAA,EAAAA,UAAAA,CAAAA,CAAAA,CAAAA,EAAAA,KAAK,EAE5B;AAEM,IAAMC,2BAA2B,GAAGR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,CAE7C,CAAA,6BAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMQ,8BAA8B,GAAGC,MAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,CAAA,CAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EACrDH,mBAAmB,EACnBI,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,OAETlB,GAAG,CAAC,YAAA;IAAA,OAAM,CACRD,mBAAmB,EACnB,CAACkB,OAAO,IAAIZ,wBAAwB,EACpCa,SAAS,IAAIV,2BAA2B,EACxCR,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,sBAAA,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,MAAM,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,wBAAA,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,MAAM,CAACU,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAA/B,sBAAA,CAAE,CAAA,EAAA,CAAA,CAAA,CAAA,EAAA;IAExCgC,yBAAyB,GAAGvB,MAAM,CAACwB,oBAAoB,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlC,sBAAA,CACjE8B,CAAAA,MAAAA,EAAAA,mCAAAA,EAAAA,YAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAyB,EACEK,OAAO,EAElCL,yBAAyB,EAG5B;AACDZ,sBAAsB,CAACkB,YAAY,GAAG,EAAE;;;;"}

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

@@ -1,9 +1,9 @@
 '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');
+var styled = require('styled-components');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import ~~styled,~~ { ~~keyframes } from 'styled-components';\nimport {~~ PopoverContent } from '@radix-ui/react-popover';\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":";;;;;;;;;;;;;AAIO,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.js","sources":["../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import { PopoverContent } from '@radix-ui/react-popover';\nimport { bg100, contents000 } from '@remember-web/mixin';\nimport styled, { keyframes } from 'styled-components';\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":";;;;;;;;;;;;;AAIO,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;;;;;;"}

package/dist/src/Floating/Popover/styles.esm.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import styled, { keyframes } from 'styled-components';
 import { PopoverContent } from '@radix-ui/react-popover';
 import { contents000, bg100 } from '@remember-web/mixin';
+import styled, { keyframes } from 'styled-components';
 var _templateObject, _templateObject2, _templateObject3;
 var showFadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n"])));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import ~~styled,~~ { ~~keyframes } from 'styled-components';\nimport {~~ PopoverContent } from '@radix-ui/react-popover';\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":";;;;;;AAIO,IAAMA,UAAU,GAAGC,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,SAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMG,oBAAoB,GAAGC,MAAM,CAACC,cAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,2fAQ/CO,WAAW,EACAC,KAAK,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.esm.js","sources":["../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import { PopoverContent } from '@radix-ui/react-popover';\nimport { bg100, contents000 } from '@remember-web/mixin';\nimport styled, { keyframes } from 'styled-components';\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":";;;;;;AAIO,IAAMA,UAAU,GAAGC,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,SAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMG,oBAAoB,GAAGC,MAAM,CAACC,cAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,2fAQ/CO,WAAW,EACAC,KAAK,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;;;;"}

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

@@ -4,10 +4,10 @@
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var RadixTooltip = require('@radix-ui/react-tooltip');
-var react = require('react');
-var shared = require('@remember-web/shared');
 var icon = require('@remember-web/icon');
 var mixin = require('@remember-web/mixin');
+var shared = require('@remember-web/shared');
+var react = require('react');
 var styles = require('./styles.cjs.js');
 var types = require('./types.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');

package/dist/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~~';\nimport { ~~isSSR~~ } from '@remember-web/~~shared~~';\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;;"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /*\n @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n \n hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 /\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable \|\| type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /* @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType \|\| isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <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/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;~~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"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAMjB,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,EACA,QAAQ,EACR,OAAO,EACP,cAAc,EACd,WAAW,EACX,IAAY,EACZ,GAAO,EACP,YAAY,EACZ,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,2CAsF7C"}

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

@@ -2,10 +2,10 @@
 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 '@remember-web/shared';
 import { IconCloseS } from '@remember-web/icon';
 import { contents000, contents999 } from '@remember-web/mixin';
+import { isSSR } from '@remember-web/shared';
+import { useState } from 'react';
 import { TooltipTriggerWrapper, TooltipContent, CloseButton } from './styles.esm.js';
 import { isStaticTypeProps, isLargeSizeProps } from './types.esm.js';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/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~~';\nimport { ~~isSSR~~ } from '@remember-web/~~shared~~';\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;;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n type TooltipProps,\n type TooltipSize,\n type TooltipType,\n isLargeSizeProps,\n isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n ? true\n : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n Type extends TooltipType = 'hover',\n Size extends TooltipSize = 'small',\n>({\n children,\n content,\n contentOptions,\n defaultOpen,\n side = 'top',\n gap = 4,\n onOpenChange,\n onClickOutside,\n ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n const [_open, _setOpen] = useState(defaultOpen ?? false);\n const { type = 'hover', size = 'small' } = props;\n const {\n backgroundColor = contents000,\n contentColor = contents999,\n maxWidth = 'initial',\n textAlign = 'center',\n onClick,\n zIndex = 0,\n } = contentOptions ?? {};\n /*\n @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n \n hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 /\n const isHoverType = hoverable && type === 'hover';\n const isClickType = !hoverable \|\| type === 'click';\n const isCloseButtonType = type === 'closeButton';\n /* @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n const isClickTrigger = isClickType \|\| isCloseButtonType;\n const isOpen = isStaticTypeProps(props)\n ? props.open\n : isHoverType\n ? undefined\n : _open;\n\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root\n open={isOpen}\n defaultOpen={defaultOpen}\n delayDuration={100}\n onOpenChange={onOpenChange}\n >\n <RadixTooltip.Trigger\n asChild\n onClick={\n isClickTrigger\n ? () => _setOpen(isClickType ? (prev) => !prev : true)\n : undefined\n }\n >\n <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n </RadixTooltip.Trigger>\n <RadixTooltip.Portal>\n <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/src/Floating/Tooltip/styles.cjs.js CHANGED Viewed

@@ -3,8 +3,8 @@
 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');
+var styled = require('styled-components');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/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';\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;;;;"}
1	+ {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { 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/src/Floating/Tooltip/styles.esm.js CHANGED Viewed

@@ -1,8 +1,8 @@
 "use client";
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import styled, { keyframes, css } from 'styled-components';
 import { contents999, contents000, getTypographyStyles } from '@remember-web/mixin';
+import styled, { keyframes, css } from 'styled-components';
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var TOOLTIP_CONTENT_CONSTANTS = {

package/dist/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';\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;;"}
1	+ {"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { 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/src/Inputs/Select/DesignedSelect/index.cjs.js CHANGED Viewed

@@ -4,12 +4,12 @@
 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 icon = require('@remember-web/icon');
+var react = require('react');
 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 utils = require('../utils.cjs.js');
 var _const = require('./const.cjs.js');
 var styles$1 = require('./styles.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');

package/dist/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';\~~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 onClick,\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 onClick={onClick}\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","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAcK;;;AAVDA;;;;;;;AAOGC;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;AACAI;AACAZ;AACAa;AACAC;AACE;;AAEE;AACF;;AAIAR;;;AAG0C;AAE/BS;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAT;AACAR;AACAF;AAAqBiB;AAER;;;;;AAGTE;AAEAP;;AAEA;AACAF;;;AAGA;AAAA;AACAU;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 { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { focusSibling } from '../utils';\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 onClick,\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 onClick={onClick}\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","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAcK;;;AAVDA;;;;;;;AAOGC;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;AACAI;AACAZ;AACAa;AACAC;AACE;;AAEE;AACF;;AAIAR;;;AAG0C;AAE/BS;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAT;AACAR;AACAF;AAAqBiB;AAER;;;;;AAGTE;AAEAP;;AAEA;AACAF;;;AAGA;AAAA;AACAU;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}

package/dist/src/Inputs/Select/DesignedSelect/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,EAAiB,SAAS,EAAoB,MAAM,OAAO,CAAC;~~AAiBxE~~,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;~~AAqR~~/D,wBAA0C"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,SAAS,EAAoB,MAAM,OAAO,CAAC;AAexE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;AAsR/D,wBAA0C"}

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

@@ -2,12 +2,12 @@
 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 { IconArrow2Up, IconArrow2Down } from '@remember-web/icon';
+import { forwardRef, useId, useState, useRef, useCallback, Children, isValidElement } from 'react';
 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 { focusSibling } from '../utils.esm.js';
 import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.esm.js';
 import { StyledSelect, SelectDownIcon, SelectOptionWrapper, SelectOption } from './styles.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.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 onClick,\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 onClick={onClick}\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","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAcK;;;AAVDA;;;;;;;AAOGC;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;AACAI;AACAZ;AACAa;AACAC;AACE;;AAEE;AACF;;AAIAR;;;AAG0C;AAE/BS;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAT;AACAR;AACAF;AAAqBiB;AAER;;;;;AAGTE;AAEAP;;AAEA;AACAF;;;AAGA;AAAA;AACAU;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n Children,\n forwardRef,\n isValidElement,\n useCallback,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { focusSibling } from '../utils';\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 onClick,\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 onClick={onClick}\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","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAcK;;;AAVDA;;;;;;;AAOGC;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;AACAI;AACAZ;AACAa;AACAC;AACE;;AAEE;AACF;;AAIAR;;;AAG0C;AAE/BS;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAT;AACAR;AACAF;AAAqBiB;AAER;;;;;AAGTE;AAEAP;;AAEA;AACAF;;;AAGA;AAAA;AACAU;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}

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

@@ -2,8 +2,8 @@
 'use strict';
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
+var styled = require('styled-components');
 var styles = require('../styles.cjs.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport ~~styled,~~ { ~~css } from 'styled-components';\nimport {~~\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border: 1px solid ${contents300};\n ${({ expandedDirection }) =>\n ({\n none: css`\n border-radius: 4px;\n `,\n above: css`\n border-radius: 0 0 4px 4px;\n border-top-color: transparent;\n `,\n below: css`\n border-radius: 4px 4px 0 0;\n border-bottom-color: transparent;\n `,\n }[expandedDirection ?? 'none'])};\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n ${SelectContainer}:not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\n\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n expandedDirection?: ExpandedType;\n maxHeight?: number \| string;\n}>`\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ${contents300};\n background-color: ${bg100};\n overflow-y: scroll;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ maxHeight }) => {\n if (!maxHeight) {\n return null;\n }\n\n if (typeof maxHeight === 'number') {\n return css`\n max-height: ${maxHeight}px;\n `;\n }\n\n return css`\n max-height: ${maxHeight};\n `;\n }};\n\n ${({ expandedDirection }) =>\n expandedDirection === 'below'\n ? css`\n top: calc(100% - 1px);\n border-top: none;\n border-radius: 0 0 4px 4px;\n `\n : css`\n bottom: calc(100% - 1px);\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n `}\n\n ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n ${ellipsis()}\n padding: 10px 12px;\n color: ${contents000};\n\n &[aria-disabled='true'] {\n color: ${contents300};\n }\n\n &:focus {\n background-color: ${bg200};\n outline: none;\n }\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background-color: ${bg200};\n `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;;;;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;~~AAI4B~~;~~AAK9B~~;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;;;;"}
1	+ {"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border: 1px solid ${contents300};\n ${({ expandedDirection }) =>\n ({\n none: css`\n border-radius: 4px;\n `,\n above: css`\n border-radius: 0 0 4px 4px;\n border-top-color: transparent;\n `,\n below: css`\n border-radius: 4px 4px 0 0;\n border-bottom-color: transparent;\n `,\n })[expandedDirection ?? 'none']};\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n ${SelectContainer}:not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\n\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n expandedDirection?: ExpandedType;\n maxHeight?: number \| string;\n}>`\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ${contents300};\n background-color: ${bg100};\n overflow-y: scroll;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ maxHeight }) => {\n if (!maxHeight) {\n return null;\n }\n\n if (typeof maxHeight === 'number') {\n return css`\n max-height: ${maxHeight}px;\n `;\n }\n\n return css`\n max-height: ${maxHeight};\n `;\n }};\n\n ${({ expandedDirection }) =>\n expandedDirection === 'below'\n ? css`\n top: calc(100% - 1px);\n border-top: none;\n border-radius: 0 0 4px 4px;\n `\n : css`\n bottom: calc(100% - 1px);\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n `}\n\n ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n ${ellipsis()}\n padding: 10px 12px;\n color: ${contents000};\n\n &[aria-disabled='true'] {\n color: ${contents300};\n }\n\n &:focus {\n background-color: ${bg200};\n outline: none;\n }\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background-color: ${bg200};\n `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;;;;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI6B;AAK/B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;;;;"}

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

@@ -1,7 +1,7 @@
 "use client";
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import styled, { css } from 'styled-components';
 import { ellipsis, contents300, contents200, contents000, bg200, bg300, bg100 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 import { SelectContainer } from '../styles.esm.js';
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;