@remember-web/primitive 0.0.0-alpha.9 → 0.1.0

package/dist/primitive/src/Logos/RememberServiceLogo/style.esm.js

@@ -0,0 +1,9 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { contents000, getTypographyStyles } from '@remember-web/mixin';
+
+var _templateObject;
+var StyledServiceLogoRoot = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ", ";\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ", ";\n    text-decoration: none;\n    line-height: 16px;\n  }\n"])), contents000, getTypographyStyles('Title2'));
+
+export { StyledServiceLogoRoot };
+//# sourceMappingURL=style.esm.js.map

package/dist/primitive/src/Logos/RememberServiceLogo/style.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.esm.js","sources":["../../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { contents000, getTypographyStyles } from '@remember-web/mixin';\n\nexport const StyledServiceLogoRoot = styled.a`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${contents000};\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ${getTypographyStyles('Title2')};\n    text-decoration: none;\n    line-height: 16px;\n  }\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","contents000","getTypographyStyles"],"mappings":";;;;;IAIaA,qBAAqB,GAAGC,MAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,qNAGlCC,WAAW,EAOhBC,mBAAmB,CAAC,QAAQ,CAAC;;;;"}

package/dist/primitive/src/Logos/RememberSquareLogo/{index.cjs → index.cjs.js}

@@ -65,4 +65,4 @@ var RememberSquareLogo = function RememberSquareLogo(_ref) {
 };
 
 exports.RememberSquareLogo = RememberSquareLogo;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Logos/RememberSquareLogo/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Logos/RememberSquareLogo/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RememberLogoProps } from '../types';\n\nexport const RememberSquareLogo = ({\n  className,\n  backgroundColor = '#F7F7EF',\n  color = 'black',\n  height = 20,\n  customElement,\n  ref,\n  ...props\n}: RememberLogoProps) => (\n  <div\n    {...props}\n    ref={ref}\n    style={{\n      width: 'fit-content',\n      height,\n      display: 'flex',\n      alignItems: 'flex-end',\n    }}\n  >\n    <svg\n      className={className}\n      height=\"100%\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g clipPath=\"url(#clip0_222_7)\">\n        <path\n          d=\"M18 0H2C0.895431 0 0 0.895431 0 2V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V2C20 0.895431 19.1046 0 18 0Z\"\n          fill={backgroundColor}\n        />\n        <path\n          d=\"M12.919 10.7305L9.70869 10.7153C9.63269 10.7913 9.63269 10.8067 9.55652 10.8978L11.8995 15.7513H15.338C15.3837 15.6753 15.414 15.6448 15.4597 15.5688L12.9189 10.7305H12.919Z\"\n          fill={color}\n        />\n        <path\n          d=\"M9.8913 4.24895H5.61597V15.7208H8.81097V5.02495C10.226 5.22278 10.9563 5.89211 11.2453 7.01811C11.4583 7.82445 11.367 9.04161 10.8041 9.78711L11.0171 10.0761C13.2536 10.0609 14.5013 8.82845 14.41 7.13961C14.334 5.17695 12.5386 4.24878 9.89113 4.24878L9.8913 4.24895Z\"\n          fill={color}\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_222_7\">\n          <rect width=\"20\" height=\"20\" fill=\"white\" />\n        </clipPath>\n      </defs>\n    </svg>\n    {customElement}\n  </div>\n);\n"],"names":["backgroundColor","color","height","props","ref","style","width","display","alignItems","children","className","viewBox","fill","xmlns","clipPath","d","id"],"mappings":";;;;;;;;;;;;AAAa;AAAA;AAAA;;AAIkB;;AAE7BA;;AACAC;;AACAC;;;AAGGC;AAAK;AAINC;AACAC;AACEC;AACAJ;AACAK;AACAC;;AACAC;AAGAC;AACAR;AACAS;AACAC;AACAC;AAAkCJ;AAE/BK;AAA4BL;AAE3BM;AACAH;;AAGAG;AACAH;;AAGAG;AACAH;AAAY;;AAGhBH;AACYO;AAAgBP;AAClBH;AAAWJ;AAAYU;;;AACpB;;AAGD;AACV;;"}

package/dist/primitive/src/Logos/RememberSquareLogo/{index.js → index.esm.js}

@@ -58,4 +58,4 @@ var RememberSquareLogo = function RememberSquareLogo(_ref) {
 };
 
 export { RememberSquareLogo };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Logos/RememberSquareLogo/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Logos/RememberSquareLogo/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RememberLogoProps } from '../types';\n\nexport const RememberSquareLogo = ({\n  className,\n  backgroundColor = '#F7F7EF',\n  color = 'black',\n  height = 20,\n  customElement,\n  ref,\n  ...props\n}: RememberLogoProps) => (\n  <div\n    {...props}\n    ref={ref}\n    style={{\n      width: 'fit-content',\n      height,\n      display: 'flex',\n      alignItems: 'flex-end',\n    }}\n  >\n    <svg\n      className={className}\n      height=\"100%\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g clipPath=\"url(#clip0_222_7)\">\n        <path\n          d=\"M18 0H2C0.895431 0 0 0.895431 0 2V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V2C20 0.895431 19.1046 0 18 0Z\"\n          fill={backgroundColor}\n        />\n        <path\n          d=\"M12.919 10.7305L9.70869 10.7153C9.63269 10.7913 9.63269 10.8067 9.55652 10.8978L11.8995 15.7513H15.338C15.3837 15.6753 15.414 15.6448 15.4597 15.5688L12.9189 10.7305H12.919Z\"\n          fill={color}\n        />\n        <path\n          d=\"M9.8913 4.24895H5.61597V15.7208H8.81097V5.02495C10.226 5.22278 10.9563 5.89211 11.2453 7.01811C11.4583 7.82445 11.367 9.04161 10.8041 9.78711L11.0171 10.0761C13.2536 10.0609 14.5013 8.82845 14.41 7.13961C14.334 5.17695 12.5386 4.24878 9.89113 4.24878L9.8913 4.24895Z\"\n          fill={color}\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_222_7\">\n          <rect width=\"20\" height=\"20\" fill=\"white\" />\n        </clipPath>\n      </defs>\n    </svg>\n    {customElement}\n  </div>\n);\n"],"names":["backgroundColor","color","height","props","ref","style","width","display","alignItems","children","className","viewBox","fill","xmlns","clipPath","d","id"],"mappings":";;;;;AAAa;AAAA;AAAA;;AAIkB;;AAE7BA;;AACAC;;AACAC;;;AAGGC;AAAK;AAINC;AACAC;AACEC;AACAJ;AACAK;AACAC;;AACAC;AAGAC;AACAR;AACAS;AACAC;AACAC;AAAkCJ;AAE/BK;AAA4BL;AAE3BM;AACAH;;AAGAG;AACAH;;AAGAG;AACAH;AAAY;;AAGhBH;AACYO;AAAgBP;AAClBH;AAAWJ;AAAYU;;;AACpB;;AAGD;AACV;;"}

package/dist/primitive/src/Modals/Dialog/{index.cjs → index.cjs.js}

@@ -4,9 +4,9 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var DialogPrimitive = require('@radix-ui/react-dialog');
-var index = require('../../Common/Flex/index.cjs');
+var index = require('../../Common/Flex/index.cjs.js');
 var icon = require('@remember-web/icon');
-var styles = require('./styles.cjs');
+var styles = require('./styles.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -92,4 +92,4 @@ Dialog.Trigger = DialogPrimitive.Trigger;
 Dialog.Close = DialogPrimitive.Close;
 
 exports.Dialog = Dialog;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Modals/Dialog/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\n\nimport { Flex } from '@/Common/Flex';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}

package/dist/primitive/src/Modals/Dialog/{index.js → index.esm.js}

@@ -2,9 +2,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Root, Portal, Close, Trigger } from '@radix-ui/react-dialog';
-import { Flex } from '../../Common/Flex/index.js';
+import { Flex } from '../../Common/Flex/index.esm.js';
 import { PictogramAlert, PictogramCheck, IconClose } from '@remember-web/icon';
-import { StyledOverlay, DialogContent, DialogIcon, IconButton, DialogTitle, DialogDescription } from './styles.js';
+import { StyledOverlay, DialogContent, DialogIcon, IconButton, DialogTitle, DialogDescription } from './styles.esm.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["children"],
@@ -85,4 +85,4 @@ Dialog.Trigger = Trigger;
 Dialog.Close = Close;
 
 export { Dialog };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Modals/Dialog/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\n\nimport { Flex } from '@/Common/Flex';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}

package/dist/primitive/src/Modals/Dialog/styles.cjs.js

@@ -0,0 +1,51 @@
+"use client";
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var mixin = require('@remember-web/mixin');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var overlayShow = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n"])));
+var contentShow = styled.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  0% { opacity: 0; transform: translate(-50%, -48%) scale(.96) }\n  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }\n"])));
+var StyledOverlay = styled__default.default(DialogPrimitive__namespace.Overlay)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.3);\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n"])), overlayShow);
+var DialogContent = styled__default.default(DialogPrimitive__namespace.Content)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  background-color: ", ";\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90vw;\n  max-width: 360px;\n  min-width: 300px;\n  max-height: 85vh;\n  padding: 32px 24px 24px;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n"])), mixin.primary200, contentShow);
+var DialogIcon = styled__default.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  margin-bottom: 16px;\n"])));
+var IconButton = styled__default.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n"])));
+var DialogTitle = styled__default.default(DialogPrimitive__namespace.Title)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  ", "\n\n  color: ", ";\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n"])), mixin.getTypographyStyles('Headline4_B'), mixin.contents000);
+var DialogDescription = styled__default.default(DialogPrimitive__namespace.Description)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", "\n\n  color: ", ";\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents100);
+
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogIcon = DialogIcon;
+exports.DialogTitle = DialogTitle;
+exports.IconButton = IconButton;
+exports.StyledOverlay = StyledOverlay;
+exports.contentShow = contentShow;
+exports.overlayShow = overlayShow;
+//# sourceMappingURL=styles.cjs.js.map

package/dist/primitive/src/Modals/Dialog/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Modals/Dialog/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { keyframes } from 'styled-components';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { primary200, contents000, contents100 } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\n\nexport const overlayShow = keyframes`\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n`;\n\nexport const contentShow = keyframes`\n  0% { opacity: 0; transform: translate(-50%, -48%) scale(.96) }\n  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }\n`;\n\nexport const StyledOverlay = styled(DialogPrimitive.Overlay)`\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.3);\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogContent = styled(DialogPrimitive.Content)`\n  box-sizing: border-box;\n  background-color: ${primary200};\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90vw;\n  max-width: 360px;\n  min-width: 300px;\n  max-height: 85vh;\n  padding: 32px 24px 24px;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogIcon = styled.div`\n  margin-bottom: 16px;\n`;\n\nexport const IconButton = styled.button`\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n`;\n\nexport const DialogTitle = styled(DialogPrimitive.Title)`\n  ${getTypographyStyles('Headline4_B')}\n\n  color: ${contents000};\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n`;\n\nexport const DialogDescription = styled(DialogPrimitive.Description)`\n  ${getTypographyStyles('Body1_M')}\n\n  color: ${contents100};\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n`;\n"],"names":["DialogIcon","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAQN;AAKA;;;AAsCMA;AAIAC;AASN;AASA;;;;;;;;;"}

package/dist/primitive/src/Modals/Dialog/styles.esm.js

@@ -0,0 +1,18 @@
+"use client";
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import styled, { keyframes } from 'styled-components';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { primary200, getTypographyStyles, contents000, contents100 } from '@remember-web/mixin';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var overlayShow = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n"])));
+var contentShow = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% { opacity: 0; transform: translate(-50%, -48%) scale(.96) }\n  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }\n"])));
+var StyledOverlay = styled(DialogPrimitive.Overlay)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.3);\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n"])), overlayShow);
+var DialogContent = styled(DialogPrimitive.Content)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  background-color: ", ";\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90vw;\n  max-width: 360px;\n  min-width: 300px;\n  max-height: 85vh;\n  padding: 32px 24px 24px;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n"])), primary200, contentShow);
+var DialogIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n"])));
+var IconButton = styled.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n"])));
+var DialogTitle = styled(DialogPrimitive.Title)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  color: ", ";\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n"])), getTypographyStyles('Headline4_B'), contents000);
+var DialogDescription = styled(DialogPrimitive.Description)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  color: ", ";\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n"])), getTypographyStyles('Body1_M'), contents100);
+
+export { DialogContent, DialogDescription, DialogIcon, DialogTitle, IconButton, StyledOverlay, contentShow, overlayShow };
+//# sourceMappingURL=styles.esm.js.map

package/dist/primitive/src/Modals/Dialog/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Modals/Dialog/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { keyframes } from 'styled-components';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { primary200, contents000, contents100 } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\n\nexport const overlayShow = keyframes`\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n`;\n\nexport const contentShow = keyframes`\n  0% { opacity: 0; transform: translate(-50%, -48%) scale(.96) }\n  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }\n`;\n\nexport const StyledOverlay = styled(DialogPrimitive.Overlay)`\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.3);\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogContent = styled(DialogPrimitive.Content)`\n  box-sizing: border-box;\n  background-color: ${primary200};\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90vw;\n  max-width: 360px;\n  min-width: 300px;\n  max-height: 85vh;\n  padding: 32px 24px 24px;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogIcon = styled.div`\n  margin-bottom: 16px;\n`;\n\nexport const IconButton = styled.button`\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n`;\n\nexport const DialogTitle = styled(DialogPrimitive.Title)`\n  ${getTypographyStyles('Headline4_B')}\n\n  color: ${contents000};\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n`;\n\nexport const DialogDescription = styled(DialogPrimitive.Description)`\n  ${getTypographyStyles('Body1_M')}\n\n  color: ${contents100};\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n`;\n"],"names":["DialogIcon","IconButton"],"mappings":";;;;;;AAAa;AAQN;AAKA;;;AAsCMA;AAIAC;AASN;AASA;;"}

package/dist/primitive/src/Paginations/CompactPagination/{index.cjs → index.cjs.js}

@@ -2,10 +2,10 @@
 'use strict';
 
 var icon = require('@remember-web/icon');
-var index = require('../../Common/Flex/index.cjs');
+var index = require('../../Common/Flex/index.cjs.js');
 var mixin = require('@remember-web/mixin');
-var styles = require('../styles.cjs');
-var usePagination = require('../usePagination.cjs');
+var styles = require('../styles.cjs.js');
+var usePagination = require('../usePagination.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function CompactPagination(_ref) {
@@ -95,4 +95,4 @@ function CompactPagination(_ref) {
 }
 
 exports.CompactPagination = CompactPagination;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Paginations/CompactPagination/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { Flex } from '@/Common/Flex';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;;;AAcO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}

package/dist/primitive/src/Paginations/CompactPagination/{index.js → index.esm.js}

@@ -1,9 +1,9 @@
 "use client";
 import { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';
-import { Flex } from '../../Common/Flex/index.js';
+import { Flex } from '../../Common/Flex/index.esm.js';
 import { contents300, contents000 } from '@remember-web/mixin';
-import { CompactPaginationContainer, ArrowButton, CurrentPage } from '../styles.js';
-import usePagination from '../usePagination.js';
+import { CompactPaginationContainer, ArrowButton, CurrentPage } from '../styles.esm.js';
+import usePagination from '../usePagination.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function CompactPagination(_ref) {
@@ -93,4 +93,4 @@ function CompactPagination(_ref) {
 }
 
 export { CompactPagination };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Paginations/CompactPagination/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { Flex } from '@/Common/Flex';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;AAcO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}

package/dist/primitive/src/Paginations/Pagination/{index.cjs → index.cjs.js}

@@ -3,9 +3,9 @@
 
 var icon = require('@remember-web/icon');
 var mixin = require('@remember-web/mixin');
-var common = require('../../../../shared/utils/common.cjs');
-var styles = require('../styles.cjs');
-var usePagination = require('../usePagination.cjs');
+var common = require('../../../../shared/utils/common.cjs.js');
+var styles = require('../styles.cjs.js');
+var usePagination = require('../usePagination.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function Pagination(_ref) {
@@ -113,4 +113,4 @@ function Pagination(_ref) {
 }
 
 exports.Pagination = Pagination;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Paginations/Pagination/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Paginations/Pagination/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  IconArrow2Left,\n  IconArrow2Right,\n  IconArrowDoubleLeft,\n  IconArrowDoubleRight,\n} from '@remember-web/icon';\nimport { contents000, contents300 } from '@remember-web/mixin';\nimport { range } from '@remember-web/shared/utils/common';\n\nimport {\n  ArrowButton,\n  Page,\n  PageButton,\n  Pages,\n  PaginationContainer,\n} from '../styles';\nimport type { PaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function Pagination({\n  activePage = 1,\n  totalItemCount,\n  pageRangeDisplayed = 10,\n  onChangePage,\n  itemCountPerPage,\n  className,\n  showFirstButton = false,\n  showLastButton = false,\n}: PaginationProps) {\n  const {\n    firstPage,\n    rangeLastPage,\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n    isFirstPageDisabled,\n    isLastPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => onChangePage(prevPage);\n  const onClickNextPage = () => onChangePage(nextPage);\n  const onClickFirstPage = () => onChangePage(1);\n  const onClickLastPage = () => onChangePage(totalLastPage);\n\n  const onClickPage = (page: number) => onChangePage(page);\n\n  return (\n    <PaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      {showFirstButton && (\n        <ArrowButton\n          disabled={isFirstPageDisabled}\n          onClick={onClickFirstPage}\n          aria-label=\"첫 페이지로 이동\"\n        >\n          <IconArrowDoubleLeft\n            size=\"small\"\n            color={iconColor(isFirstPageDisabled)}\n            aria-hidden=\"true\"\n          />\n        </ArrowButton>\n      )}\n      <ArrowButton\n        disabled={isPrevPageDisabled}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={iconColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Pages>\n        {range(firstPage, rangeLastPage)?.map((_page) => (\n          <Page key={_page}>\n            <PageButton\n              selected={_page === activePage}\n              onClick={() => onClickPage(_page)}\n              aria-label={`페이지 ${_page}`}\n            >\n              {_page}\n            </PageButton>\n          </Page>\n        ))}\n      </Pages>\n      <ArrowButton\n        disabled={isNextPageDisabled}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={iconColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      {showLastButton && (\n        <ArrowButton\n          disabled={isLastPageDisabled}\n          onClick={onClickLastPage}\n          aria-label=\"마지막 페이지로 이동\"\n        >\n          <IconArrowDoubleRight\n            size=\"small\"\n            color={iconColor(isLastPageDisabled)}\n            aria-hidden=\"true\"\n          />\n        </ArrowButton>\n      )}\n    </PaginationContainer>\n  );\n}\n"],"names":["activePage","pageRangeDisplayed","showFirstButton","showLastButton","totalItemCount","itemCountPerPage","className","role","children","disabled","onClick","size","color"],"mappings":";;;;;;;;;;AAqBO;AASa;AAAA;AARlBA;;;AAEAC;;;;;AAIAC;;AACAC;;AAaEH;AACAI;AACAH;AACAI;AACF;;;;;;;;;;AAEA;AAAoC;AACE;AAEtC;;AAAoD;AACpD;;AAAoD;AACpD;;AAA8C;AAC9C;;AAAyD;AAEzD;;AAAwD;;AAIpDC;AACAC;AACA;AAAmBC;AAIfC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAIJH;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEJ;;;;;;;;AAM6BA;;AAGhB;;AAEf;AAGFC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAIAH;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEL;AAGP;;"}

package/dist/primitive/src/Paginations/Pagination/{index.js → index.esm.js}

@@ -1,9 +1,9 @@
 "use client";
 import { IconArrowDoubleLeft, IconArrow2Left, IconArrow2Right, IconArrowDoubleRight } from '@remember-web/icon';
 import { contents300, contents000 } from '@remember-web/mixin';
-import { range } from '../../../../shared/utils/common.js';
-import { PaginationContainer, ArrowButton, Pages, Page, PageButton } from '../styles.js';
-import usePagination from '../usePagination.js';
+import { range } from '../../../../shared/utils/common.esm.js';
+import { PaginationContainer, ArrowButton, Pages, Page, PageButton } from '../styles.esm.js';
+import usePagination from '../usePagination.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function Pagination(_ref) {
@@ -111,4 +111,4 @@ function Pagination(_ref) {
 }
 
 export { Pagination };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Paginations/Pagination/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Paginations/Pagination/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  IconArrow2Left,\n  IconArrow2Right,\n  IconArrowDoubleLeft,\n  IconArrowDoubleRight,\n} from '@remember-web/icon';\nimport { contents000, contents300 } from '@remember-web/mixin';\nimport { range } from '@remember-web/shared/utils/common';\n\nimport {\n  ArrowButton,\n  Page,\n  PageButton,\n  Pages,\n  PaginationContainer,\n} from '../styles';\nimport type { PaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function Pagination({\n  activePage = 1,\n  totalItemCount,\n  pageRangeDisplayed = 10,\n  onChangePage,\n  itemCountPerPage,\n  className,\n  showFirstButton = false,\n  showLastButton = false,\n}: PaginationProps) {\n  const {\n    firstPage,\n    rangeLastPage,\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n    isFirstPageDisabled,\n    isLastPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => onChangePage(prevPage);\n  const onClickNextPage = () => onChangePage(nextPage);\n  const onClickFirstPage = () => onChangePage(1);\n  const onClickLastPage = () => onChangePage(totalLastPage);\n\n  const onClickPage = (page: number) => onChangePage(page);\n\n  return (\n    <PaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      {showFirstButton && (\n        <ArrowButton\n          disabled={isFirstPageDisabled}\n          onClick={onClickFirstPage}\n          aria-label=\"첫 페이지로 이동\"\n        >\n          <IconArrowDoubleLeft\n            size=\"small\"\n            color={iconColor(isFirstPageDisabled)}\n            aria-hidden=\"true\"\n          />\n        </ArrowButton>\n      )}\n      <ArrowButton\n        disabled={isPrevPageDisabled}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={iconColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Pages>\n        {range(firstPage, rangeLastPage)?.map((_page) => (\n          <Page key={_page}>\n            <PageButton\n              selected={_page === activePage}\n              onClick={() => onClickPage(_page)}\n              aria-label={`페이지 ${_page}`}\n            >\n              {_page}\n            </PageButton>\n          </Page>\n        ))}\n      </Pages>\n      <ArrowButton\n        disabled={isNextPageDisabled}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={iconColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      {showLastButton && (\n        <ArrowButton\n          disabled={isLastPageDisabled}\n          onClick={onClickLastPage}\n          aria-label=\"마지막 페이지로 이동\"\n        >\n          <IconArrowDoubleRight\n            size=\"small\"\n            color={iconColor(isLastPageDisabled)}\n            aria-hidden=\"true\"\n          />\n        </ArrowButton>\n      )}\n    </PaginationContainer>\n  );\n}\n"],"names":["activePage","pageRangeDisplayed","showFirstButton","showLastButton","totalItemCount","itemCountPerPage","className","role","children","disabled","onClick","size","color"],"mappings":";;;;;;;;AAqBO;AASa;AAAA;AARlBA;;;AAEAC;;;;;AAIAC;;AACAC;;AAaEH;AACAI;AACAH;AACAI;AACF;;;;;;;;;;AAEA;AAAoC;AACE;AAEtC;;AAAoD;AACpD;;AAAoD;AACpD;;AAA8C;AAC9C;;AAAyD;AAEzD;;AAAwD;;AAIpDC;AACAC;AACA;AAAmBC;AAIfC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAIJH;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEJ;;;;;;;;AAM6BA;;AAGhB;;AAEf;AAGFC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAIAH;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEL;AAGP;;"}

package/dist/primitive/src/Paginations/styles.cjs.js

@@ -0,0 +1,37 @@
+"use client";
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var mixin = require('@remember-web/mixin');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var PaginationContainer = styled__default.default.nav(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ", "\n"])), mixin.mobileOnly(styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n    gap: 8px;\n  "])))));
+var CompactPaginationContainer = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n\n  ", "\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n"])), mixin.getTypographyStyles('Body1_M'));
+var CurrentPage = styled__default.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  ", "\n"])), mixin.getTypographyStyles('Body1_B'));
+var Pages = styled__default.default.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  display: inherit;\n  gap: 4px;\n"])));
+var Page = styled__default.default.li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default([""])));
+var DefaultButton = styled__default.default.button.attrs({
+  type: 'button'
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ", "\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ", ";\n  border-radius: 4px;\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents000, mixin.contents000);
+var ArrowButton = styled__default.default(DefaultButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", "\n\n  ", "\n"])), mixin.desktopOnly(styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n    }\n  "])), mixin.bg200, mixin.bg300)), mixin.mobileOnly(styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n    min-width: 44px;\n    height: 44px;\n  "])))));
+var BaseButton = styled__default.default(DefaultButton)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n  &:hover,\n  &:focus {\n    border: solid 1px ", ";\n    border-radius: 4px;\n    background-color: ", ";\n  }\n\n  ", "\n"])), mixin.contents300, mixin.bg100, mixin.mobileOnly(styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n    min-width: 44px;\n    height: 44px;\n  "])))));
+var PageButton = styled__default.default(BaseButton)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default.default(["\n  ", "\n"])), function (_ref) {
+  var selected = _ref.selected;
+  return selected && styled.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral__default.default(["\n      border: solid 1px ", ";\n      border-radius: 4px;\n      background-color: ", ";\n    "])), mixin.contents300, mixin.bg100);
+});
+
+exports.ArrowButton = ArrowButton;
+exports.BaseButton = BaseButton;
+exports.CompactPaginationContainer = CompactPaginationContainer;
+exports.CurrentPage = CurrentPage;
+exports.Page = Page;
+exports.PageButton = PageButton;
+exports.Pages = Pages;
+exports.PaginationContainer = PaginationContainer;
+//# sourceMappingURL=styles.cjs.js.map

package/dist/primitive/src/Paginations/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport { mobileOnly, desktopOnly } from '@remember-web/mixin';\n\nexport const PaginationContainer = styled.nav`\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ${mobileOnly(css`\n    gap: 8px;\n  `)}\n`;\n\nexport const CompactPaginationContainer = styled.div`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n`;\n\nexport const CurrentPage = styled.span`\n  ${getTypographyStyles('Body1_B')}\n`;\n\nexport const Pages = styled.ul`\n  all: unset;\n  display: inherit;\n  gap: 4px;\n`;\n\nexport const Page = styled.li``;\n\nconst DefaultButton = styled.button.attrs({ type: 'button' })`\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ${getTypographyStyles('Body1_M')}\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ${contents000};\n  border-radius: 4px;\n\n  &:disabled {\n    color: ${contents000};\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n`;\n\nexport const ArrowButton = styled(DefaultButton)`\n  ${desktopOnly(css`\n    &:hover {\n      background-color: ${bg200};\n    }\n    &:active {\n      background-color: ${bg300};\n    }\n  `)}\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const BaseButton = styled(DefaultButton)`\n  &:hover,\n  &:focus {\n    border: solid 1px ${contents300};\n    border-radius: 4px;\n    background-color: ${bg100};\n  }\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const PageButton = styled(BaseButton)<{ selected?: boolean }>`\n  ${({ selected }) =>\n    selected &&\n    css`\n      border: solid 1px ${contents300};\n      border-radius: 4px;\n      background-color: ${bg100};\n    `}\n`;\n"],"names":["Pages","Page","type","BaseButton","PageButton"],"mappings":";;;;;;;;;;;;AAAa;AAcN;;;AA8BMA;AAMAC;AAEb;AAA4CC;AAAe;;AAsC9CC;AAcAC;AACT;AAAW;AAMV;;;;;;;;;"}

package/dist/primitive/src/Paginations/styles.esm.js

@@ -0,0 +1,23 @@
+"use client";
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import styled, { css } from 'styled-components';
+import { mobileOnly, getTypographyStyles, contents000, desktopOnly, bg200, bg300, contents300, bg100 } from '@remember-web/mixin';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var PaginationContainer = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ", "\n"])), mobileOnly(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    gap: 8px;\n  "])))));
+var CompactPaginationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  all: unset;\n\n  ", "\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n"])), getTypographyStyles('Body1_M'));
+var CurrentPage = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), getTypographyStyles('Body1_B'));
+var Pages = styled.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  all: unset;\n  display: inherit;\n  gap: 4px;\n"])));
+var Page = styled.li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
+var DefaultButton = styled.button.attrs({
+  type: 'button'
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ", "\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ", ";\n  border-radius: 4px;\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"])), getTypographyStyles('Body1_M'), contents000, contents000);
+var ArrowButton = styled(DefaultButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), desktopOnly(css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n    }\n  "])), bg200, bg300)), mobileOnly(css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    min-width: 44px;\n    height: 44px;\n  "])))));
+var BaseButton = styled(DefaultButton)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  &:hover,\n  &:focus {\n    border: solid 1px ", ";\n    border-radius: 4px;\n    background-color: ", ";\n  }\n\n  ", "\n"])), contents300, bg100, mobileOnly(css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    min-width: 44px;\n    height: 44px;\n  "])))));
+var PageButton = styled(BaseButton)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var selected = _ref.selected;
+  return selected && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      border: solid 1px ", ";\n      border-radius: 4px;\n      background-color: ", ";\n    "])), contents300, bg100);
+});
+
+export { ArrowButton, BaseButton, CompactPaginationContainer, CurrentPage, Page, PageButton, Pages, PaginationContainer };
+//# sourceMappingURL=styles.esm.js.map

package/dist/primitive/src/Paginations/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport { mobileOnly, desktopOnly } from '@remember-web/mixin';\n\nexport const PaginationContainer = styled.nav`\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ${mobileOnly(css`\n    gap: 8px;\n  `)}\n`;\n\nexport const CompactPaginationContainer = styled.div`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n`;\n\nexport const CurrentPage = styled.span`\n  ${getTypographyStyles('Body1_B')}\n`;\n\nexport const Pages = styled.ul`\n  all: unset;\n  display: inherit;\n  gap: 4px;\n`;\n\nexport const Page = styled.li``;\n\nconst DefaultButton = styled.button.attrs({ type: 'button' })`\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ${getTypographyStyles('Body1_M')}\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ${contents000};\n  border-radius: 4px;\n\n  &:disabled {\n    color: ${contents000};\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n`;\n\nexport const ArrowButton = styled(DefaultButton)`\n  ${desktopOnly(css`\n    &:hover {\n      background-color: ${bg200};\n    }\n    &:active {\n      background-color: ${bg300};\n    }\n  `)}\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const BaseButton = styled(DefaultButton)`\n  &:hover,\n  &:focus {\n    border: solid 1px ${contents300};\n    border-radius: 4px;\n    background-color: ${bg100};\n  }\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const PageButton = styled(BaseButton)<{ selected?: boolean }>`\n  ${({ selected }) =>\n    selected &&\n    css`\n      border: solid 1px ${contents300};\n      border-radius: 4px;\n      background-color: ${bg100};\n    `}\n`;\n"],"names":["Pages","Page","type","BaseButton","PageButton"],"mappings":";;;;;AAAa;AAcN;;;AA8BMA;AAMAC;AAEb;AAA4CC;AAAe;;AAsC9CC;AAcAC;AACT;AAAW;AAMV;;"}

package/dist/primitive/src/Paginations/{usePagination.cjs → usePagination.cjs.js}

@@ -37,4 +37,4 @@ function usePagination(_ref) {
 }
 
 module.exports = usePagination;
-//# sourceMappingURL=usePagination.cjs.map
+//# sourceMappingURL=usePagination.cjs.js.map

package/dist/primitive/src/Paginations/usePagination.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.cjs.js","sources":["../../../../src/Paginations/usePagination.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { PaginationItems } from './types';\n\nfunction usePagination({\n  itemCountPerPage,\n  pageRangeDisplayed,\n  totalItemCount,\n  activePage,\n}: PaginationItems) {\n  const buffer = activePage % pageRangeDisplayed === 0 ? 1 : 0;\n\n  const firstPage = Math.max(\n    1,\n    Math.floor(activePage / pageRangeDisplayed - buffer) * pageRangeDisplayed +\n      1\n  );\n\n  const totalPages = Math.ceil(totalItemCount / itemCountPerPage);\n\n  const rangeLastPage = useMemo(\n    () =>\n      Math.min(\n        totalPages,\n        Math.ceil(activePage / pageRangeDisplayed) * pageRangeDisplayed\n      ),\n    [activePage, pageRangeDisplayed, totalPages]\n  );\n\n  const totalLastPage = useMemo(\n    () => (!totalItemCount ? 1 : Math.ceil(totalItemCount / itemCountPerPage)),\n    [totalItemCount, itemCountPerPage]\n  );\n\n  const prevPage = firstPage - 1;\n  const nextPage = rangeLastPage + 1;\n\n  const isPrevPageDisabled = prevPage < 1;\n  const isNextPageDisabled = nextPage > totalPages;\n\n  const isFirstPageDisabled = activePage === 1;\n  const isLastPageDisabled = activePage === totalLastPage;\n\n  return {\n    firstPage,\n    rangeLastPage,\n    totalLastPage,\n    totalPages,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n    isFirstPageDisabled,\n    isLastPageDisabled,\n  };\n}\nexport default usePagination;\n"],"names":["usePagination","_ref","itemCountPerPage","pageRangeDisplayed","totalItemCount","activePage","buffer","firstPage","Math","max","floor","totalPages","ceil","rangeLastPage","useMemo","min","totalLastPage","prevPage","nextPage","isPrevPageDisabled","isNextPageDisabled","isFirstPageDisabled","isLastPageDisabled"],"mappings":";;;;AAIA,SAASA,aAAaA,CAAAC,IAAA,EAKF;AAAA,EAAA,IAJlBC,gBAAgB,GAAAD,IAAA,CAAhBC,gBAAgB;IAChBC,kBAAkB,GAAAF,IAAA,CAAlBE,kBAAkB;IAClBC,cAAc,GAAAH,IAAA,CAAdG,cAAc;IACdC,UAAU,GAAAJ,IAAA,CAAVI,UAAU,CAAA;EAEV,IAAMC,MAAM,GAAGD,UAAU,GAAGF,kBAAkB,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;EAE5D,IAAMI,SAAS,GAAGC,IAAI,CAACC,GAAG,CACxB,CAAC,EACDD,IAAI,CAACE,KAAK,CAACL,UAAU,GAAGF,kBAAkB,GAAGG,MAAM,CAAC,GAAGH,kBAAkB,GACvE,CACJ,CAAC,CAAA;EAED,IAAMQ,UAAU,GAAGH,IAAI,CAACI,IAAI,CAACR,cAAc,GAAGF,gBAAgB,CAAC,CAAA;EAE/D,IAAMW,aAAa,GAAGC,aAAO,CAC3B,YAAA;AAAA,IAAA,OACEN,IAAI,CAACO,GAAG,CACNJ,UAAU,EACVH,IAAI,CAACI,IAAI,CAACP,UAAU,GAAGF,kBAAkB,CAAC,GAAGA,kBAC/C,CAAC,CAAA;AAAA,GAAA,EACH,CAACE,UAAU,EAAEF,kBAAkB,EAAEQ,UAAU,CAC7C,CAAC,CAAA;EAED,IAAMK,aAAa,GAAGF,aAAO,CAC3B,YAAA;AAAA,IAAA,OAAO,CAACV,cAAc,GAAG,CAAC,GAAGI,IAAI,CAACI,IAAI,CAACR,cAAc,GAAGF,gBAAgB,CAAC,CAAA;AAAA,GAAC,EAC1E,CAACE,cAAc,EAAEF,gBAAgB,CACnC,CAAC,CAAA;AAED,EAAA,IAAMe,QAAQ,GAAGV,SAAS,GAAG,CAAC,CAAA;AAC9B,EAAA,IAAMW,QAAQ,GAAGL,aAAa,GAAG,CAAC,CAAA;AAElC,EAAA,IAAMM,kBAAkB,GAAGF,QAAQ,GAAG,CAAC,CAAA;AACvC,EAAA,IAAMG,kBAAkB,GAAGF,QAAQ,GAAGP,UAAU,CAAA;AAEhD,EAAA,IAAMU,mBAAmB,GAAGhB,UAAU,KAAK,CAAC,CAAA;AAC5C,EAAA,IAAMiB,kBAAkB,GAAGjB,UAAU,KAAKW,aAAa,CAAA;EAEvD,OAAO;AACLT,IAAAA,SAAS,EAATA,SAAS;AACTM,IAAAA,aAAa,EAAbA,aAAa;AACbG,IAAAA,aAAa,EAAbA,aAAa;AACbL,IAAAA,UAAU,EAAVA,UAAU;AACVM,IAAAA,QAAQ,EAARA,QAAQ;AACRC,IAAAA,QAAQ,EAARA,QAAQ;AACRC,IAAAA,kBAAkB,EAAlBA,kBAAkB;AAClBC,IAAAA,kBAAkB,EAAlBA,kBAAkB;AAClBC,IAAAA,mBAAmB,EAAnBA,mBAAmB;AACnBC,IAAAA,kBAAkB,EAAlBA,kBAAAA;GACD,CAAA;AACH;;;;"}

package/dist/primitive/src/Paginations/{usePagination.js → usePagination.esm.js}

@@ -35,4 +35,4 @@ function usePagination(_ref) {
 }
 
 export { usePagination as default };
-//# sourceMappingURL=usePagination.js.map
+//# sourceMappingURL=usePagination.esm.js.map

package/dist/primitive/src/Paginations/usePagination.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.esm.js","sources":["../../../../src/Paginations/usePagination.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { PaginationItems } from './types';\n\nfunction usePagination({\n  itemCountPerPage,\n  pageRangeDisplayed,\n  totalItemCount,\n  activePage,\n}: PaginationItems) {\n  const buffer = activePage % pageRangeDisplayed === 0 ? 1 : 0;\n\n  const firstPage = Math.max(\n    1,\n    Math.floor(activePage / pageRangeDisplayed - buffer) * pageRangeDisplayed +\n      1\n  );\n\n  const totalPages = Math.ceil(totalItemCount / itemCountPerPage);\n\n  const rangeLastPage = useMemo(\n    () =>\n      Math.min(\n        totalPages,\n        Math.ceil(activePage / pageRangeDisplayed) * pageRangeDisplayed\n      ),\n    [activePage, pageRangeDisplayed, totalPages]\n  );\n\n  const totalLastPage = useMemo(\n    () => (!totalItemCount ? 1 : Math.ceil(totalItemCount / itemCountPerPage)),\n    [totalItemCount, itemCountPerPage]\n  );\n\n  const prevPage = firstPage - 1;\n  const nextPage = rangeLastPage + 1;\n\n  const isPrevPageDisabled = prevPage < 1;\n  const isNextPageDisabled = nextPage > totalPages;\n\n  const isFirstPageDisabled = activePage === 1;\n  const isLastPageDisabled = activePage === totalLastPage;\n\n  return {\n    firstPage,\n    rangeLastPage,\n    totalLastPage,\n    totalPages,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n    isFirstPageDisabled,\n    isLastPageDisabled,\n  };\n}\nexport default usePagination;\n"],"names":["usePagination","_ref","itemCountPerPage","pageRangeDisplayed","totalItemCount","activePage","buffer","firstPage","Math","max","floor","totalPages","ceil","rangeLastPage","useMemo","min","totalLastPage","prevPage","nextPage","isPrevPageDisabled","isNextPageDisabled","isFirstPageDisabled","isLastPageDisabled"],"mappings":";;AAIA,SAASA,aAAaA,CAAAC,IAAA,EAKF;AAAA,EAAA,IAJlBC,gBAAgB,GAAAD,IAAA,CAAhBC,gBAAgB;IAChBC,kBAAkB,GAAAF,IAAA,CAAlBE,kBAAkB;IAClBC,cAAc,GAAAH,IAAA,CAAdG,cAAc;IACdC,UAAU,GAAAJ,IAAA,CAAVI,UAAU,CAAA;EAEV,IAAMC,MAAM,GAAGD,UAAU,GAAGF,kBAAkB,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;EAE5D,IAAMI,SAAS,GAAGC,IAAI,CAACC,GAAG,CACxB,CAAC,EACDD,IAAI,CAACE,KAAK,CAACL,UAAU,GAAGF,kBAAkB,GAAGG,MAAM,CAAC,GAAGH,kBAAkB,GACvE,CACJ,CAAC,CAAA;EAED,IAAMQ,UAAU,GAAGH,IAAI,CAACI,IAAI,CAACR,cAAc,GAAGF,gBAAgB,CAAC,CAAA;EAE/D,IAAMW,aAAa,GAAGC,OAAO,CAC3B,YAAA;AAAA,IAAA,OACEN,IAAI,CAACO,GAAG,CACNJ,UAAU,EACVH,IAAI,CAACI,IAAI,CAACP,UAAU,GAAGF,kBAAkB,CAAC,GAAGA,kBAC/C,CAAC,CAAA;AAAA,GAAA,EACH,CAACE,UAAU,EAAEF,kBAAkB,EAAEQ,UAAU,CAC7C,CAAC,CAAA;EAED,IAAMK,aAAa,GAAGF,OAAO,CAC3B,YAAA;AAAA,IAAA,OAAO,CAACV,cAAc,GAAG,CAAC,GAAGI,IAAI,CAACI,IAAI,CAACR,cAAc,GAAGF,gBAAgB,CAAC,CAAA;AAAA,GAAC,EAC1E,CAACE,cAAc,EAAEF,gBAAgB,CACnC,CAAC,CAAA;AAED,EAAA,IAAMe,QAAQ,GAAGV,SAAS,GAAG,CAAC,CAAA;AAC9B,EAAA,IAAMW,QAAQ,GAAGL,aAAa,GAAG,CAAC,CAAA;AAElC,EAAA,IAAMM,kBAAkB,GAAGF,QAAQ,GAAG,CAAC,CAAA;AACvC,EAAA,IAAMG,kBAAkB,GAAGF,QAAQ,GAAGP,UAAU,CAAA;AAEhD,EAAA,IAAMU,mBAAmB,GAAGhB,UAAU,KAAK,CAAC,CAAA;AAC5C,EAAA,IAAMiB,kBAAkB,GAAGjB,UAAU,KAAKW,aAAa,CAAA;EAEvD,OAAO;AACLT,IAAAA,SAAS,EAATA,SAAS;AACTM,IAAAA,aAAa,EAAbA,aAAa;AACbG,IAAAA,aAAa,EAAbA,aAAa;AACbL,IAAAA,UAAU,EAAVA,UAAU;AACVM,IAAAA,QAAQ,EAARA,QAAQ;AACRC,IAAAA,QAAQ,EAARA,QAAQ;AACRC,IAAAA,kBAAkB,EAAlBA,kBAAkB;AAClBC,IAAAA,kBAAkB,EAAlBA,kBAAkB;AAClBC,IAAAA,mBAAmB,EAAnBA,mBAAmB;AACnBC,IAAAA,kBAAkB,EAAlBA,kBAAAA;GACD,CAAA;AACH;;;;"}

package/dist/primitive/src/hooks/{useMouseEventAway.cjs → useMouseEventAway.cjs.js}

@@ -24,4 +24,4 @@ function useMouseEventAway(eventName, callback) {
 }
 
 module.exports = useMouseEventAway;
-//# sourceMappingURL=useMouseEventAway.cjs.map
+//# sourceMappingURL=useMouseEventAway.cjs.js.map

package/dist/primitive/src/hooks/useMouseEventAway.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseEventAway.cjs.js","sources":["../../../../src/hooks/useMouseEventAway.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ntype MouseEventNames = Extract<\n  keyof DocumentEventMap,\n  `mouse${string}` | `pointer${string}` | `touch${string}` | 'click'\n>;\n\nexport default function useMouseEventAway<\n  T extends HTMLElement,\n  E extends MouseEventNames\n>(eventName: E, callback: (e: DocumentEventMap[E]) => void) {\n  const ref = useRef<T | null>(null);\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n\n  useEffect(() => {\n    function clickAwayHandler(e: DocumentEventMap[E]) {\n      if (!(e.target instanceof Node)) {\n        return;\n      }\n\n      if (ref.current && !ref.current.contains(e.target)) {\n        callbackRef.current(e);\n      }\n    }\n\n    document.addEventListener(eventName, clickAwayHandler, true);\n\n    return () => {\n      document.removeEventListener(eventName, clickAwayHandler, true);\n    };\n  }, [eventName]);\n\n  return ref;\n}\n"],"names":["useMouseEventAway","eventName","callback","ref","useRef","callbackRef","current","useEffect","clickAwayHandler","e","target","Node","contains","document","addEventListener","removeEventListener"],"mappings":";;;;AAOe,SAASA,iBAAiBA,CAGvCC,SAAY,EAAEC,QAA0C,EAAE;AAC1D,EAAA,IAAMC,GAAG,GAAGC,YAAM,CAAW,IAAI,CAAC,CAAA;AAClC,EAAA,IAAMC,WAAW,GAAGD,YAAM,CAACF,QAAQ,CAAC,CAAA;EACpCG,WAAW,CAACC,OAAO,GAAGJ,QAAQ,CAAA;AAE9BK,EAAAA,eAAS,CAAC,YAAM;IACd,SAASC,gBAAgBA,CAACC,CAAsB,EAAE;AAChD,MAAA,IAAI,EAAEA,CAAC,CAACC,MAAM,YAAYC,IAAI,CAAC,EAAE;AAC/B,QAAA,OAAA;AACF,OAAA;AAEA,MAAA,IAAIR,GAAG,CAACG,OAAO,IAAI,CAACH,GAAG,CAACG,OAAO,CAACM,QAAQ,CAACH,CAAC,CAACC,MAAM,CAAC,EAAE;AAClDL,QAAAA,WAAW,CAACC,OAAO,CAACG,CAAC,CAAC,CAAA;AACxB,OAAA;AACF,KAAA;IAEAI,QAAQ,CAACC,gBAAgB,CAACb,SAAS,EAAEO,gBAAgB,EAAE,IAAI,CAAC,CAAA;AAE5D,IAAA,OAAO,YAAM;MACXK,QAAQ,CAACE,mBAAmB,CAACd,SAAS,EAAEO,gBAAgB,EAAE,IAAI,CAAC,CAAA;KAChE,CAAA;AACH,GAAC,EAAE,CAACP,SAAS,CAAC,CAAC,CAAA;AAEf,EAAA,OAAOE,GAAG,CAAA;AACZ;;;;"}

package/dist/primitive/src/hooks/{useMouseEventAway.js → useMouseEventAway.esm.js}

@@ -22,4 +22,4 @@ function useMouseEventAway(eventName, callback) {
 }
 
 export { useMouseEventAway as default };
-//# sourceMappingURL=useMouseEventAway.js.map
+//# sourceMappingURL=useMouseEventAway.esm.js.map

package/dist/primitive/src/hooks/useMouseEventAway.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseEventAway.esm.js","sources":["../../../../src/hooks/useMouseEventAway.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ntype MouseEventNames = Extract<\n  keyof DocumentEventMap,\n  `mouse${string}` | `pointer${string}` | `touch${string}` | 'click'\n>;\n\nexport default function useMouseEventAway<\n  T extends HTMLElement,\n  E extends MouseEventNames\n>(eventName: E, callback: (e: DocumentEventMap[E]) => void) {\n  const ref = useRef<T | null>(null);\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n\n  useEffect(() => {\n    function clickAwayHandler(e: DocumentEventMap[E]) {\n      if (!(e.target instanceof Node)) {\n        return;\n      }\n\n      if (ref.current && !ref.current.contains(e.target)) {\n        callbackRef.current(e);\n      }\n    }\n\n    document.addEventListener(eventName, clickAwayHandler, true);\n\n    return () => {\n      document.removeEventListener(eventName, clickAwayHandler, true);\n    };\n  }, [eventName]);\n\n  return ref;\n}\n"],"names":["useMouseEventAway","eventName","callback","ref","useRef","callbackRef","current","useEffect","clickAwayHandler","e","target","Node","contains","document","addEventListener","removeEventListener"],"mappings":";;AAOe,SAASA,iBAAiBA,CAGvCC,SAAY,EAAEC,QAA0C,EAAE;AAC1D,EAAA,IAAMC,GAAG,GAAGC,MAAM,CAAW,IAAI,CAAC,CAAA;AAClC,EAAA,IAAMC,WAAW,GAAGD,MAAM,CAACF,QAAQ,CAAC,CAAA;EACpCG,WAAW,CAACC,OAAO,GAAGJ,QAAQ,CAAA;AAE9BK,EAAAA,SAAS,CAAC,YAAM;IACd,SAASC,gBAAgBA,CAACC,CAAsB,EAAE;AAChD,MAAA,IAAI,EAAEA,CAAC,CAACC,MAAM,YAAYC,IAAI,CAAC,EAAE;AAC/B,QAAA,OAAA;AACF,OAAA;AAEA,MAAA,IAAIR,GAAG,CAACG,OAAO,IAAI,CAACH,GAAG,CAACG,OAAO,CAACM,QAAQ,CAACH,CAAC,CAACC,MAAM,CAAC,EAAE;AAClDL,QAAAA,WAAW,CAACC,OAAO,CAACG,CAAC,CAAC,CAAA;AACxB,OAAA;AACF,KAAA;IAEAI,QAAQ,CAACC,gBAAgB,CAACb,SAAS,EAAEO,gBAAgB,EAAE,IAAI,CAAC,CAAA;AAE5D,IAAA,OAAO,YAAM;MACXK,QAAQ,CAACE,mBAAmB,CAACd,SAAS,EAAEO,gBAAgB,EAAE,IAAI,CAAC,CAAA;KAChE,CAAA;AACH,GAAC,EAAE,CAACP,SAAS,CAAC,CAAC,CAAA;AAEf,EAAA,OAAOE,GAAG,CAAA;AACZ;;;;"}

package/dist/primitive/src/index.cjs.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var index = require('./Avatars/Avatar/index.cjs.js');
+var index$1 = require('./Buttons/Button/index.cjs.js');
+var utils = require('./Badge/utils.cjs.js');
+var Badge = require('./Badge/Badge.cjs.js');
+var index$3 = require('./Common/Divider/index.cjs.js');
+var index$4 = require('./Common/Flex/index.cjs.js');
+var index$5 = require('./Common/Grid/index.cjs.js');
+var index$6 = require('./Common/Spinner/index.cjs.js');
+var index$2 = require('./Common/Typography/index.cjs.js');
+var Checkbox = require('./Control/Checkbox.cjs.js');
+var Toggle = require('./Control/Toggle.cjs.js');
+var index$7 = require('./Control/Switch/index.cjs.js');
+var Radio = require('./Control/Radio.cjs.js');
+var index$8 = require('./Logos/RememberLogo/index.cjs.js');
+var index$9 = require('./Logos/RememberMobileLogo/index.cjs.js');
+var index$a = require('./Logos/RememberSquareLogo/index.cjs.js');
+var index$b = require('./Logos/RememberServiceLogo/index.cjs.js');
+var index$c = require('./Modals/Dialog/index.cjs.js');
+var index$d = require('./Paginations/Pagination/index.cjs.js');
+var index$e = require('./Paginations/CompactPagination/index.cjs.js');
+var index$f = require('./Inputs/TextInput/index.cjs.js');
+var index$g = require('./Inputs/Select/index.cjs.js');
+var index$h = require('./Floating/Tooltip/index.cjs.js');
+var index$i = require('./Floating/Popover/index.cjs.js');
+var index$j = require('./Floating/DropdownMenu/index.cjs.js');
+
+
+
+exports.Avatar = index;
+exports.Button = index$1;
+exports.badgePseudo = utils.badgePseudo;
+exports.Badge = Badge.Badge;
+exports.Divider = index$3.Divider;
+exports.Flex = index$4.Flex;
+exports.Grid = index$5.Grid;
+exports.Spinner = index$6.Spinner;
+exports.Typography = index$2;
+exports.Checkbox = Checkbox.Checkbox;
+exports._Checkbox = Checkbox._Checkbox;
+exports.CircleBaseToggle = Toggle.CircleBaseToggle;
+exports.Toggle = Toggle.Toggle;
+exports._Toggle = Toggle._Toggle;
+exports.Switch = index$7.Switch;
+exports.Radio = Radio.Radio;
+exports.RememberLogo = index$8.RememberLogo;
+exports.getViewBoxWidth = index$8.getViewBoxWidth;
+exports.RememberMobileLogo = index$9.RememberMobileLogo;
+exports.RememberSquareLogo = index$a.RememberSquareLogo;
+exports.RememberServiceLogo = index$b.RememberServiceLogo;
+exports.Dialog = index$c.Dialog;
+exports.Pagination = index$d.Pagination;
+exports.CompactPagination = index$e.CompactPagination;
+exports.TextInput = index$f;
+exports.Select = index$g;
+exports.Tooltip = index$h;
+exports.Popover = index$i;
+exports.DropdownMenu = index$j;
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/primitive/src/index.esm.js

@@ -0,0 +1,26 @@
+export { default as Avatar } from './Avatars/Avatar/index.esm.js';
+export { default as Button } from './Buttons/Button/index.esm.js';
+export { badgePseudo } from './Badge/utils.esm.js';
+export { Badge } from './Badge/Badge.esm.js';
+export { Divider } from './Common/Divider/index.esm.js';
+export { Flex } from './Common/Flex/index.esm.js';
+export { Grid } from './Common/Grid/index.esm.js';
+export { Spinner } from './Common/Spinner/index.esm.js';
+export { default as Typography } from './Common/Typography/index.esm.js';
+export { Checkbox, _Checkbox } from './Control/Checkbox.esm.js';
+export { CircleBaseToggle, Toggle, _Toggle } from './Control/Toggle.esm.js';
+export { Switch } from './Control/Switch/index.esm.js';
+export { Radio } from './Control/Radio.esm.js';
+export { RememberLogo, getViewBoxWidth } from './Logos/RememberLogo/index.esm.js';
+export { RememberMobileLogo } from './Logos/RememberMobileLogo/index.esm.js';
+export { RememberSquareLogo } from './Logos/RememberSquareLogo/index.esm.js';
+export { RememberServiceLogo } from './Logos/RememberServiceLogo/index.esm.js';
+export { Dialog } from './Modals/Dialog/index.esm.js';
+export { Pagination } from './Paginations/Pagination/index.esm.js';
+export { CompactPagination } from './Paginations/CompactPagination/index.esm.js';
+export { default as TextInput } from './Inputs/TextInput/index.esm.js';
+export { default as Select } from './Inputs/Select/index.esm.js';
+export { default as Tooltip } from './Floating/Tooltip/index.esm.js';
+export { default as Popover } from './Floating/Popover/index.esm.js';
+export { default as DropdownMenu } from './Floating/DropdownMenu/index.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/shared/utils/{common.cjs → common.cjs.js}

@@ -14,4 +14,4 @@ var isSSR = function isSSR() {
 
 exports.isSSR = isSSR;
 exports.range = range;
-//# sourceMappingURL=common.cjs.map
+//# sourceMappingURL=common.cjs.js.map

package/dist/shared/utils/common.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.cjs.js","sources":["../../../../shared/utils/common.ts"],"sourcesContent":["export const range = (start: number, end: number) => {\n  if (end < start) {\n    return []; // 유효하지 않은 입력값 처리\n  }\n  return Array(end - start + 1)\n    .fill(0)\n    .map((_, idx) => start + idx);\n};\nexport const isSSR = () => typeof window === 'undefined';\n"],"names":["range","start","end","Array","fill","map","_","idx","isSSR","window"],"mappings":";;AAAO,IAAMA,KAAK,GAAG,SAARA,KAAKA,CAAIC,KAAa,EAAEC,GAAW,EAAK;EACnD,IAAIA,GAAG,GAAGD,KAAK,EAAE;IACf,OAAO,EAAE,CAAC;AACZ,GAAA;AACA,EAAA,OAAOE,KAAK,CAACD,GAAG,GAAGD,KAAK,GAAG,CAAC,CAAC,CAC1BG,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CAAC,UAACC,CAAC,EAAEC,GAAG,EAAA;IAAA,OAAKN,KAAK,GAAGM,GAAG,CAAA;GAAC,CAAA,CAAA;AACjC,EAAC;AACYC,IAAAA,KAAK,GAAG,SAARA,KAAKA,GAAA;EAAA,OAAS,OAAOC,MAAM,KAAK,WAAW,CAAA;AAAA;;;;;"}

package/dist/shared/utils/{common.js → common.esm.js}

@@ -11,4 +11,4 @@ var isSSR = function isSSR() {
 };
 
 export { isSSR, range };
-//# sourceMappingURL=common.js.map
+//# sourceMappingURL=common.esm.js.map