@remember-web/primitive 0.1.19 → 0.1.20

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

@@ -72,7 +72,7 @@ function CompactPagination(_ref) {
         color: getArrowButtonColor(isPrevPageDisabled),
         "aria-hidden": "true"
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(index, {
+    }), /*#__PURE__*/jsxRuntime.jsxs(index.Flex, {
       gap: "4px",
       style: {
         minWidth: '44px',

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

@@ -1 +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;;"}
+{"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.esm.js

@@ -1,7 +1,7 @@
 "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 { 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';

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

@@ -1 +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;;"}
+{"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;;"}

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

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

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

@@ -1 +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  mobileOnly,\n  desktopOnly,\n} 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;;;;;;;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  desktopOnly,\n  getTypographyStyles,\n  mobileOnly,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\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/src/Paginations/styles.esm.js

@@ -1,7 +1,7 @@
 "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';
+import styled, { css } from 'styled-components';
 
 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  "])))));

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

@@ -1 +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  mobileOnly,\n  desktopOnly,\n} 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;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  desktopOnly,\n  getTypographyStyles,\n  mobileOnly,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\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/src/hooks/useMouseEventAway.cjs.js.map

@@ -1 +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;;;;"}
+{"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/src/hooks/useMouseEventAway.esm.js.map

@@ -1 +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;;;;"}
+{"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/src/index.cjs.js

@@ -6,28 +6,29 @@ var index$1 = require('./Buttons/Button/index.cjs.js');
 var utils = require('./Badge/utils.cjs.js');
 var Badge = require('./Badge/Badge.cjs.js');
 var style = require('./Badge/style.cjs.js');
-var index$4 = require('./Common/Divider/index.cjs.js');
-var index$2 = 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$3 = require('./Common/Typography/index.cjs.js');
+var index$2 = require('./Common/Divider/index.cjs.js');
+var index$3 = require('./Common/Flex/index.cjs.js');
+var index$4 = require('./Common/Grid/index.cjs.js');
+var index$5 = require('./Common/Spinner/index.cjs.js');
+var index$6 = require('./Common/Skeleton/index.cjs.js');
+var index$7 = require('./Common/Typography/index.cjs.js');
 var styles$1 = require('./Common/Typography/styles.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 index$8 = 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/DropdownMenu/index.cjs.js');
-var index$i = require('./Floating/Popover/index.cjs.js');
-var index$j = require('./Floating/Tooltip/index.cjs.js');
+var index$9 = require('./Logos/RememberLogo/index.cjs.js');
+var index$a = require('./Logos/RememberMobileLogo/index.cjs.js');
+var index$b = require('./Logos/RememberSquareLogo/index.cjs.js');
+var index$c = require('./Logos/RememberServiceLogo/index.cjs.js');
+var index$d = require('./Modals/Dialog/index.cjs.js');
+var index$e = require('./Paginations/Pagination/index.cjs.js');
+var index$f = require('./Paginations/CompactPagination/index.cjs.js');
+var index$g = require('./Inputs/TextInput/index.cjs.js');
+var index$h = require('./Inputs/Select/index.cjs.js');
+var index$i = require('./Floating/DropdownMenu/index.cjs.js');
+var index$j = require('./Floating/Popover/index.cjs.js');
+var index$k = require('./Floating/Tooltip/index.cjs.js');
 var styles$2 = require('./Floating/DropdownMenu/styles.cjs.js');
 var styles$3 = require('./Floating/Popover/styles.cjs.js');
 
@@ -35,36 +36,37 @@ var styles$3 = require('./Floating/Popover/styles.cjs.js');
 
 exports.Avatar = index;
 exports.StyledAvatar = styles.StyledAvatar;
-exports.Button = index$1;
+exports.Button = index$1.Button;
 exports.badgePseudo = utils.badgePseudo;
 exports.Badge = Badge.Badge;
 exports.getBadgePseudoCss = style.getBadgePseudoCss;
-exports.Divider = index$4.Divider;
-exports.Flex = index$2;
-exports.Grid = index$5.Grid;
-exports.Spinner = index$6.Spinner;
-exports.Typography = index$3;
+exports.Divider = index$2.Divider;
+exports.Flex = index$3.Flex;
+exports.Grid = index$4.Grid;
+exports.Spinner = index$5.Spinner;
+exports.Skeleton = index$6.Skeleton;
+exports.Typography = index$7.Typography;
 exports.StyledTypography = styles$1.StyledTypography;
 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.Switch = index$8.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.DropdownMenu = index$h;
-exports.Popover = index$i;
-exports.Tooltip = index$j;
+exports.RememberLogo = index$9.RememberLogo;
+exports.getViewBoxWidth = index$9.getViewBoxWidth;
+exports.RememberMobileLogo = index$a.RememberMobileLogo;
+exports.RememberSquareLogo = index$b.RememberSquareLogo;
+exports.RememberServiceLogo = index$c.RememberServiceLogo;
+exports.Dialog = index$d.Dialog;
+exports.Pagination = index$e.Pagination;
+exports.CompactPagination = index$f.CompactPagination;
+exports.TextInput = index$g;
+exports.Select = index$h;
+exports.DropdownMenu = index$i;
+exports.Popover = index$j;
+exports.Tooltip = index$k;
 exports.DropdownMenuItemDisabledCSS = styles$2.DropdownMenuItemDisabledCSS;
 exports.DropdownMenuItemHoverCSS = styles$2.DropdownMenuItemHoverCSS;
 exports.StyledDropdownMenuContent = styles$2.StyledDropdownMenuContent;

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

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

package/dist/src/index.esm.js

@@ -1,14 +1,15 @@
 export { default as Avatar } from './Avatars/Avatar/index.esm.js';
 export { StyledAvatar } from './Avatars/Avatar/styles.esm.js';
-export { default as Button } from './Buttons/Button/index.esm.js';
+export { Button } from './Buttons/Button/index.esm.js';
 export { badgePseudo } from './Badge/utils.esm.js';
 export { Badge } from './Badge/Badge.esm.js';
 export { getBadgePseudoCss } from './Badge/style.esm.js';
 export { Divider } from './Common/Divider/index.esm.js';
-export { default as Flex } from './Common/Flex/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 { Skeleton } from './Common/Skeleton/index.esm.js';
+export { Typography } from './Common/Typography/index.esm.js';
 export { StyledTypography } from './Common/Typography/styles.esm.js';
 export { Checkbox, _Checkbox } from './Control/Checkbox.esm.js';
 export { CircleBaseToggle, Toggle, _Toggle } from './Control/Toggle.esm.js';

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

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

package/dist/src/stories/common.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.styles.d.ts","sourceRoot":"","sources":["../../../src/stories/common.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,eAAO,MAAM,KAAK;;;GAmBjB,CAAC;AAEF,eAAO,MAAM,cAAc,gNAE1B,CAAC;AAEF,eAAO,MAAM,KAAK,yNAIjB,CAAC;AAEF,eAAO,MAAM,WAAW,kOAAiB,CAAC;AAE1C,eAAO,MAAM,SAAS,kOAAiB,CAAC;AAkBxC,eAAO,MAAM,WAAW,mCAIrB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAKE,CAAC;AAEJ,eAAO,MAAM,QAAQ,0NAAc,CAAC"}
+{"version":3,"file":"common.styles.d.ts","sourceRoot":"","sources":["../../../src/stories/common.styles.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,eAAO,MAAM,KAAK;;;GAmBjB,CAAC;AAEF,eAAO,MAAM,cAAc,gNAE1B,CAAC;AAEF,eAAO,MAAM,KAAK,yNAIjB,CAAC;AAEF,eAAO,MAAM,WAAW,kOAAiB,CAAC;AAE1C,eAAO,MAAM,SAAS,kOAAiB,CAAC;AAkBxC,eAAO,MAAM,WAAW,mCAIrB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAKE,CAAC;AAEJ,eAAO,MAAM,QAAQ,0NAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -16,8 +16,7 @@
   "scripts": {
     "build": "rollup -c && yarn fix:dts-alias",
     "fix:dts-alias": "yarn tsc-alias -p tsconfig.alias.json",
-    "type-check": "tsc -p ./tsconfig.cli.json",
-    "lint": "eslint src --fix --ext .js,.jsx,.ts,.tsx --cache"
+    "type-check": "tsc -p ./tsconfig.cli.json"
   },
   "files": [
     "dist",
@@ -59,8 +58,6 @@
     "@storybook/react": "^7.6.17",
     "@types/react": "^18.2.77",
     "@types/react-dom": "^18.2.25",
-    "eslint": "^8.57.0",
-    "eslint-config-rui": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^4.14.1",

package/src/Avatars/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { bg200 } from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { avatarSize } from '@/Avatars/Avatar/styles';
 

package/src/Avatars/Avatar/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { forwardRef } from 'react';
-import type { ForwardRefRenderFunction, ComponentPropsWithoutRef } from 'react';
-import { bg200, divider } from '@remember-web/mixin';
 import { IconAvatarEmpty } from '@remember-web/icon';
+import { bg200, divider } from '@remember-web/mixin';
 import type { ConvertTransientProps } from '@remember-web/shared';
+import { forwardRef } from 'react';
+import type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';
 
 import type { StyledAvatarProps } from '@/Avatars/Avatar/styles';
 import { StyledAvatar } from '@/Avatars/Avatar/styles';

package/src/Avatars/Avatar/styles.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import type { CSSProperties } from 'react';
+import styled from 'styled-components';
 
 export const avatarSize = {
   xxlarge: 64,

package/src/Badge/Badge.stories.tsx

@@ -1,9 +1,9 @@
 import type { StoryObj } from '@storybook/react';
 import styled from 'styled-components';
 
-import { badgePseudo } from '@/Badge/utils';
-import type { BadgeAttribute } from '@/Badge/types';
 import { Badge } from '@/Badge/Badge';
+import type { BadgeAttribute } from '@/Badge/types';
+import { badgePseudo } from '@/Badge/utils';
 
 type Story = StoryObj<typeof Badge>;
 

package/src/Badge/style.tsx

@@ -1,9 +1,9 @@
-import styled, { css } from 'styled-components';
 import {
   contents999,
   getTypographyStyles,
   secondary100,
 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 /**
  * pseudo로 사용시 data-badge-value attribue가 필요합니다.

package/src/Badge/utils.ts

@@ -1,5 +1,5 @@
-import type { BadgeValueProps } from '@/Badge/types';
 import { getBadgePseudoCss } from '@/Badge/style';
+import type { BadgeValueProps } from '@/Badge/types';
 
 export const getBadgeValue = (props: BadgeValueProps): string => {
   if (typeof props === 'string') {

package/src/Buttons/Button/index.tsx

@@ -2,7 +2,7 @@
 
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
-import { type PolymorphicComponent } from 'styled-components';
+import type { PolymorphicComponent } from 'styled-components';
 
 import { Spinner } from '@/Common';
 
@@ -10,22 +10,22 @@ import { SPINNER_SIZE_MAP } from './const';
 import { StyledButton } from './styles';
 import type { ButtonProps } from './types';
 
-const Button = forwardRef(function (
-  {
-    children,
-    color,
-    size = 'small',
-    variant = 'primary',
-    layout = 'block',
-    isLoading = false,
-    filled = variant === 'primary',
-    icon,
-    iconPosition = 'left',
-    ...props
-  }: ButtonProps,
-  ref: ForwardedRef<HTMLButtonElement | null>
-) {
-  return (
+export const Button = forwardRef(
+  (
+    {
+      children,
+      color,
+      size = 'small',
+      variant = 'primary',
+      layout = 'block',
+      isLoading = false,
+      filled = variant === 'primary',
+      icon,
+      iconPosition = 'left',
+      ...props
+    }: ButtonProps,
+    ref: ForwardedRef<HTMLButtonElement | null>
+  ) => (
     <StyledButton
       $color={color}
       $size={size}
@@ -48,7 +48,5 @@ const Button = forwardRef(function (
         </>
       )}
     </StyledButton>
-  );
-}) as PolymorphicComponent<'web', ButtonProps>;
-
-export default Button;
+  )
+) as PolymorphicComponent<'web', ButtonProps>;

package/src/Buttons/Button/styles.ts

@@ -37,14 +37,16 @@ export const StyledButton = styled.button<ButtonStyleProps>(
       text-align: center;
 
       width: fit-content;
-      ${$layout === 'fullBlock' && `width: 100%;`}
+      ${$layout === 'fullBlock' && 'width: 100%;'}
       min-width: ${BUTTON_SIZES[$size].minWidth};
       height: ${BUTTON_SIZES[$size].height};
       padding: ${BUTTON_SIZES[$size].padding};
       border-radius: 4px;
 
-      color: ${(props.$variant.startsWith('outline') ? $color : null) ??
-      BUTTON_COLORS[props.$variant].color};
+      color: ${
+        (props.$variant.startsWith('outline') ? $color : null) ??
+        BUTTON_COLORS[props.$variant].color
+      };
 
       &:focus-visible:not(:disabled) {
         outline: 2px solid ${primary100};
@@ -85,8 +87,9 @@ export const StyledButton = styled.button<ButtonStyleProps>(
     // primary 스타일
     props.$variant === 'primary' &&
       css`
-        background-color: ${$color ??
-        BUTTON_COLORS[props.$variant].backgroundColor};
+        background-color: ${
+          $color ?? BUTTON_COLORS[props.$variant].backgroundColor
+        };
         &:disabled {
           background-color: ${disabled};
         }
@@ -98,9 +101,9 @@ export const StyledButton = styled.button<ButtonStyleProps>(
     // outline 스타일
     props.$variant === 'outline' &&
       css`
-        background-color: ${props.$filled
-          ? bg100
-          : BUTTON_COLORS[props.$variant].backgroundColor};
+        background-color: ${
+          props.$filled ? bg100 : BUTTON_COLORS[props.$variant].backgroundColor
+        };
         border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};
         &:disabled {
           border-color: ${disabled};

package/src/Buttons/index.ts

@@ -1 +1 @@
-export { default as Button } from './Button';
+export * from './Button';

package/src/Common/Divider/index.tsx

@@ -1,22 +1,25 @@
 'use client';
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import styled from 'styled-components';
 import { divider } from '@remember-web/mixin';
+import styled from 'styled-components';
 
 export interface DividerProps extends SeparatorPrimitive.SeparatorProps {
   color?: string;
+  $width?: string | number;
+  $height?: string | number;
 }
 
 const StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`
   background-color: ${({ color = divider }) => color};
   &[data-orientation='horizontal'] {
     height: 1px;
-    width: 100%;
+    width: ${({ $width = '100%' }) =>
+      typeof $width === 'number' ? `${$width}px` : $width};
   }
-
   &[data-orientation='vertical'] {
-    height: 100%;
+    height: ${({ $height = '100%' }) =>
+      typeof $height === 'number' ? `${$height}px` : $height};
     width: 1px;
   }
 `;

package/src/Common/Flex/index.tsx

@@ -49,11 +49,20 @@ const StyledFlex = styled.div<Partial<FlexStyledProps>>(
  * @prop {CSSProperties['flexWrap']} wrap
  */
 
-const Flex = forwardRef(function (
-  { width, height, direction, gap, align, justify, wrap, ...props }: FlexProps,
-  ref: ForwardedRef<HTMLDivElement | null>
-) {
-  return (
+export const Flex = forwardRef(
+  (
+    {
+      width,
+      height,
+      direction,
+      gap,
+      align,
+      justify,
+      wrap,
+      ...props
+    }: FlexProps,
+    ref: ForwardedRef<HTMLDivElement | null>
+  ) => (
     <StyledFlex
       ref={ref}
       $width={width}
@@ -65,9 +74,7 @@ const Flex = forwardRef(function (
       $wrap={wrap}
       {...props}
     />
-  );
-}) as PolymorphicComponent<'web', FlexProps>;
+  )
+) as PolymorphicComponent<'web', FlexProps>;
 
-type FlexProps = ConvertTransientProps<FlexStyledProps>;
-
-export default Flex;
+export type FlexProps = ConvertTransientProps<FlexStyledProps>;

package/src/Common/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,35 @@
+import { Skeleton } from '@/Common/Skeleton';
+import { divider } from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react';
+
+
+
+type Story = StoryObj<typeof Skeleton>;
+
+const meta = {
+  title: 'Primitive/Skeleton/Skeleton',
+  component: Skeleton,
+  args: {
+    animate: true,
+    width: 300,
+    height: 300,
+    variant: 'rounded',
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div
+      style={{
+        border: `solid 1px ${divider}`,
+        height: '300px',
+        width: '300px',
+        padding: 14,
+      }}
+    >
+      <Skeleton {...args} />
+    </div>
+  ),
+};
+
+export default meta;

package/src/Common/Skeleton/index.tsx

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { ConvertTransientProps } from '@remember-web/shared';
+
+import type { StyledSkeletonProps } from '@/Common/Skeleton/styles';
+import { StyledSkeleton } from '@/Common/Skeleton/styles';
+
+type SkeletonProps = Partial<ConvertTransientProps<StyledSkeletonProps>> &
+  ComponentPropsWithoutRef<'div'>;
+
+export const Skeleton = forwardRef(function (
+  { variant, width, height, animate = true, ...props }: SkeletonProps,
+  ref: ForwardedRef<HTMLDivElement | null>
+) {
+  return (
+    <StyledSkeleton
+      ref={ref}
+      $variant={variant}
+      $width={width}
+      $height={height}
+      $animate={animate}
+      {...props}
+    />
+  );
+});