@remember-web/primitive 0.0.0-alpha.11 → 0.0.0-alpha.3

package/dist/primitive/src/Gnb/parts/GnbProfile/parts/UserShortInfo.d.ts

@@ -0,0 +1,7 @@
+export type UserShortInfoProps = {
+    name?: string;
+    avatarImageUrl?: string;
+    email?: string;
+};
+export declare const UserShortInfo: (props: UserShortInfoProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserShortInfo.d.ts.map

package/dist/primitive/src/Gnb/parts/GnbProfile/parts/UserShortInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserShortInfo.d.ts","sourceRoot":"","sources":["../../../../../../../src/Gnb/parts/GnbProfile/parts/UserShortInfo.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,eAAO,MAAM,aAAa,UAAW,kBAAkB,4CAkCtD,CAAC"}

package/dist/primitive/src/Gnb/parts/GnbProfile/parts/UserShortInfo.js

@@ -0,0 +1,50 @@
+import { contents000 } from '@remember-web/mixin';
+import { IconUserM } from '@remember-web/icon';
+import { StyledGnpProfileIconArrow2DownS } from '../style.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Flex } from '../../../../Common/Flex/index.js';
+import Typography from '../../../../Common/Typography/index.js';
+import '../../../../Common/Divider/index.js';
+import '../../../../Common/Grid/index.js';
+import '../../../../Common/Spinner/styles.js';
+import Avatar from '../../../../Avatars/Avatar/index.js';
+
+var UserShortInfo = function UserShortInfo(props) {
+  if (!props.name) {
+    return /*#__PURE__*/jsxs(Flex, {
+      gap: 4,
+      children: [/*#__PURE__*/jsx(Typography, {
+        variant: "Body1",
+        children: props.email
+      }), /*#__PURE__*/jsx(StyledGnpProfileIconArrow2DownS, {
+        "data-only-mobile": true
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Avatar, {
+      size: "xxsmall",
+      imageUrl: props.avatarImageUrl,
+      border: {
+        width: '1.5px',
+        color: contents000
+      },
+      children: /*#__PURE__*/jsx(IconUserM, {
+        style: {
+          minWidth: 24,
+          minHeight: 24,
+          transform: 'translateY(2.5px)'
+        }
+      })
+    }), /*#__PURE__*/jsx(Typography, {
+      variant: "Body1",
+      ellipsis: 1,
+      maxWidth: "100px",
+      "data-only-desktop": true,
+      children: props.name
+    })]
+  });
+};
+
+export { UserShortInfo };
+//# sourceMappingURL=UserShortInfo.js.map

package/dist/primitive/src/Gnb/parts/GnbProfile/parts/UserShortInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserShortInfo.js","sources":["../../../../../../../src/Gnb/parts/GnbProfile/parts/UserShortInfo.tsx"],"sourcesContent":["import { Avatar, Flex, Typography } from '@';\nimport { contents000 } from '@remember-web/mixin';\nimport { IconUserM } from '@remember-web/icon';\nimport { StyledGnpProfileIconArrow2DownS } from '@/Gnb/parts/GnbProfile/style';\n\nexport type UserShortInfoProps = {\n  name?: string;\n  avatarImageUrl?: string;\n  email?: string;\n};\nexport const UserShortInfo = (props: UserShortInfoProps) => {\n  if (!props.name) {\n    return (\n      <Flex gap={4}>\n        <Typography variant=\"Body1\">{props.email}</Typography>\n        <StyledGnpProfileIconArrow2DownS data-only-mobile />\n      </Flex>\n    );\n  }\n  return (\n    <>\n      <Avatar\n        size=\"xxsmall\"\n        imageUrl={props.avatarImageUrl}\n        border={{ width: '1.5px', color: contents000 }}\n      >\n        <IconUserM\n          style={{\n            minWidth: 24,\n            minHeight: 24,\n            transform: 'translateY(2.5px)',\n          }}\n        />\n      </Avatar>\n      <Typography\n        variant=\"Body1\"\n        ellipsis={1}\n        maxWidth=\"100px\"\n        data-only-desktop\n      >\n        {props.name}\n      </Typography>\n    </>\n  );\n};\n"],"names":["UserShortInfo","props","name","_jsxs","Flex","gap","children","_jsx","Typography","variant","email","StyledGnpProfileIconArrow2DownS","_Fragment","Avatar","size","imageUrl","avatarImageUrl","border","width","color","contents000","IconUserM","style","minWidth","minHeight","transform","ellipsis","maxWidth"],"mappings":";;;;;;;;;;;IAUaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAyB,EAAK;AAC1D,EAAA,IAAI,CAACA,KAAK,CAACC,IAAI,EAAE;IACf,oBACEC,IAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,GAAG,EAAE,CAAE;MAAAC,QAAA,EAAA,cACXC,GAAA,CAACC,UAAU,EAAA;AAACC,QAAAA,OAAO,EAAC,OAAO;QAAAH,QAAA,EAAEL,KAAK,CAACS,KAAAA;AAAK,OAAa,CAAC,eACtDH,GAAA,CAACI,+BAA+B,EAAA;AAAC,QAAA,kBAAA,EAAA,IAAA;AAAgB,OAAE,CAAC,CAAA;AAAA,KAChD,CAAC,CAAA;AAEX,GAAA;EACA,oBACER,IAAA,CAAAS,QAAA,EAAA;IAAAN,QAAA,EAAA,cACEC,GAAA,CAACM,MAAM,EAAA;AACLC,MAAAA,IAAI,EAAC,SAAS;MACdC,QAAQ,EAAEd,KAAK,CAACe,cAAe;AAC/BC,MAAAA,MAAM,EAAE;AAAEC,QAAAA,KAAK,EAAE,OAAO;AAAEC,QAAAA,KAAK,EAAEC,WAAAA;OAAc;MAAAd,QAAA,eAE/CC,GAAA,CAACc,SAAS,EAAA;AACRC,QAAAA,KAAK,EAAE;AACLC,UAAAA,QAAQ,EAAE,EAAE;AACZC,UAAAA,SAAS,EAAE,EAAE;AACbC,UAAAA,SAAS,EAAE,mBAAA;AACb,SAAA;OACD,CAAA;AAAC,KACI,CAAC,eACTlB,GAAA,CAACC,UAAU,EAAA;AACTC,MAAAA,OAAO,EAAC,OAAO;AACfiB,MAAAA,QAAQ,EAAE,CAAE;AACZC,MAAAA,QAAQ,EAAC,OAAO;MAChB,mBAAiB,EAAA,IAAA;MAAArB,QAAA,EAEhBL,KAAK,CAACC,IAAAA;AAAI,KACD,CAAC,CAAA;AAAA,GACb,CAAC,CAAA;AAEP;;;;"}

package/dist/primitive/src/Gnb/parts/GnbProfile/style.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var css = require('../../css.cjs');
+var styles = require('../../../Common/Typography/styles.cjs');
+var mixin = require('@remember-web/mixin');
+var styles$1 = require('../../../Avatars/Avatar/styles.cjs');
+var icon = require('@remember-web/icon');
+var index = require('../../../Floating/DropdownMenu/index.cjs');
+require('../../../Floating/Tooltip/index.cjs');
+require('../../../Floating/Popover/index.cjs');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var StyledGnpProfileIconArrow2DownS = styled__default.default(icon.IconArrow2DownS)(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  transition: transform 0.2s ease-out;\n  will-change: transform;\n"])));
+var StyledGnbProfileButton = styled__default.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  ", ";\n\n  grid-auto-flow: column;\n  grid-auto-columns: 1fr min-content;\n  gap: 4px;\n  min-height: 24px;\n  height: 100%;\n\n  ", " {\n    width: 100%;\n    overflow: hidden;\n    ", ";\n  }\n\n  // radix\uC5D0\uC11C \uBD80\uC5EC\uB428\n  &[data-state='open'] ", " {\n    transform: rotateZ(-180deg);\n  }\n"])), css.defaultGridButtonCss, styles.StyledTypography, mixin.textEllipsis, StyledGnpProfileIconArrow2DownS);
+var StyledGnbProfileContent = styled__default.default(index.Content)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  ", ";\n  min-width: 225px;\n"])), css.fullPopoverContentCss);
+var StyledGnbMyTitle = styled__default.default.b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  display: block;\n  max-width: 140px;\n  ", ";\n  ", ";\n  font-weight: 600;\n"])), mixin.textEllipsis, mixin.getTypographyStyles('Title1'));
+var StyledGnbProfileCompany = styled__default.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  ", ";\n  ", ";\n  color: ", ";\n  max-width: 140px;\n"])), mixin.getTypographyStyles('Body1'), mixin.textEllipsis, mixin.contents100);
+var StyledGnbMyAnchor = styled__default.default.a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  color: ", ";\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  ", ";\n"])), mixin.contents200, mixin.getTypographyStyles('Body1'));
+var StyledGnbMyInfo = styled__default.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  display: grid;\n  grid-template-areas:\n    'avatar name'\n    'avatar go-profile';\n  grid-template-columns: max-content 1fr;\n  column-gap: 8px;\n  place-items: center start;\n  box-sizing: border-box;\n  padding: 10px 12px;\n\n  ", " {\n    grid-area: avatar;\n  }\n\n  ", " {\n    grid-area: name;\n  }\n\n  ", " {\n    text-decoration: none;\n    grid-area: go-profile;\n  }\n"])), styles$1.StyledAvatar, StyledGnbMyTitle, StyledGnbMyAnchor);
+var StyledGnbMyPasses = styled__default.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  padding: 4px 12px 12px;\n"])));
+var StyledGnbMyPassesContentWrapper = styled__default.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
+var StyledGnbMyPassesInfoWrapper = styled__default.default(StyledGnbMyPassesContentWrapper)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n  background-color: ", ";\n  border-radius: 4px;\n"])), mixin.bg200);
+var StyledGnbMyPassesStatus = styled__default.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n  ", ";\n  font-weight: 500;\n  color: ", ";\n"])), mixin.getTypographyStyles('Subtitle2'), mixin.roleGreen);
+
+exports.StyledGnbMyAnchor = StyledGnbMyAnchor;
+exports.StyledGnbMyInfo = StyledGnbMyInfo;
+exports.StyledGnbMyPasses = StyledGnbMyPasses;
+exports.StyledGnbMyPassesContentWrapper = StyledGnbMyPassesContentWrapper;
+exports.StyledGnbMyPassesInfoWrapper = StyledGnbMyPassesInfoWrapper;
+exports.StyledGnbMyPassesStatus = StyledGnbMyPassesStatus;
+exports.StyledGnbMyTitle = StyledGnbMyTitle;
+exports.StyledGnbProfileButton = StyledGnbProfileButton;
+exports.StyledGnbProfileCompany = StyledGnbProfileCompany;
+exports.StyledGnbProfileContent = StyledGnbProfileContent;
+exports.StyledGnpProfileIconArrow2DownS = StyledGnpProfileIconArrow2DownS;
+//# sourceMappingURL=style.cjs.map

package/dist/primitive/src/Gnb/parts/GnbProfile/style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.cjs","sources":["../../../../../../src/Gnb/parts/GnbProfile/style.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { defaultGridButtonCss, fullPopoverContentCss } from '@/Gnb/css';\nimport { StyledTypography } from '@/Common/Typography/styles';\nimport {\n  bg200,\n  contents100,\n  contents200,\n  getTypographyStyles,\n  roleGreen,\n  textEllipsis,\n} from '@remember-web/mixin';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\nimport { IconArrow2DownS } from '@remember-web/icon';\nimport { DropdownMenu } from '@';\n\nexport const StyledGnpProfileIconArrow2DownS = styled(IconArrow2DownS)`\n  transition: transform 0.2s ease-out;\n  will-change: transform;\n`;\nexport const StyledGnbProfileButton = styled.button`\n  ${defaultGridButtonCss};\n\n  grid-auto-flow: column;\n  grid-auto-columns: 1fr min-content;\n  gap: 4px;\n  min-height: 24px;\n  height: 100%;\n\n  ${StyledTypography} {\n    width: 100%;\n    overflow: hidden;\n    ${textEllipsis};\n  }\n\n  // radix에서 부여됨\n  &[data-state='open'] ${StyledGnpProfileIconArrow2DownS} {\n    transform: rotateZ(-180deg);\n  }\n`;\n\nexport const StyledGnbProfileContent = styled(DropdownMenu.Content)`\n  ${fullPopoverContentCss};\n  min-width: 225px;\n`;\n\nexport const StyledGnbMyTitle = styled.b`\n  display: block;\n  max-width: 140px;\n  ${textEllipsis};\n  ${getTypographyStyles('Title1')};\n  font-weight: 600;\n`;\n\nexport const StyledGnbProfileCompany = styled.span`\n  ${getTypographyStyles('Body1')};\n  ${textEllipsis};\n  color: ${contents100};\n  max-width: 140px;\n`;\nexport const StyledGnbMyAnchor = styled.a`\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  color: ${contents200};\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  ${getTypographyStyles('Body1')};\n`;\nexport const StyledGnbMyInfo = styled.div`\n  display: grid;\n  grid-template-areas:\n    'avatar name'\n    'avatar go-profile';\n  grid-template-columns: max-content 1fr;\n  column-gap: 8px;\n  place-items: center start;\n  box-sizing: border-box;\n  padding: 10px 12px;\n\n  ${StyledAvatar} {\n    grid-area: avatar;\n  }\n\n  ${StyledGnbMyTitle} {\n    grid-area: name;\n  }\n\n  ${StyledGnbMyAnchor} {\n    text-decoration: none;\n    grid-area: go-profile;\n  }\n`;\n\nexport const StyledGnbMyPasses = styled.div`\n  padding: 4px 12px 12px;\n`;\n\nexport const StyledGnbMyPassesContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding: 8px;\n`;\nexport const StyledGnbMyPassesInfoWrapper = styled(\n  StyledGnbMyPassesContentWrapper\n)`\n  background-color: ${bg200};\n  border-radius: 4px;\n`;\n\nexport const StyledGnbMyPassesStatus = styled.span`\n  ${getTypographyStyles('Subtitle2')};\n  font-weight: 500;\n  color: ${roleGreen};\n`;\n"],"names":["StyledGnpProfileIconArrow2DownS","styled","IconArrow2DownS","_templateObject","_taggedTemplateLiteral","StyledGnbProfileButton","button","_templateObject2","defaultGridButtonCss","StyledTypography","textEllipsis","StyledGnbProfileContent","DropdownMenu","Content","_templateObject3","fullPopoverContentCss","StyledGnbMyTitle","b","_templateObject4","getTypographyStyles","StyledGnbProfileCompany","span","_templateObject5","contents100","StyledGnbMyAnchor","a","_templateObject6","contents200","StyledGnbMyInfo","div","_templateObject7","StyledAvatar","StyledGnbMyPasses","_templateObject8","StyledGnbMyPassesContentWrapper","_templateObject9","StyledGnbMyPassesInfoWrapper","_templateObject10","bg200","StyledGnbMyPassesStatus","_templateObject11","roleGreen"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBaA,IAAAA,+BAA+B,GAAGC,uBAAM,CAACC,oBAAe,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAGrE,CAAA,uEAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,sBAAsB,GAAGJ,uBAAM,CAACK,MAAM,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,uCAAA,CAAA,CAAA,MAAA,EAAA,gIAAA,EAAA,mDAAA,EAAA,8EAAA,EAAA,6CAAA,CAAA,CAAA,CAAA,EAC/CI,wBAAoB,EAQpBC,uBAAgB,EAGdC,kBAAY,EAIOV,+BAA+B,EAGvD;IAEYW,uBAAuB,GAAGV,uBAAM,CAACW,KAAY,CAACC,OAAO,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAV,uCAAA,CAAA,CAAA,MAAA,EAAA,0BAAA,CAAA,CAAA,CAAA,EAC/DW,yBAAqB,EAExB;IAEYC,gBAAgB,GAAGf,uBAAM,CAACgB,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAd,uCAAA,0FAGpCM,kBAAY,EACZS,yBAAmB,CAAC,QAAQ,CAAC,EAEhC;AAEM,IAAMC,uBAAuB,GAAGnB,uBAAM,CAACoB,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,uCAAA,CAAA,CAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,0BAAA,CAAA,CAAA,CAAA,EAC9Ce,yBAAmB,CAAC,OAAO,CAAC,EAC5BT,kBAAY,EACLa,iBAAW,EAErB;IACYC,iBAAiB,GAAGvB,uBAAM,CAACwB,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAtB,uCAAA,iKAI9BuB,iBAAW,EAGlBR,yBAAmB,CAAC,OAAO,CAAC,EAC/B;IACYS,eAAe,GAAG3B,uBAAM,CAAC4B,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAA1B,uCAAA,CAWrC2B,CAAAA,8OAAAA,EAAAA,uCAAAA,EAAAA,qCAAAA,EAAAA,mEAAAA,CAAAA,CAAAA,CAAAA,EAAAA,qBAAY,EAIZf,gBAAgB,EAIhBQ,iBAAiB,EAIpB;AAEYQ,IAAAA,iBAAiB,GAAG/B,uBAAM,CAAC4B,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAA7B,uCAAA,CAE1C,CAAA,+BAAA,CAAA,CAAA,CAAA,EAAA;AAEY8B,IAAAA,+BAA+B,GAAGjC,uBAAM,CAAC4B,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAA/B,uCAAA,CAMxD,CAAA,6HAAA,CAAA,CAAA,CAAA,EAAA;AACYgC,IAAAA,4BAA4B,GAAGnC,uBAAM,CAChDiC,+BACF,CAAC,CAAAG,iBAAA,KAAAA,iBAAA,GAAAjC,uCAAA,CAAA,CAAA,wBAAA,EAAA,4BAAA,CAAA,CAAA,CAAA,EACqBkC,WAAK,EAE1B;IAEYC,uBAAuB,GAAGtC,uBAAM,CAACoB,IAAI,CAAAmB,iBAAA,KAAAA,iBAAA,GAAApC,uCAAA,yDAC9Ce,yBAAmB,CAAC,WAAW,CAAC,EAEzBsB,eAAS;;;;;;;;;;;;;;"}

package/dist/primitive/src/Gnb/parts/GnbProfile/style.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const StyledGnpProfileIconArrow2DownS: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>> & Omit<import("react").FC<import("react").SVGProps<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledGnbProfileButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const StyledGnbProfileContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("@/Floating/DropdownMenu").DropdownContentProps, never>> & Omit<({ isInsideCloseable, ...props }: import("@/Floating/DropdownMenu").DropdownContentProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const StyledGnbMyTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
+export declare const StyledGnbProfileCompany: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const StyledGnbMyAnchor: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>;
+export declare const StyledGnbMyInfo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledGnbMyPasses: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledGnbMyPassesContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledGnbMyPassesInfoWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledGnbMyPassesStatus: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+//# sourceMappingURL=style.d.ts.map

package/dist/primitive/src/Gnb/parts/GnbProfile/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../../../src/Gnb/parts/GnbProfile/style.ts"],"names":[],"mappings":";AAgBA,eAAO,MAAM,+BAA+B;;6HAG3C,CAAC;AACF,eAAO,MAAM,sBAAsB,4NAmBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,iWAGnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,0MAM5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,kNAKnC,CAAC;AACF,eAAO,MAAM,iBAAiB,4NAQ7B,CAAC;AACF,eAAO,MAAM,eAAe,gNAuB3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gNAE7B,CAAC;AAEF,eAAO,MAAM,+BAA+B,gNAM3C,CAAC;AACF,eAAO,MAAM,4BAA4B;;gRAKxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,kNAInC,CAAC"}

package/dist/primitive/src/Gnb/parts/GnbProfile/style.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { defaultGridButtonCss, fullPopoverContentCss } from '../../css.js';
+import { StyledTypography } from '../../../Common/Typography/styles.js';
+import { textEllipsis, getTypographyStyles, contents100, contents200, bg200, roleGreen } from '@remember-web/mixin';
+import { StyledAvatar } from '../../../Avatars/Avatar/styles.js';
+import { IconArrow2DownS } from '@remember-web/icon';
+import DropdownMenu from '../../../Floating/DropdownMenu/index.js';
+import '../../../Floating/Tooltip/index.js';
+import '../../../Floating/Popover/index.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var StyledGnpProfileIconArrow2DownS = styled(IconArrow2DownS)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: transform 0.2s ease-out;\n  will-change: transform;\n"])));
+var StyledGnbProfileButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n\n  grid-auto-flow: column;\n  grid-auto-columns: 1fr min-content;\n  gap: 4px;\n  min-height: 24px;\n  height: 100%;\n\n  ", " {\n    width: 100%;\n    overflow: hidden;\n    ", ";\n  }\n\n  // radix\uC5D0\uC11C \uBD80\uC5EC\uB428\n  &[data-state='open'] ", " {\n    transform: rotateZ(-180deg);\n  }\n"])), defaultGridButtonCss, StyledTypography, textEllipsis, StyledGnpProfileIconArrow2DownS);
+var StyledGnbProfileContent = styled(DropdownMenu.Content)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  min-width: 225px;\n"])), fullPopoverContentCss);
+var StyledGnbMyTitle = styled.b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: block;\n  max-width: 140px;\n  ", ";\n  ", ";\n  font-weight: 600;\n"])), textEllipsis, getTypographyStyles('Title1'));
+var StyledGnbProfileCompany = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  color: ", ";\n  max-width: 140px;\n"])), getTypographyStyles('Body1'), textEllipsis, contents100);
+var StyledGnbMyAnchor = styled.a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  color: ", ";\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  ", ";\n"])), contents200, getTypographyStyles('Body1'));
+var StyledGnbMyInfo = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-areas:\n    'avatar name'\n    'avatar go-profile';\n  grid-template-columns: max-content 1fr;\n  column-gap: 8px;\n  place-items: center start;\n  box-sizing: border-box;\n  padding: 10px 12px;\n\n  ", " {\n    grid-area: avatar;\n  }\n\n  ", " {\n    grid-area: name;\n  }\n\n  ", " {\n    text-decoration: none;\n    grid-area: go-profile;\n  }\n"])), StyledAvatar, StyledGnbMyTitle, StyledGnbMyAnchor);
+var StyledGnbMyPasses = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 4px 12px 12px;\n"])));
+var StyledGnbMyPassesContentWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
+var StyledGnbMyPassesInfoWrapper = styled(StyledGnbMyPassesContentWrapper)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: 4px;\n"])), bg200);
+var StyledGnbMyPassesStatus = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", ";\n  font-weight: 500;\n  color: ", ";\n"])), getTypographyStyles('Subtitle2'), roleGreen);
+
+export { StyledGnbMyAnchor, StyledGnbMyInfo, StyledGnbMyPasses, StyledGnbMyPassesContentWrapper, StyledGnbMyPassesInfoWrapper, StyledGnbMyPassesStatus, StyledGnbMyTitle, StyledGnbProfileButton, StyledGnbProfileCompany, StyledGnbProfileContent, StyledGnpProfileIconArrow2DownS };
+//# sourceMappingURL=style.js.map

package/dist/primitive/src/Gnb/parts/GnbProfile/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../../../src/Gnb/parts/GnbProfile/style.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { defaultGridButtonCss, fullPopoverContentCss } from '@/Gnb/css';\nimport { StyledTypography } from '@/Common/Typography/styles';\nimport {\n  bg200,\n  contents100,\n  contents200,\n  getTypographyStyles,\n  roleGreen,\n  textEllipsis,\n} from '@remember-web/mixin';\nimport { StyledAvatar } from '@/Avatars/Avatar/styles';\nimport { IconArrow2DownS } from '@remember-web/icon';\nimport { DropdownMenu } from '@';\n\nexport const StyledGnpProfileIconArrow2DownS = styled(IconArrow2DownS)`\n  transition: transform 0.2s ease-out;\n  will-change: transform;\n`;\nexport const StyledGnbProfileButton = styled.button`\n  ${defaultGridButtonCss};\n\n  grid-auto-flow: column;\n  grid-auto-columns: 1fr min-content;\n  gap: 4px;\n  min-height: 24px;\n  height: 100%;\n\n  ${StyledTypography} {\n    width: 100%;\n    overflow: hidden;\n    ${textEllipsis};\n  }\n\n  // radix에서 부여됨\n  &[data-state='open'] ${StyledGnpProfileIconArrow2DownS} {\n    transform: rotateZ(-180deg);\n  }\n`;\n\nexport const StyledGnbProfileContent = styled(DropdownMenu.Content)`\n  ${fullPopoverContentCss};\n  min-width: 225px;\n`;\n\nexport const StyledGnbMyTitle = styled.b`\n  display: block;\n  max-width: 140px;\n  ${textEllipsis};\n  ${getTypographyStyles('Title1')};\n  font-weight: 600;\n`;\n\nexport const StyledGnbProfileCompany = styled.span`\n  ${getTypographyStyles('Body1')};\n  ${textEllipsis};\n  color: ${contents100};\n  max-width: 140px;\n`;\nexport const StyledGnbMyAnchor = styled.a`\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  color: ${contents200};\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  ${getTypographyStyles('Body1')};\n`;\nexport const StyledGnbMyInfo = styled.div`\n  display: grid;\n  grid-template-areas:\n    'avatar name'\n    'avatar go-profile';\n  grid-template-columns: max-content 1fr;\n  column-gap: 8px;\n  place-items: center start;\n  box-sizing: border-box;\n  padding: 10px 12px;\n\n  ${StyledAvatar} {\n    grid-area: avatar;\n  }\n\n  ${StyledGnbMyTitle} {\n    grid-area: name;\n  }\n\n  ${StyledGnbMyAnchor} {\n    text-decoration: none;\n    grid-area: go-profile;\n  }\n`;\n\nexport const StyledGnbMyPasses = styled.div`\n  padding: 4px 12px 12px;\n`;\n\nexport const StyledGnbMyPassesContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  padding: 8px;\n`;\nexport const StyledGnbMyPassesInfoWrapper = styled(\n  StyledGnbMyPassesContentWrapper\n)`\n  background-color: ${bg200};\n  border-radius: 4px;\n`;\n\nexport const StyledGnbMyPassesStatus = styled.span`\n  ${getTypographyStyles('Subtitle2')};\n  font-weight: 500;\n  color: ${roleGreen};\n`;\n"],"names":["StyledGnpProfileIconArrow2DownS","styled","IconArrow2DownS","_templateObject","_taggedTemplateLiteral","StyledGnbProfileButton","button","_templateObject2","defaultGridButtonCss","StyledTypography","textEllipsis","StyledGnbProfileContent","DropdownMenu","Content","_templateObject3","fullPopoverContentCss","StyledGnbMyTitle","b","_templateObject4","getTypographyStyles","StyledGnbProfileCompany","span","_templateObject5","contents100","StyledGnbMyAnchor","a","_templateObject6","contents200","StyledGnbMyInfo","div","_templateObject7","StyledAvatar","StyledGnbMyPasses","_templateObject8","StyledGnbMyPassesContentWrapper","_templateObject9","StyledGnbMyPassesInfoWrapper","_templateObject10","bg200","StyledGnbMyPassesStatus","_templateObject11","roleGreen"],"mappings":";;;;;;;;;;;;AAgBaA,IAAAA,+BAA+B,GAAGC,MAAM,CAACC,eAAe,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAGrE,CAAA,uEAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,sBAAsB,GAAGJ,MAAM,CAACK,MAAM,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,CAAA,CAAA,MAAA,EAAA,gIAAA,EAAA,mDAAA,EAAA,8EAAA,EAAA,6CAAA,CAAA,CAAA,CAAA,EAC/CI,oBAAoB,EAQpBC,gBAAgB,EAGdC,YAAY,EAIOV,+BAA+B,EAGvD;IAEYW,uBAAuB,GAAGV,MAAM,CAACW,YAAY,CAACC,OAAO,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAV,sBAAA,CAAA,CAAA,MAAA,EAAA,0BAAA,CAAA,CAAA,CAAA,EAC/DW,qBAAqB,EAExB;IAEYC,gBAAgB,GAAGf,MAAM,CAACgB,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAd,sBAAA,0FAGpCM,YAAY,EACZS,mBAAmB,CAAC,QAAQ,CAAC,EAEhC;AAEM,IAAMC,uBAAuB,GAAGnB,MAAM,CAACoB,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,CAAA,CAAA,MAAA,EAAA,OAAA,EAAA,cAAA,EAAA,0BAAA,CAAA,CAAA,CAAA,EAC9Ce,mBAAmB,CAAC,OAAO,CAAC,EAC5BT,YAAY,EACLa,WAAW,EAErB;IACYC,iBAAiB,GAAGvB,MAAM,CAACwB,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAtB,sBAAA,iKAI9BuB,WAAW,EAGlBR,mBAAmB,CAAC,OAAO,CAAC,EAC/B;IACYS,eAAe,GAAG3B,MAAM,CAAC4B,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAA1B,sBAAA,CAWrC2B,CAAAA,8OAAAA,EAAAA,uCAAAA,EAAAA,qCAAAA,EAAAA,mEAAAA,CAAAA,CAAAA,CAAAA,EAAAA,YAAY,EAIZf,gBAAgB,EAIhBQ,iBAAiB,EAIpB;AAEYQ,IAAAA,iBAAiB,GAAG/B,MAAM,CAAC4B,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAA7B,sBAAA,CAE1C,CAAA,+BAAA,CAAA,CAAA,CAAA,EAAA;AAEY8B,IAAAA,+BAA+B,GAAGjC,MAAM,CAAC4B,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAA/B,sBAAA,CAMxD,CAAA,6HAAA,CAAA,CAAA,CAAA,EAAA;AACYgC,IAAAA,4BAA4B,GAAGnC,MAAM,CAChDiC,+BACF,CAAC,CAAAG,iBAAA,KAAAA,iBAAA,GAAAjC,sBAAA,CAAA,CAAA,wBAAA,EAAA,4BAAA,CAAA,CAAA,CAAA,EACqBkC,KAAK,EAE1B;IAEYC,uBAAuB,GAAGtC,MAAM,CAACoB,IAAI,CAAAmB,iBAAA,KAAAA,iBAAA,GAAApC,sBAAA,yDAC9Ce,mBAAmB,CAAC,WAAW,CAAC,EAEzBsB,SAAS;;;;"}

package/dist/primitive/src/Gnb/parts/GnbProfile/types.d.ts

@@ -0,0 +1,11 @@
+export interface ProfileInfo {
+    name: string;
+    avatarImageUrl?: string;
+}
+export type EmptyProfileInfo = {
+    email?: string;
+};
+export interface BusinessProfile extends ProfileInfo {
+    companyName: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/primitive/src/Gnb/parts/GnbProfile/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/Gnb/parts/GnbProfile/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,WAAW,EAAE,MAAM,CAAC;CACrB"}

package/dist/primitive/src/Gnb/style.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var _const = require('./const.cjs');
+var mixin = require('@remember-web/mixin');
+var style$2 = require('./parts/GnbHamburgerMenu/style.cjs');
+var styles = require('../Common/Typography/styles.cjs');
+var style$1 = require('./parts/GnbNotification/style.cjs');
+var style = require('./parts/GnbProfile/style.cjs');
+var css = require('./css.cjs');
+var styles$1 = require('../Floating/DropdownMenu/styles.cjs');
+var index = require('./parts/GnbDropdownLinkItem/index.cjs');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var StyledGnbContent = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  position: relative;\n\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  max-width: ", ";\n\n  margin: 0 auto;\n  padding: 0;\n  gap: 8px;\n\n  ", "\n"])), _const.GNB_VARS.MAX_CONTENT_WIDTH, mixin.mobileOnly(styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n    padding: 0 12px;\n  "])))));
+var StyledGnbAccountActionContainer = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  white-space: nowrap;\n"])));
+var GnbNaviLink = styled__default.default.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 4px 8px 0;\n\n  color: ", ";\n\n  &[data-state='open'] {\n    color: ", ";\n  }\n  &[data-active='true']::after {\n    content: '';\n    position: absolute;\n    display: block;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: 2px;\n\n    background-color: ", ";\n  }\n"])), css.naviLinkCss, mixin.contents000, mixin.contents150, mixin.secondary100);
+var StyledGnbLoginButton = styled__default.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  ", ";\n  ", "\n  font-weight: 500;\n\n  height: 32px;\n"])), css.defaultGridButtonCss, mixin.getTypographyStyles('Body2'));
+var StyledGnbContentLeft = styled__default.default.nav(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  min-width: max-content;\n  gap: clamp(8px, 3vw, 40px);\n"])));
+var StyledGnbContentRight = styled__default.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  display: grid;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-auto-columns: min(100px, 1fr) auto;\n  height: 100%;\n  max-width: 340px;\n  padding-left: 4px;\n  gap: 12px;\n"])));
+var StyledDefaultIconButton = styled__default.default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", ";\n\n  min-width: 24px;\n  min-height: 24px;\n"])), css.defaultGridButtonCss);
+
+// 예외적 디자인 요구사항 - GNB 우선적으로 font-weight 500 전체 적용
+var StyledGnbRoot = styled__default.default.header(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n  position: sticky;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  align-items: center;\n  min-height: ", ";\n  height: ", ";\n  z-index: ", ";\n  font-weight: 500;\n  background: ", ";\n\n  font-size: 16px;\n\n  & + .gnb-spacer {\n    display: none;\n    min-height: ", ";\n    height: ", ";\n    box-sizing: border-box;\n  }\n\n  ", " {\n    font-weight: 500;\n  }\n\n  ", ", ", ", ", " {\n    font-weight: 500;\n  }\n\n  // \uB370\uC2A4\uD06C\uD1B1 \uC0AC\uC774\uC988\uC5D0\uC11C \uD574\uB2F9 \uC5D8\uB9AC\uBA3C\uD2B8\uC758 > pseudo element\uB97C \uC228\uAE40\n  ", ", ", " {\n    ::after {\n      display: none;\n    }\n  }\n\n  ", ";\n\n  ", " {\n    svg {\n      display: none;\n    }\n  }\n\n  ", " {\n    max-width: 375px;\n  }\n\n  // \uBAA8\uBC14\uC77C \uBC18\uC751\uD615 \uC2A4\uD0C0\uC77C\n  ", ";\n"])), _const.GNB_VARS.HEIGHT, _const.GNB_VARS.HEIGHT, _const.GNB_VARS.Z_INDEX, mixin.contents999, _const.GNB_VARS.HEIGHT, _const.GNB_VARS.HEIGHT, styles.StyledTypography, style.StyledGnbMyAnchor, index.StyledGnbDropdownLinkItem, styles$1.StyledDropdownMenuSectionTitle, style.StyledGnbMyAnchor, index.StyledGnbDropdownLinkItem, css.dataResponsiveCss, index.StyledGnbDropdownLinkItem, style$1.StyledNotificationContent, mixin.mobileOnly(styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n    ", " {\n      max-width: 100vw;\n    }\n    &[data-popover-opened='true'] + .gnb-spacer {\n      display: block;\n    }\n    /** \uC804\uCCB4 popover, dropdown **/\n    // \uC804\uCCB4 \uCC44\uC6B0\uB294 \uC2A4\uD0C0\uC77C\uB85C \uBCC0\uACBD - wrapper\n    &[data-popover-opened='true'] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n    }\n    [data-radix-popper-content-wrapper] {\n      transform: unset !important;\n      inset: 0;\n      top: 60px !important;\n    }\n\n    // \uC804\uCCB4 \uCC44\uC6B0\uB294 \uC2A4\uD0C0\uC77C\uB85C \uBCC0\uACBD - \uB0B4\uBD80 \uCEE8\uD150\uCE20\n    [data-mobile-fullover='true'] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      overflow: hidden scroll;\n\n      border-radius: 0;\n      box-shadow: none;\n      overscroll-behavior-x: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    ", " {\n      padding-top: 12px;\n    }\n\n    ", " {\n      gap: 20px;\n    }\n\n    // \uC139\uC158 \uB0B4 \uD328\uB529 \uC81C\uAC70\n    ", " > * {\n      padding: 0;\n    }\n\n    // \uBAA8\uBC14\uC77C\uC5D0\uC11C\uB294 > \uC5D0 \uD574\uB2F9\uD558\uB294 pseudo element\uB97C \uBCF4\uC5EC\uC90C\n    ", ", ", " {\n      ::after {\n        display: inline-block;\n      }\n    }\n\n    // \uBAA8\uBC14\uC77C\uC5D0\uC11C\uB294 Dropdown Section\uC758 border-bottom\uC744 \uC81C\uAC70, \uD328\uB529 \uC870\uC815\n    ", " {\n      border-bottom: none;\n      padding: 0 20px;\n\n      ", " {\n        padding: 0;\n      }\n    }\n\n    // popover\uAC00 open\uB418\uC5B4 \uC788\uC9C0 \uC54A\uB294 \uACBD\uC6B0 Close \uBC84\uD2BC \uC228\uAE40\n    &:not([data-popover-opened='true']) {\n      [data-mobile-popover-close-button='true'] {\n        display: none;\n      }\n    }\n\n    // \uBAA8\uBC14\uC77C\uC5D0\uC11C \uC804\uCCB4 popover open\uB418\uC5B4 \uC788\uB294 \uACBD\uC6B0\n    &[data-popover-opened='true'] {\n      ", " {\n        grid-auto-columns: auto;\n      }\n      [data-is-mobile-popover-hidden='true'] {\n        display: none;\n      }\n      [data-mobile-popover-close-button='true'] {\n        display: grid;\n      }\n    }\n\n    ", " {\n      grid-auto-columns: unset;\n    }\n\n    // \uBAA8\uBC14\uC77C \uB9C1\uD06C\uB4E4\uC5D0 \uC0C1\uC18D\uB41C bg-color \uC81C\uAC70, \uD328\uB529 \uC138\uD305\n    ", ", ", " {\n      padding: 12px 0;\n\n      &:hover,\n      &:focus-visible {\n        background-color: inherit;\n        font-weight: 600;\n      }\n\n      svg {\n        display: inline-block;\n      }\n    }\n\n    // gnb \uAE30\uBCF8 link \uD638\uBC84 \uC2A4\uD0C0\uC77C \uBCC0\uACBD\n    ", " {\n      position: relative;\n\n      &::before {\n        content: '';\n        display: block;\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        height: 1px;\n        background-color: ", ";\n      }\n    }\n\n    /** Notification **/\n    // \uC804\uCCB4 \uC0AC\uC774\uC988 \uD5C8\uC6A9\n    ", " {\n      max-height: 100%;\n    }\n\n    /** Profile **/\n    // \uC544\uB798 \uC5EC\uBC31 \uCD94\uAC00 \uD480over\n    ", ", ", " {\n      padding-bottom: 24px;\n    }\n\n    // \uADF8\uB9AC\uB4DC \uBCC0\uACBD(B2C)\n    ", " {\n      grid-template-areas: 'avatar name go-profile';\n      grid-template-columns: max-content 1fr max-content;\n    }\n\n    ", " + ", " {\n      margin-top: 16px;\n    }\n  "])), style$1.StyledNotificationContent, style.StyledGnbProfileContent, StyledGnbContentRight, styles$1.StyledDropdownMenuSection, style.StyledGnbMyAnchor, index.StyledGnbDropdownLinkItem, styles$1.StyledDropdownMenuSection, styles$1.StyledDropdownMenuSectionTitle, StyledGnbContentRight, StyledGnbContentRight, index.StyledGnbDropdownLinkItem, style$2.StyledGnbDropdownSpecialLinkItem, index.StyledGnbDropdownLinkItem, mixin.divider, style$1.StyledNotificationContent, style.StyledGnbProfileContent, style$2.StyledHamburgerMenuContent, style.StyledGnbMyInfo, styles$1.StyledDropdownMenuSection, styles$1.StyledDropdownMenuSection)));
+
+Object.defineProperty(exports, "GNB_VARS", {
+  enumerable: true,
+  get: function () { return _const.GNB_VARS; }
+});
+exports.GnbNaviLink = GnbNaviLink;
+exports.StyledDefaultIconButton = StyledDefaultIconButton;
+exports.StyledGnbAccountActionContainer = StyledGnbAccountActionContainer;
+exports.StyledGnbContent = StyledGnbContent;
+exports.StyledGnbContentLeft = StyledGnbContentLeft;
+exports.StyledGnbContentRight = StyledGnbContentRight;
+exports.StyledGnbLoginButton = StyledGnbLoginButton;
+exports.StyledGnbRoot = StyledGnbRoot;
+//# sourceMappingURL=style.cjs.map

package/dist/primitive/src/Gnb/style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.cjs","sources":["../../../../src/Gnb/style.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { GNB_VARS } from '@/Gnb/const';\nimport {\n  contents000,\n  contents150,\n  contents999,\n  divider,\n  getTypographyStyles,\n  mobileOnly,\n  secondary100,\n} from '@remember-web/mixin';\nimport {\n  StyledGnbDropdownSpecialLinkItem,\n  StyledHamburgerMenuContent,\n} from '@/Gnb/parts/GnbHamburgerMenu/style';\nimport { StyledTypography } from '@/Common/Typography/styles';\nimport { StyledNotificationContent } from '@/Gnb/parts/GnbNotification/style';\n\nimport {\n  StyledGnbMyAnchor,\n  StyledGnbMyInfo,\n  StyledGnbProfileContent,\n} from './parts/GnbProfile/style';\nimport { dataResponsiveCss, defaultGridButtonCss, naviLinkCss } from './css';\nimport {\n  StyledDropdownMenuSection,\n  StyledDropdownMenuSectionTitle,\n} from '../Floating/DropdownMenu/styles';\nimport { StyledGnbDropdownLinkItem } from './parts/GnbDropdownLinkItem';\n\nexport { GNB_VARS } from '@/Gnb/const';\n\nexport const StyledGnbContent = styled.div`\n  position: relative;\n\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  max-width: ${GNB_VARS.MAX_CONTENT_WIDTH};\n\n  margin: 0 auto;\n  padding: 0;\n  gap: 8px;\n\n  ${mobileOnly(css`\n    padding: 0 12px;\n  `)}\n`;\n\nexport const StyledGnbAccountActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  white-space: nowrap;\n`;\n\nexport const GnbNaviLink = styled.a<{\n  'data-active'?: boolean;\n}>`\n  ${naviLinkCss};\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 4px 8px 0;\n\n  color: ${contents000};\n\n  &[data-state='open'] {\n    color: ${contents150};\n  }\n  &[data-active='true']::after {\n    content: '';\n    position: absolute;\n    display: block;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: 2px;\n\n    background-color: ${secondary100};\n  }\n`;\n\nexport const StyledGnbLoginButton = styled.button`\n  ${defaultGridButtonCss};\n  ${getTypographyStyles('Body2')}\n  font-weight: 500;\n\n  height: 32px;\n`;\n\nexport const StyledGnbContentLeft = styled.nav`\n  display: flex;\n  align-items: center;\n  height: 100%;\n  min-width: max-content;\n  gap: clamp(8px, 3vw, 40px);\n`;\n\nexport const StyledGnbContentRight = styled.div`\n  display: grid;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-auto-columns: min(100px, 1fr) auto;\n  height: 100%;\n  max-width: 340px;\n  padding-left: 4px;\n  gap: 12px;\n`;\n\nexport const StyledDefaultIconButton = styled.button`\n  ${defaultGridButtonCss};\n\n  min-width: 24px;\n  min-height: 24px;\n`;\n\n// 예외적 디자인 요구사항 - GNB 우선적으로 font-weight 500 전체 적용\nexport const StyledGnbRoot = styled.header<{ 'data-popover-opened': boolean }>`\n  position: sticky;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  align-items: center;\n  min-height: ${GNB_VARS.HEIGHT};\n  height: ${GNB_VARS.HEIGHT};\n  z-index: ${GNB_VARS.Z_INDEX};\n  font-weight: 500;\n  background: ${contents999};\n\n  font-size: 16px;\n\n  & + .gnb-spacer {\n    display: none;\n    min-height: ${GNB_VARS.HEIGHT};\n    height: ${GNB_VARS.HEIGHT};\n    box-sizing: border-box;\n  }\n\n  ${StyledTypography} {\n    font-weight: 500;\n  }\n\n  ${StyledGnbMyAnchor}, ${StyledGnbDropdownLinkItem}, ${StyledDropdownMenuSectionTitle} {\n    font-weight: 500;\n  }\n\n  // 데스크톱 사이즈에서 해당 엘리먼트의 > pseudo element를 숨김\n  ${StyledGnbMyAnchor}, ${StyledGnbDropdownLinkItem} {\n    ::after {\n      display: none;\n    }\n  }\n\n  ${dataResponsiveCss};\n\n  ${StyledGnbDropdownLinkItem} {\n    svg {\n      display: none;\n    }\n  }\n\n  ${StyledNotificationContent} {\n    max-width: 375px;\n  }\n\n  // 모바일 반응형 스타일\n  ${mobileOnly(css`\n    ${StyledNotificationContent} {\n      max-width: 100vw;\n    }\n    &[data-popover-opened='true'] + .gnb-spacer {\n      display: block;\n    }\n    /** 전체 popover, dropdown **/\n    // 전체 채우는 스타일로 변경 - wrapper\n    &[data-popover-opened='true'] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n    }\n    [data-radix-popper-content-wrapper] {\n      transform: unset !important;\n      inset: 0;\n      top: 60px !important;\n    }\n\n    // 전체 채우는 스타일로 변경 - 내부 컨텐츠\n    [data-mobile-fullover='true'] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      overflow: hidden scroll;\n\n      border-radius: 0;\n      box-shadow: none;\n      overscroll-behavior-x: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    ${StyledGnbProfileContent} {\n      padding-top: 12px;\n    }\n\n    ${StyledGnbContentRight} {\n      gap: 20px;\n    }\n\n    // 섹션 내 패딩 제거\n    ${StyledDropdownMenuSection} > * {\n      padding: 0;\n    }\n\n    // 모바일에서는 > 에 해당하는 pseudo element를 보여줌\n    ${StyledGnbMyAnchor}, ${StyledGnbDropdownLinkItem} {\n      ::after {\n        display: inline-block;\n      }\n    }\n\n    // 모바일에서는 Dropdown Section의 border-bottom을 제거, 패딩 조정\n    ${StyledDropdownMenuSection} {\n      border-bottom: none;\n      padding: 0 20px;\n\n      ${StyledDropdownMenuSectionTitle} {\n        padding: 0;\n      }\n    }\n\n    // popover가 open되어 있지 않는 경우 Close 버튼 숨김\n    &:not([data-popover-opened='true']) {\n      [data-mobile-popover-close-button='true'] {\n        display: none;\n      }\n    }\n\n    // 모바일에서 전체 popover open되어 있는 경우\n    &[data-popover-opened='true'] {\n      ${StyledGnbContentRight} {\n        grid-auto-columns: auto;\n      }\n      [data-is-mobile-popover-hidden='true'] {\n        display: none;\n      }\n      [data-mobile-popover-close-button='true'] {\n        display: grid;\n      }\n    }\n\n    ${StyledGnbContentRight} {\n      grid-auto-columns: unset;\n    }\n\n    // 모바일 링크들에 상속된 bg-color 제거, 패딩 세팅\n    ${StyledGnbDropdownLinkItem}, ${StyledGnbDropdownSpecialLinkItem} {\n      padding: 12px 0;\n\n      &:hover,\n      &:focus-visible {\n        background-color: inherit;\n        font-weight: 600;\n      }\n\n      svg {\n        display: inline-block;\n      }\n    }\n\n    // gnb 기본 link 호버 스타일 변경\n    ${StyledGnbDropdownLinkItem} {\n      position: relative;\n\n      &::before {\n        content: '';\n        display: block;\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        height: 1px;\n        background-color: ${divider};\n      }\n    }\n\n    /** Notification **/\n    // 전체 사이즈 허용\n    ${StyledNotificationContent} {\n      max-height: 100%;\n    }\n\n    /** Profile **/\n    // 아래 여백 추가 풀over\n    ${StyledGnbProfileContent}, ${StyledHamburgerMenuContent} {\n      padding-bottom: 24px;\n    }\n\n    // 그리드 변경(B2C)\n    ${StyledGnbMyInfo} {\n      grid-template-areas: 'avatar name go-profile';\n      grid-template-columns: max-content 1fr max-content;\n    }\n\n    ${StyledDropdownMenuSection} + ${StyledDropdownMenuSection} {\n      margin-top: 16px;\n    }\n  `)};\n`;\n"],"names":["StyledGnbContent","styled","div","_templateObject","_taggedTemplateLiteral","GNB_VARS","MAX_CONTENT_WIDTH","mobileOnly","css","_templateObject2","StyledGnbAccountActionContainer","_templateObject3","GnbNaviLink","a","_templateObject4","naviLinkCss","contents000","contents150","secondary100","StyledGnbLoginButton","button","_templateObject5","defaultGridButtonCss","getTypographyStyles","StyledGnbContentLeft","nav","_templateObject6","StyledGnbContentRight","_templateObject7","StyledDefaultIconButton","_templateObject8","StyledGnbRoot","header","_templateObject9","HEIGHT","Z_INDEX","contents999","StyledTypography","StyledGnbMyAnchor","StyledGnbDropdownLinkItem","StyledDropdownMenuSectionTitle","dataResponsiveCss","StyledNotificationContent","_templateObject10","StyledGnbProfileContent","StyledDropdownMenuSection","StyledGnbDropdownSpecialLinkItem","divider","StyledHamburgerMenuContent","StyledGnbMyInfo"],"mappings":"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"}

package/dist/primitive/src/Gnb/style.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export { GNB_VARS } from '@/Gnb/const';
+export declare const StyledGnbContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledGnbAccountActionContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const GnbNaviLink: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+    'data-active'?: boolean | undefined;
+}>>;
+export declare const StyledGnbLoginButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const StyledGnbContentLeft: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
+export declare const StyledGnbContentRight: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledDefaultIconButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const StyledGnbRoot: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
+    'data-popover-opened': boolean;
+}>>;
+//# sourceMappingURL=style.d.ts.map

