@remember-web/primitive 0.1.13 → 0.1.14

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

@@ -0,0 +1,95 @@
+"use client";
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var icon = require('@remember-web/icon');
+var index = require('../../Common/Flex/index.cjs.js');
+var styles = require('./styles.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
+
+var _excluded = ["children"],
+  _excluded2 = ["children", "dimmed"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @prop {React.ReactNode} children
+ * @prop {boolean} open
+ * @prop {boolean} defaultOpen
+ * @prop {(open: boolean) => void} onOpenChange
+ * @prop {boolean} modal
+ * @prop {string} id
+ */
+function Dialog(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties__default.default(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsx(DialogPrimitive.Root, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+}
+
+/**
+ * @prop {boolean} dimmed
+ * @see https://www.radix-ui.com/docs/primitives/components/dialog
+ */
+Dialog.Content = function (_ref2) {
+  var children = _ref2.children,
+    _ref2$dimmed = _ref2.dimmed,
+    dimmed = _ref2$dimmed === void 0 ? true : _ref2$dimmed,
+    props = _objectWithoutProperties__default.default(_ref2, _excluded2);
+  return /*#__PURE__*/jsxRuntime.jsxs(DialogPrimitive.Portal, {
+    children: [dimmed && /*#__PURE__*/jsxRuntime.jsx(styles.StyledOverlay, {}), /*#__PURE__*/jsxRuntime.jsx(styles.DialogContent, _objectSpread(_objectSpread({}, props), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsx(index.Flex, {
+        direction: "column",
+        align: "center",
+        children: children
+      })
+    }))]
+  });
+};
+Dialog.HeadIcon = function (_ref3) {
+  var _ref3$type = _ref3.type,
+    type = _ref3$type === void 0 ? 'alert' : _ref3$type;
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.DialogIcon, {
+    children: [type === 'alert' && /*#__PURE__*/jsxRuntime.jsx(icon.PictogramAlert, {
+      size: 40
+    }), type === 'confirm' && /*#__PURE__*/jsxRuntime.jsx(icon.PictogramCheck, {
+      size: 40
+    })]
+  });
+};
+Dialog.CloseIcon = function () {
+  return /*#__PURE__*/jsxRuntime.jsx(DialogPrimitive.Close, {
+    asChild: true,
+    children: /*#__PURE__*/jsxRuntime.jsx(styles.IconButton, {
+      type: "button",
+      "aria-label": "Close",
+      children: /*#__PURE__*/jsxRuntime.jsx(icon.IconClose, {
+        size: "small"
+      })
+    })
+  });
+};
+Dialog.Title = function (_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/jsxRuntime.jsx(styles.DialogTitle, {
+    children: children
+  });
+};
+Dialog.Description = function (_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/jsxRuntime.jsx(styles.DialogDescription, {
+    children: children
+  });
+};
+Dialog.Trigger = DialogPrimitive.Trigger;
+Dialog.Close = DialogPrimitive.Close;
+
+exports.Dialog = Dialog;
+//# sourceMappingURL=index.cjs.js.map

package/dist/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';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport { Flex } from '@/Common/Flex';\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/src/Modals/Dialog/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';
+interface ContentProps extends DialogContentProps {
+    children: React.ReactNode;
+    dimmed?: boolean;
+}
+/**
+ * @prop {React.ReactNode} children
+ * @prop {boolean} open
+ * @prop {boolean} defaultOpen
+ * @prop {(open: boolean) => void} onOpenChange
+ * @prop {boolean} modal
+ * @prop {string} id
+ */
+export declare function Dialog({ children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dialog {
+    var Content: ({ children, dimmed, ...props }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+    var HeadIcon: ({ type }: {
+        type?: "alert" | "confirm" | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var CloseIcon: () => import("react/jsx-runtime").JSX.Element;
+    var Title: ({ children }: {
+        children: import("react").ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Description: ({ children }: {
+        children: import("react").ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    var Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Modals/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Modals/Dialog/index.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAe9E,UAAU,YAAa,SAAQ,kBAAkB;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAEzD;yBAFe,MAAM"}

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

@@ -0,0 +1,88 @@
+"use client";
+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 { PictogramAlert, PictogramCheck, IconClose } from '@remember-web/icon';
+import { Flex } from '../../Common/Flex/index.esm.js';
+import { StyledOverlay, DialogContent, DialogIcon, IconButton, DialogTitle, DialogDescription } from './styles.esm.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _excluded = ["children"],
+  _excluded2 = ["children", "dimmed"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @prop {React.ReactNode} children
+ * @prop {boolean} open
+ * @prop {boolean} defaultOpen
+ * @prop {(open: boolean) => void} onOpenChange
+ * @prop {boolean} modal
+ * @prop {string} id
+ */
+function Dialog(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx(Root, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+}
+
+/**
+ * @prop {boolean} dimmed
+ * @see https://www.radix-ui.com/docs/primitives/components/dialog
+ */
+Dialog.Content = function (_ref2) {
+  var children = _ref2.children,
+    _ref2$dimmed = _ref2.dimmed,
+    dimmed = _ref2$dimmed === void 0 ? true : _ref2$dimmed,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/jsxs(Portal, {
+    children: [dimmed && /*#__PURE__*/jsx(StyledOverlay, {}), /*#__PURE__*/jsx(DialogContent, _objectSpread(_objectSpread({}, props), {}, {
+      children: /*#__PURE__*/jsx(Flex, {
+        direction: "column",
+        align: "center",
+        children: children
+      })
+    }))]
+  });
+};
+Dialog.HeadIcon = function (_ref3) {
+  var _ref3$type = _ref3.type,
+    type = _ref3$type === void 0 ? 'alert' : _ref3$type;
+  return /*#__PURE__*/jsxs(DialogIcon, {
+    children: [type === 'alert' && /*#__PURE__*/jsx(PictogramAlert, {
+      size: 40
+    }), type === 'confirm' && /*#__PURE__*/jsx(PictogramCheck, {
+      size: 40
+    })]
+  });
+};
+Dialog.CloseIcon = function () {
+  return /*#__PURE__*/jsx(Close, {
+    asChild: true,
+    children: /*#__PURE__*/jsx(IconButton, {
+      type: "button",
+      "aria-label": "Close",
+      children: /*#__PURE__*/jsx(IconClose, {
+        size: "small"
+      })
+    })
+  });
+};
+Dialog.Title = function (_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/jsx(DialogTitle, {
+    children: children
+  });
+};
+Dialog.Description = function (_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/jsx(DialogDescription, {
+    children: children
+  });
+};
+Dialog.Trigger = Trigger;
+Dialog.Close = Close;
+
+export { Dialog };
+//# sourceMappingURL=index.esm.js.map

package/dist/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';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport { Flex } from '@/Common/Flex';\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/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/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';\nimport {\n  primary200,\n  contents000,\n  contents100,\n  getTypographyStyles,\n} 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;AAWN;AAKA;;;AAsCMA;AAIAC;AASN;AASA;;;;;;;;;"}

package/dist/src/Modals/Dialog/styles.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export declare const overlayShow: import("styled-components/dist/models/Keyframes").default;
+export declare const contentShow: import("styled-components/dist/models/Keyframes").default;
+export declare const StyledOverlay: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & Omit<import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const DialogContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & Omit<import("react").ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const DialogIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const IconButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const DialogTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | null) => void) | import("react").RefObject<HTMLHeadingElement> | null | undefined;
+}, never>> & Omit<import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const DialogDescription: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+}, never>> & Omit<import("react").ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>, keyof import("react").Component<any, {}, any>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/src/Modals/Dialog/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Modals/Dialog/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAQ1D,eAAO,MAAM,WAAW,2DAGvB,CAAC;AAEF,eAAO,MAAM,WAAW,2DAGvB,CAAC;AAEF,eAAO,MAAM,aAAa;;+LAQzB,CAAC;AAEF,eAAO,MAAM,aAAa;;+LAqBzB,CAAC;AAEF,eAAO,MAAM,UAAU,gNAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,4NAOtB,CAAC;AAEF,eAAO,MAAM,WAAW;;iMAOvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;yMAO7B,CAAC"}

package/dist/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/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';\nimport {\n  primary200,\n  contents000,\n  contents100,\n  getTypographyStyles,\n} 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;AAWN;AAKA;;;AAsCMA;AAIAC;AASN;AASA;;"}

package/dist/src/Modals/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Modals/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modals/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,98 @@
+"use client";
+'use strict';
+
+var icon = require('@remember-web/icon');
+var mixin = require('@remember-web/mixin');
+var index = require('../../Common/Flex/index.cjs.js');
+var styles = require('../styles.cjs.js');
+var usePagination = require('../usePagination.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function CompactPagination(_ref) {
+  var _ref$activePage = _ref.activePage,
+    activePage = _ref$activePage === void 0 ? 1 : _ref$activePage,
+    _ref$totalItemCount = _ref.totalItemCount,
+    totalItemCount = _ref$totalItemCount === void 0 ? 0 : _ref$totalItemCount,
+    onChangePage = _ref.onChangePage,
+    itemCountPerPage = _ref.itemCountPerPage,
+    _ref$infinite = _ref.infinite,
+    infinite = _ref$infinite === void 0 ? false : _ref$infinite,
+    className = _ref.className;
+  var _usePagination = usePagination({
+      activePage: activePage,
+      totalItemCount: totalItemCount,
+      pageRangeDisplayed: 1,
+      itemCountPerPage: itemCountPerPage
+    }),
+    totalLastPage = _usePagination.totalLastPage,
+    prevPage = _usePagination.prevPage,
+    nextPage = _usePagination.nextPage,
+    isPrevPageDisabled = _usePagination.isPrevPageDisabled,
+    isNextPageDisabled = _usePagination.isNextPageDisabled;
+  var iconColor = function iconColor(disabled) {
+    return disabled ? mixin.contents300 : mixin.contents000;
+  };
+  var onClickPrevPage = function onClickPrevPage() {
+    var prevPageToGo = activePage === 1 && infinite ? totalLastPage : prevPage;
+    onChangePage(prevPageToGo);
+  };
+  var onClickNextPage = function onClickNextPage() {
+    var nextPageToGo = activePage === totalLastPage && infinite ? 1 : nextPage;
+    onChangePage(nextPageToGo);
+  };
+  var hasOnlyOnePage = totalLastPage === 1;
+  var getArrowButtonDisabled = function getArrowButtonDisabled(disabled) {
+    if (hasOnlyOnePage) {
+      return true;
+    }
+    if (infinite) {
+      return false;
+    }
+    return disabled;
+  };
+  var getArrowButtonColor = function getArrowButtonColor(disabled) {
+    if (hasOnlyOnePage) {
+      return mixin.contents300;
+    }
+    if (infinite) {
+      return mixin.contents000;
+    }
+    return iconColor(disabled);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.CompactPaginationContainer, {
+    className: className,
+    role: "navigation",
+    "aria-label": "\uD398\uC774\uC9C0\uB124\uC774\uC158",
+    children: [/*#__PURE__*/jsxRuntime.jsx(styles.ArrowButton, {
+      disabled: getArrowButtonDisabled(isPrevPageDisabled),
+      onClick: onClickPrevPage,
+      "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9",
+      children: /*#__PURE__*/jsxRuntime.jsx(icon.IconArrow2Left, {
+        size: "small",
+        color: getArrowButtonColor(isPrevPageDisabled),
+        "aria-hidden": "true"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(index.Flex, {
+      gap: "4px",
+      style: {
+        minWidth: '44px',
+        userSelect: 'none'
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(styles.CurrentPage, {
+        children: activePage
+      }), "/ ", totalLastPage]
+    }), /*#__PURE__*/jsxRuntime.jsx(styles.ArrowButton, {
+      disabled: getArrowButtonDisabled(isNextPageDisabled),
+      onClick: onClickNextPage,
+      "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0\uB85C \uC774\uB3D9",
+      children: /*#__PURE__*/jsxRuntime.jsx(icon.IconArrow2Right, {
+        size: "small",
+        color: getArrowButtonColor(isNextPageDisabled),
+        "aria-hidden": "true"
+      })
+    })]
+  });
+}
+
+exports.CompactPagination = CompactPagination;
+//# sourceMappingURL=index.cjs.js.map

package/dist/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 { contents000, contents300 } from '@remember-web/mixin';\n\nimport { Flex } from '@/Common/Flex';\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":";;;;;;;;;;AAeO;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/src/Paginations/CompactPagination/index.d.ts

@@ -0,0 +1,3 @@
+import type { CompactPaginationProps } from '../types';
+export declare function CompactPagination({ activePage, totalItemCount, onChangePage, itemCountPerPage, infinite, className, }: CompactPaginationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Paginations/CompactPagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Paginations/CompactPagination/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGvD,wBAAgB,iBAAiB,CAAC,EAChC,UAAc,EACd,cAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,QAAgB,EAChB,SAAS,GACV,EAAE,sBAAsB,2CAoFxB"}

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

@@ -0,0 +1,96 @@
+"use client";
+import { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';
+import { contents300, contents000 } from '@remember-web/mixin';
+import { Flex } from '../../Common/Flex/index.esm.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) {
+  var _ref$activePage = _ref.activePage,
+    activePage = _ref$activePage === void 0 ? 1 : _ref$activePage,
+    _ref$totalItemCount = _ref.totalItemCount,
+    totalItemCount = _ref$totalItemCount === void 0 ? 0 : _ref$totalItemCount,
+    onChangePage = _ref.onChangePage,
+    itemCountPerPage = _ref.itemCountPerPage,
+    _ref$infinite = _ref.infinite,
+    infinite = _ref$infinite === void 0 ? false : _ref$infinite,
+    className = _ref.className;
+  var _usePagination = usePagination({
+      activePage: activePage,
+      totalItemCount: totalItemCount,
+      pageRangeDisplayed: 1,
+      itemCountPerPage: itemCountPerPage
+    }),
+    totalLastPage = _usePagination.totalLastPage,
+    prevPage = _usePagination.prevPage,
+    nextPage = _usePagination.nextPage,
+    isPrevPageDisabled = _usePagination.isPrevPageDisabled,
+    isNextPageDisabled = _usePagination.isNextPageDisabled;
+  var iconColor = function iconColor(disabled) {
+    return disabled ? contents300 : contents000;
+  };
+  var onClickPrevPage = function onClickPrevPage() {
+    var prevPageToGo = activePage === 1 && infinite ? totalLastPage : prevPage;
+    onChangePage(prevPageToGo);
+  };
+  var onClickNextPage = function onClickNextPage() {
+    var nextPageToGo = activePage === totalLastPage && infinite ? 1 : nextPage;
+    onChangePage(nextPageToGo);
+  };
+  var hasOnlyOnePage = totalLastPage === 1;
+  var getArrowButtonDisabled = function getArrowButtonDisabled(disabled) {
+    if (hasOnlyOnePage) {
+      return true;
+    }
+    if (infinite) {
+      return false;
+    }
+    return disabled;
+  };
+  var getArrowButtonColor = function getArrowButtonColor(disabled) {
+    if (hasOnlyOnePage) {
+      return contents300;
+    }
+    if (infinite) {
+      return contents000;
+    }
+    return iconColor(disabled);
+  };
+  return /*#__PURE__*/jsxs(CompactPaginationContainer, {
+    className: className,
+    role: "navigation",
+    "aria-label": "\uD398\uC774\uC9C0\uB124\uC774\uC158",
+    children: [/*#__PURE__*/jsx(ArrowButton, {
+      disabled: getArrowButtonDisabled(isPrevPageDisabled),
+      onClick: onClickPrevPage,
+      "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9",
+      children: /*#__PURE__*/jsx(IconArrow2Left, {
+        size: "small",
+        color: getArrowButtonColor(isPrevPageDisabled),
+        "aria-hidden": "true"
+      })
+    }), /*#__PURE__*/jsxs(Flex, {
+      gap: "4px",
+      style: {
+        minWidth: '44px',
+        userSelect: 'none'
+      },
+      children: [/*#__PURE__*/jsx(CurrentPage, {
+        children: activePage
+      }), "/ ", totalLastPage]
+    }), /*#__PURE__*/jsx(ArrowButton, {
+      disabled: getArrowButtonDisabled(isNextPageDisabled),
+      onClick: onClickNextPage,
+      "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0\uB85C \uC774\uB3D9",
+      children: /*#__PURE__*/jsx(IconArrow2Right, {
+        size: "small",
+        color: getArrowButtonColor(isNextPageDisabled),
+        "aria-hidden": "true"
+      })
+    })]
+  });
+}
+
+export { CompactPagination };
+//# sourceMappingURL=index.esm.js.map

package/dist/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 { contents000, contents300 } from '@remember-web/mixin';\n\nimport { Flex } from '@/Common/Flex';\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":";;;;;;;;AAeO;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;;"}