package/dist/primitive/src/Gnb/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/Gnb/style.tsx"],"names":[],"mappings":";AA+BA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,eAAO,MAAM,gBAAgB,gNAiB5B,CAAC;AAEF,eAAO,MAAM,+BAA+B,gNAM3C,CAAC;AAEF,eAAO,MAAM,WAAW;;GA0BvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,4NAMhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,0MAMhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,gNASjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,4NAKnC,CAAC;AAGF,eAAO,MAAM,aAAa;2BAA0C,OAAO;GAgM1E,CAAC"}

package/dist/primitive/src/Gnb/style.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import styled, { css } from 'styled-components';
+import { GNB_VARS } from './const.js';
+import { mobileOnly, contents000, contents150, secondary100, getTypographyStyles, contents999, divider } from '@remember-web/mixin';
+import { StyledGnbDropdownSpecialLinkItem, StyledHamburgerMenuContent } from './parts/GnbHamburgerMenu/style.js';
+import { StyledTypography } from '../Common/Typography/styles.js';
+import { StyledNotificationContent } from './parts/GnbNotification/style.js';
+import { StyledGnbMyAnchor, StyledGnbProfileContent, StyledGnbMyInfo } from './parts/GnbProfile/style.js';
+import { naviLinkCss, defaultGridButtonCss, dataResponsiveCss } from './css.js';
+import { StyledDropdownMenuSectionTitle, StyledDropdownMenuSection } from '../Floating/DropdownMenu/styles.js';
+import { StyledGnbDropdownLinkItem } from './parts/GnbDropdownLinkItem/index.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var StyledGnbContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  max-width: ", ";\n\n  margin: 0 auto;\n  padding: 0;\n  gap: 8px;\n\n  ", "\n"])), GNB_VARS.MAX_CONTENT_WIDTH, mobileOnly(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 0 12px;\n  "])))));
+var StyledGnbAccountActionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  white-space: nowrap;\n"])));
+var GnbNaviLink = styled.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 4px 8px 0;\n\n  color: ", ";\n\n  &[data-state='open'] {\n    color: ", ";\n  }\n  &[data-active='true']::after {\n    content: '';\n    position: absolute;\n    display: block;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: 2px;\n\n    background-color: ", ";\n  }\n"])), naviLinkCss, contents000, contents150, secondary100);
+var StyledGnbLoginButton = styled.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  ", "\n  font-weight: 500;\n\n  height: 32px;\n"])), defaultGridButtonCss, getTypographyStyles('Body2'));
+var StyledGnbContentLeft = styled.nav(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  min-width: max-content;\n  gap: clamp(8px, 3vw, 40px);\n"])));
+var StyledGnbContentRight = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: grid;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-auto-columns: min(100px, 1fr) auto;\n  height: 100%;\n  max-width: 340px;\n  padding-left: 4px;\n  gap: 12px;\n"])));
+var StyledDefaultIconButton = styled.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n\n  min-width: 24px;\n  min-height: 24px;\n"])), defaultGridButtonCss);
+
+// 예외적 디자인 요구사항 - GNB 우선적으로 font-weight 500 전체 적용
+var StyledGnbRoot = styled.header(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  align-items: center;\n  min-height: ", ";\n  height: ", ";\n  z-index: ", ";\n  font-weight: 500;\n  background: ", ";\n\n  font-size: 16px;\n\n  & + .gnb-spacer {\n    display: none;\n    min-height: ", ";\n    height: ", ";\n    box-sizing: border-box;\n  }\n\n  ", " {\n    font-weight: 500;\n  }\n\n  ", ", ", ", ", " {\n    font-weight: 500;\n  }\n\n  // \uB370\uC2A4\uD06C\uD1B1 \uC0AC\uC774\uC988\uC5D0\uC11C \uD574\uB2F9 \uC5D8\uB9AC\uBA3C\uD2B8\uC758 > pseudo element\uB97C \uC228\uAE40\n  ", ", ", " {\n    ::after {\n      display: none;\n    }\n  }\n\n  ", ";\n\n  ", " {\n    svg {\n      display: none;\n    }\n  }\n\n  ", " {\n    max-width: 375px;\n  }\n\n  // \uBAA8\uBC14\uC77C \uBC18\uC751\uD615 \uC2A4\uD0C0\uC77C\n  ", ";\n"])), GNB_VARS.HEIGHT, GNB_VARS.HEIGHT, GNB_VARS.Z_INDEX, contents999, GNB_VARS.HEIGHT, GNB_VARS.HEIGHT, StyledTypography, StyledGnbMyAnchor, StyledGnbDropdownLinkItem, StyledDropdownMenuSectionTitle, StyledGnbMyAnchor, StyledGnbDropdownLinkItem, dataResponsiveCss, StyledGnbDropdownLinkItem, StyledNotificationContent, mobileOnly(css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    ", " {\n      max-width: 100vw;\n    }\n    &[data-popover-opened='true'] + .gnb-spacer {\n      display: block;\n    }\n    /** \uC804\uCCB4 popover, dropdown **/\n    // \uC804\uCCB4 \uCC44\uC6B0\uB294 \uC2A4\uD0C0\uC77C\uB85C \uBCC0\uACBD - wrapper\n    &[data-popover-opened='true'] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n    }\n    [data-radix-popper-content-wrapper] {\n      transform: unset !important;\n      inset: 0;\n      top: 60px !important;\n    }\n\n    // \uC804\uCCB4 \uCC44\uC6B0\uB294 \uC2A4\uD0C0\uC77C\uB85C \uBCC0\uACBD - \uB0B4\uBD80 \uCEE8\uD150\uCE20\n    [data-mobile-fullover='true'] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      overflow: hidden scroll;\n\n      border-radius: 0;\n      box-shadow: none;\n      overscroll-behavior-x: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    ", " {\n      padding-top: 12px;\n    }\n\n    ", " {\n      gap: 20px;\n    }\n\n    // \uC139\uC158 \uB0B4 \uD328\uB529 \uC81C\uAC70\n    ", " > * {\n      padding: 0;\n    }\n\n    // \uBAA8\uBC14\uC77C\uC5D0\uC11C\uB294 > \uC5D0 \uD574\uB2F9\uD558\uB294 pseudo element\uB97C \uBCF4\uC5EC\uC90C\n    ", ", ", " {\n      ::after {\n        display: inline-block;\n      }\n    }\n\n    // \uBAA8\uBC14\uC77C\uC5D0\uC11C\uB294 Dropdown Section\uC758 border-bottom\uC744 \uC81C\uAC70, \uD328\uB529 \uC870\uC815\n    ", " {\n      border-bottom: none;\n      padding: 0 20px;\n\n      ", " {\n        padding: 0;\n      }\n    }\n\n    // popover\uAC00 open\uB418\uC5B4 \uC788\uC9C0 \uC54A\uB294 \uACBD\uC6B0 Close \uBC84\uD2BC \uC228\uAE40\n    &:not([data-popover-opened='true']) {\n      [data-mobile-popover-close-button='true'] {\n        display: none;\n      }\n    }\n\n    // \uBAA8\uBC14\uC77C\uC5D0\uC11C \uC804\uCCB4 popover open\uB418\uC5B4 \uC788\uB294 \uACBD\uC6B0\n    &[data-popover-opened='true'] {\n      ", " {\n        grid-auto-columns: auto;\n      }\n      [data-is-mobile-popover-hidden='true'] {\n        display: none;\n      }\n      [data-mobile-popover-close-button='true'] {\n        display: grid;\n      }\n    }\n\n    ", " {\n      grid-auto-columns: unset;\n    }\n\n    // \uBAA8\uBC14\uC77C \uB9C1\uD06C\uB4E4\uC5D0 \uC0C1\uC18D\uB41C bg-color \uC81C\uAC70, \uD328\uB529 \uC138\uD305\n    ", ", ", " {\n      padding: 12px 0;\n\n      &:hover,\n      &:focus-visible {\n        background-color: inherit;\n        font-weight: 600;\n      }\n\n      svg {\n        display: inline-block;\n      }\n    }\n\n    // gnb \uAE30\uBCF8 link \uD638\uBC84 \uC2A4\uD0C0\uC77C \uBCC0\uACBD\n    ", " {\n      position: relative;\n\n      &::before {\n        content: '';\n        display: block;\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        height: 1px;\n        background-color: ", ";\n      }\n    }\n\n    /** Notification **/\n    // \uC804\uCCB4 \uC0AC\uC774\uC988 \uD5C8\uC6A9\n    ", " {\n      max-height: 100%;\n    }\n\n    /** Profile **/\n    // \uC544\uB798 \uC5EC\uBC31 \uCD94\uAC00 \uD480over\n    ", ", ", " {\n      padding-bottom: 24px;\n    }\n\n    // \uADF8\uB9AC\uB4DC \uBCC0\uACBD(B2C)\n    ", " {\n      grid-template-areas: 'avatar name go-profile';\n      grid-template-columns: max-content 1fr max-content;\n    }\n\n    ", " + ", " {\n      margin-top: 16px;\n    }\n  "])), StyledNotificationContent, StyledGnbProfileContent, StyledGnbContentRight, StyledDropdownMenuSection, StyledGnbMyAnchor, StyledGnbDropdownLinkItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, StyledGnbContentRight, StyledGnbContentRight, StyledGnbDropdownLinkItem, StyledGnbDropdownSpecialLinkItem, StyledGnbDropdownLinkItem, divider, StyledNotificationContent, StyledGnbProfileContent, StyledHamburgerMenuContent, StyledGnbMyInfo, StyledDropdownMenuSection, StyledDropdownMenuSection)));
+
+export { GNB_VARS, GnbNaviLink, StyledDefaultIconButton, StyledGnbAccountActionContainer, StyledGnbContent, StyledGnbContentLeft, StyledGnbContentRight, StyledGnbLoginButton, StyledGnbRoot };
+//# sourceMappingURL=style.js.map

package/dist/primitive/src/Gnb/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../src/Gnb/style.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { GNB_VARS } from '@/Gnb/const';\nimport {\n  contents000,\n  contents150,\n  contents999,\n  divider,\n  getTypographyStyles,\n  mobileOnly,\n  secondary100,\n} from '@remember-web/mixin';\nimport {\n  StyledGnbDropdownSpecialLinkItem,\n  StyledHamburgerMenuContent,\n} from '@/Gnb/parts/GnbHamburgerMenu/style';\nimport { StyledTypography } from '@/Common/Typography/styles';\nimport { StyledNotificationContent } from '@/Gnb/parts/GnbNotification/style';\n\nimport {\n  StyledGnbMyAnchor,\n  StyledGnbMyInfo,\n  StyledGnbProfileContent,\n} from './parts/GnbProfile/style';\nimport { dataResponsiveCss, defaultGridButtonCss, naviLinkCss } from './css';\nimport {\n  StyledDropdownMenuSection,\n  StyledDropdownMenuSectionTitle,\n} from '../Floating/DropdownMenu/styles';\nimport { StyledGnbDropdownLinkItem } from './parts/GnbDropdownLinkItem';\n\nexport { GNB_VARS } from '@/Gnb/const';\n\nexport const StyledGnbContent = styled.div`\n  position: relative;\n\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  max-width: ${GNB_VARS.MAX_CONTENT_WIDTH};\n\n  margin: 0 auto;\n  padding: 0;\n  gap: 8px;\n\n  ${mobileOnly(css`\n    padding: 0 12px;\n  `)}\n`;\n\nexport const StyledGnbAccountActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  white-space: nowrap;\n`;\n\nexport const GnbNaviLink = styled.a<{\n  'data-active'?: boolean;\n}>`\n  ${naviLinkCss};\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 4px 8px 0;\n\n  color: ${contents000};\n\n  &[data-state='open'] {\n    color: ${contents150};\n  }\n  &[data-active='true']::after {\n    content: '';\n    position: absolute;\n    display: block;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: 2px;\n\n    background-color: ${secondary100};\n  }\n`;\n\nexport const StyledGnbLoginButton = styled.button`\n  ${defaultGridButtonCss};\n  ${getTypographyStyles('Body2')}\n  font-weight: 500;\n\n  height: 32px;\n`;\n\nexport const StyledGnbContentLeft = styled.nav`\n  display: flex;\n  align-items: center;\n  height: 100%;\n  min-width: max-content;\n  gap: clamp(8px, 3vw, 40px);\n`;\n\nexport const StyledGnbContentRight = styled.div`\n  display: grid;\n  box-sizing: border-box;\n  grid-auto-flow: column;\n  grid-auto-columns: min(100px, 1fr) auto;\n  height: 100%;\n  max-width: 340px;\n  padding-left: 4px;\n  gap: 12px;\n`;\n\nexport const StyledDefaultIconButton = styled.button`\n  ${defaultGridButtonCss};\n\n  min-width: 24px;\n  min-height: 24px;\n`;\n\n// 예외적 디자인 요구사항 - GNB 우선적으로 font-weight 500 전체 적용\nexport const StyledGnbRoot = styled.header<{ 'data-popover-opened': boolean }>`\n  position: sticky;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  align-items: center;\n  min-height: ${GNB_VARS.HEIGHT};\n  height: ${GNB_VARS.HEIGHT};\n  z-index: ${GNB_VARS.Z_INDEX};\n  font-weight: 500;\n  background: ${contents999};\n\n  font-size: 16px;\n\n  & + .gnb-spacer {\n    display: none;\n    min-height: ${GNB_VARS.HEIGHT};\n    height: ${GNB_VARS.HEIGHT};\n    box-sizing: border-box;\n  }\n\n  ${StyledTypography} {\n    font-weight: 500;\n  }\n\n  ${StyledGnbMyAnchor}, ${StyledGnbDropdownLinkItem}, ${StyledDropdownMenuSectionTitle} {\n    font-weight: 500;\n  }\n\n  // 데스크톱 사이즈에서 해당 엘리먼트의 > pseudo element를 숨김\n  ${StyledGnbMyAnchor}, ${StyledGnbDropdownLinkItem} {\n    ::after {\n      display: none;\n    }\n  }\n\n  ${dataResponsiveCss};\n\n  ${StyledGnbDropdownLinkItem} {\n    svg {\n      display: none;\n    }\n  }\n\n  ${StyledNotificationContent} {\n    max-width: 375px;\n  }\n\n  // 모바일 반응형 스타일\n  ${mobileOnly(css`\n    ${StyledNotificationContent} {\n      max-width: 100vw;\n    }\n    &[data-popover-opened='true'] + .gnb-spacer {\n      display: block;\n    }\n    /** 전체 popover, dropdown **/\n    // 전체 채우는 스타일로 변경 - wrapper\n    &[data-popover-opened='true'] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n    }\n    [data-radix-popper-content-wrapper] {\n      transform: unset !important;\n      inset: 0;\n      top: 60px !important;\n    }\n\n    // 전체 채우는 스타일로 변경 - 내부 컨텐츠\n    [data-mobile-fullover='true'] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      overflow: hidden scroll;\n\n      border-radius: 0;\n      box-shadow: none;\n      overscroll-behavior-x: contain;\n      -webkit-overflow-scrolling: touch;\n    }\n\n    ${StyledGnbProfileContent} {\n      padding-top: 12px;\n    }\n\n    ${StyledGnbContentRight} {\n      gap: 20px;\n    }\n\n    // 섹션 내 패딩 제거\n    ${StyledDropdownMenuSection} > * {\n      padding: 0;\n    }\n\n    // 모바일에서는 > 에 해당하는 pseudo element를 보여줌\n    ${StyledGnbMyAnchor}, ${StyledGnbDropdownLinkItem} {\n      ::after {\n        display: inline-block;\n      }\n    }\n\n    // 모바일에서는 Dropdown Section의 border-bottom을 제거, 패딩 조정\n    ${StyledDropdownMenuSection} {\n      border-bottom: none;\n      padding: 0 20px;\n\n      ${StyledDropdownMenuSectionTitle} {\n        padding: 0;\n      }\n    }\n\n    // popover가 open되어 있지 않는 경우 Close 버튼 숨김\n    &:not([data-popover-opened='true']) {\n      [data-mobile-popover-close-button='true'] {\n        display: none;\n      }\n    }\n\n    // 모바일에서 전체 popover open되어 있는 경우\n    &[data-popover-opened='true'] {\n      ${StyledGnbContentRight} {\n        grid-auto-columns: auto;\n      }\n      [data-is-mobile-popover-hidden='true'] {\n        display: none;\n      }\n      [data-mobile-popover-close-button='true'] {\n        display: grid;\n      }\n    }\n\n    ${StyledGnbContentRight} {\n      grid-auto-columns: unset;\n    }\n\n    // 모바일 링크들에 상속된 bg-color 제거, 패딩 세팅\n    ${StyledGnbDropdownLinkItem}, ${StyledGnbDropdownSpecialLinkItem} {\n      padding: 12px 0;\n\n      &:hover,\n      &:focus-visible {\n        background-color: inherit;\n        font-weight: 600;\n      }\n\n      svg {\n        display: inline-block;\n      }\n    }\n\n    // gnb 기본 link 호버 스타일 변경\n    ${StyledGnbDropdownLinkItem} {\n      position: relative;\n\n      &::before {\n        content: '';\n        display: block;\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        height: 1px;\n        background-color: ${divider};\n      }\n    }\n\n    /** Notification **/\n    // 전체 사이즈 허용\n    ${StyledNotificationContent} {\n      max-height: 100%;\n    }\n\n    /** Profile **/\n    // 아래 여백 추가 풀over\n    ${StyledGnbProfileContent}, ${StyledHamburgerMenuContent} {\n      padding-bottom: 24px;\n    }\n\n    // 그리드 변경(B2C)\n    ${StyledGnbMyInfo} {\n      grid-template-areas: 'avatar name go-profile';\n      grid-template-columns: max-content 1fr max-content;\n    }\n\n    ${StyledDropdownMenuSection} + ${StyledDropdownMenuSection} {\n      margin-top: 16px;\n    }\n  `)};\n`;\n"],"names":["StyledGnbContent","styled","div","_templateObject","_taggedTemplateLiteral","GNB_VARS","MAX_CONTENT_WIDTH","mobileOnly","css","_templateObject2","StyledGnbAccountActionContainer","_templateObject3","GnbNaviLink","a","_templateObject4","naviLinkCss","contents000","contents150","secondary100","StyledGnbLoginButton","button","_templateObject5","defaultGridButtonCss","getTypographyStyles","StyledGnbContentLeft","nav","_templateObject6","StyledGnbContentRight","_templateObject7","StyledDefaultIconButton","_templateObject8","StyledGnbRoot","header","_templateObject9","HEIGHT","Z_INDEX","contents999","StyledTypography","StyledGnbMyAnchor","StyledGnbDropdownLinkItem","StyledDropdownMenuSectionTitle","dataResponsiveCss","StyledNotificationContent","_templateObject10","StyledGnbProfileContent","StyledDropdownMenuSection","StyledGnbDropdownSpecialLinkItem","divider","StyledHamburgerMenuContent","StyledGnbMyInfo"],"mappings":"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"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/{const.cjs.js → const.cjs}

@@ -5,4 +5,4 @@ var DEFAULT_MAX_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX * 4;
 
 exports.DEFAULT_MAX_HEIGHT_PX = DEFAULT_MAX_HEIGHT_PX;
 exports.OPTION_ITEM_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX;
-//# sourceMappingURL=const.cjs.js.map
+//# sourceMappingURL=const.cjs.map

package/dist/primitive/src/Inputs/Select/DesignedSelect/const.cjs.map

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

package/dist/primitive/src/Inputs/Select/DesignedSelect/{const.esm.js → const.js}

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

package/dist/primitive/src/Inputs/Select/DesignedSelect/const.js.map

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

package/dist/primitive/src/Inputs/Select/DesignedSelect/{index.cjs.js → index.cjs}

@@ -5,13 +5,13 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('react');
-var utils = require('../utils.cjs.js');
-var useMouseEventAway = require('../../../hooks/useMouseEventAway.cjs.js');
+var utils = require('../utils.cjs');
+var useMouseEventAway = require('../../../hooks/useMouseEventAway.cjs');
 var icon = require('@remember-web/icon');
-var index = require('../Option/index.cjs.js');
-var styles = require('../styles.cjs.js');
-var _const = require('./const.cjs.js');
-var styles$1 = require('./styles.cjs.js');
+var index = require('../Option/index.cjs');
+var styles = require('../styles.cjs');
+var _const = require('./const.cjs');
+var styles$1 = require('./styles.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -246,4 +246,4 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
 var DesignedSelect$1 = /*#__PURE__*/react.forwardRef(DesignedSelect);
 
 module.exports = DesignedSelect$1;
-//# sourceMappingURL=index.cjs.js.map
+//# sourceMappingURL=index.cjs.map

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

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

package/dist/primitive/src/Inputs/Select/DesignedSelect/{index.esm.js → index.js}

@@ -3,13 +3,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useId, useState, useRef, useCallback, Children, isValidElement } from 'react';
-import { focusSibling } from '../utils.esm.js';
-import useMouseEventAway from '../../../hooks/useMouseEventAway.esm.js';
+import { focusSibling } from '../utils.js';
+import useMouseEventAway from '../../../hooks/useMouseEventAway.js';
 import { IconArrow2Up, IconArrow2Down } from '@remember-web/icon';
-import { OptionHolder } from '../Option/index.esm.js';
-import { SelectContainer } from '../styles.esm.js';
-import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.esm.js';
-import { StyledSelect, SelectDownIcon, SelectOptionWrapper, SelectOption } from './styles.esm.js';
+import { OptionHolder } from '../Option/index.js';
+import { SelectContainer } from '../styles.js';
+import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.js';
+import { StyledSelect, SelectDownIcon, SelectOptionWrapper, SelectOption } from './styles.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "disabled"];
@@ -238,4 +238,4 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
 var DesignedSelect$1 = /*#__PURE__*/forwardRef(DesignedSelect);
 
 export { DesignedSelect$1 as default };
-//# sourceMappingURL=index.esm.js.map
+//# sourceMappingURL=index.js.map

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

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

package/dist/primitive/src/Inputs/Select/DesignedSelect/{styles.cjs.js → styles.cjs}

@@ -4,7 +4,7 @@
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
-var styles = require('../styles.cjs.js');
+var styles = require('../styles.cjs');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -46,4 +46,4 @@ exports.SelectDownIcon = SelectDownIcon;
 exports.SelectOption = SelectOption;
 exports.SelectOptionWrapper = SelectOptionWrapper;
 exports.StyledSelect = StyledSelect;
-//# sourceMappingURL=styles.cjs.js.map
+//# sourceMappingURL=styles.cjs.map

package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs","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;;;;;"}