meticulous-ui 3.7.11 → 3.7.13

package/cjs/components/Pagination/Pagination.cjs

@@ -1,36 +1,4 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const styled = require("styled-components");
-const ChevronLeft = require("../Icons/ChevronLeft.cjs");
-const ChevronRight = require("../Icons/ChevronRight.cjs");
-const Ripple = require("../Ripple/Ripple.cjs");
-const colorMap = require("../../colors/colorMap.cjs");
-const teal = require("../../colors/teal.cjs");
-const grey = require("../../colors/grey.cjs");
-const white = require("../../colors/white.cjs");
-const black = require("../../colors/black.cjs");
-const constants = require("./constants.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const getShade = (type) => ({
-  $shades
-}) => {
-  if (["#FFFFFF"].includes($shades)) {
-    return black.black.m900;
-  }
-  if (type === constants.SELECTED_BG) {
-    return $shades["m600"];
-  }
-  if (type === constants.NOT_SELECTED_BG) {
-    return $shades["m50"];
-  }
-  if (type === constants.ACTIVE_NOT_SELECTED_BG) {
-    return $shades["m100"];
-  }
-};
-const AllPages = styled__default.default.nav`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),D=require("react"),y=require("styled-components"),L=require("../Icons/ChevronLeft.cjs"),b=require("../Icons/ChevronRight.cjs"),I=require("../Ripple/Ripple.cjs"),B=require("../../colors/colorMap.cjs"),P=require("../../colors/teal.cjs"),M=require("../../colors/grey.cjs"),q=require("../../colors/white.cjs"),O=require("../../colors/black.cjs"),o=require("./constants.cjs"),F=e=>e&&e.__esModule?e:{default:e},f=F(y),j=e=>({$shades:i})=>{if(["#FFFFFF"].includes(i))return O.black.m900;if(e===o.SELECTED_BG)return i.m600;if(e===o.NOT_SELECTED_BG)return i.m50;if(e===o.ACTIVE_NOT_SELECTED_BG)return i.m100},w=f.default.nav`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -38,68 +6,55 @@ const AllPages = styled__default.default.nav`
   min-width: 100%;
   width: 100%;
 
-  ${({
-  $isDisabled
-}) => $isDisabled && /*@__PURE__*/styled.css`
+  ${({$isDisabled:e})=>e&&y.css`
       pointer-events: none;
       opacity: 0.4;
     `};
-`;
-const Page = styled__default.default.button`
+`,K=f.default.button`
   border: none;
   padding: 0;
   font-family: inherit;
   outline-offset: 2px;
 
-  height: ${({
-  $individualRemSize
-}) => `${$individualRemSize}rem`};
-  width: ${({
-  $individualRemSize
-}) => `${$individualRemSize}rem`};
+  height: ${({$individualRemSize:e})=>`${e}rem`};
+  width: ${({$individualRemSize:e})=>`${e}rem`};
   border-radius: 50%;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  font-size: ${({
-  $fontRemSize
-}) => $fontRemSize}rem;
-  ${({
-  $isSelected
-}) => $isSelected ? /*@__PURE__*/styled.css`
+  font-size: ${({$fontRemSize:e})=>e}rem;
+  ${({$isSelected:e})=>e?y.css`
           cursor: auto;
-          color: ${white.default};
-          background-color: ${getShade(constants.SELECTED_BG)};
+          color: ${q.default};
+          background-color: ${j(o.SELECTED_BG)};
 
           &:focus-visible {
-            outline: 1px solid ${getShade(constants.SELECTED_BG)};
+            outline: 1px solid ${j(o.SELECTED_BG)};
           }
-        ` : /*@__PURE__*/styled.css`
+        `:y.css`
           cursor: pointer;
-          color: ${grey.default.m500};
+          color: ${M.default.m500};
 
           &:hover {
-            background-color: ${getShade(constants.NOT_SELECTED_BG)};
+            background-color: ${j(o.NOT_SELECTED_BG)};
           }
 
           &:active {
-            background-color: ${getShade(constants.ACTIVE_NOT_SELECTED_BG)};
-            color: ${white.default};
+            background-color: ${j(o.ACTIVE_NOT_SELECTED_BG)};
+            color: ${q.default};
           }
 
           &:focus-visible {
-            outline: 1px solid ${getShade(constants.NOT_SELECTED_BG)};
+            outline: 1px solid ${j(o.NOT_SELECTED_BG)};
           }
         `}
-`;
-const Ellipsis = styled__default.default.span`
-  color: ${grey.default.m700};
+`,Z=f.default.span`
+  color: ${M.default.m700};
   font-size: 1.4rem;
   user-select: none;
-`;
-const ArrowButton = styled__default.default.button`
+`,G=f.default.button`
   border: none;
   background: none;
   padding: 0;
@@ -111,192 +66,15 @@ const ArrowButton = styled__default.default.button`
   outline-offset: 2px;
 
   &:focus-visible {
-    outline: 1px solid ${({
-  $shades
-}) => $shades == null ? void 0 : $shades["m600"]};
+    outline: 1px solid ${({$shades:e})=>e==null?void 0:e.m600};
   }
-`;
-const ClickableChevronLeft = styled__default.default(ChevronLeft.default)`
+`,z=f.default(L.default)`
   cursor: pointer;
-`;
-const ClickableChevronRight = styled__default.default(ChevronRight.default)`
+`,U=f.default(b.default)`
   cursor: pointer;
-`;
-const MiddleLayer = styled__default.default.div`
-  min-width: ${({
-  size
-}) => size};
+`,p=f.default.div`
+  min-width: ${({size:e})=>e};
   display: flex;
   align-items: center;
   justify-content: space-between;
-`;
-const renderPageNum = ({
-  size,
-  selected,
-  shades,
-  changePage
-}) => (page) => {
-  const $individualRemSize = constants.SIZE_REM_MAPPING[size];
-  const $fontRemSize = constants.FONT_SIZE_MAPPING[size];
-  const $shades = shades;
-  const isSelected = selected === page;
-  const clickHandler = () => {
-    changePage(page);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      clickHandler();
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(Page, { "data-testid": isSelected ? "current-page" : `test-${page}`, $isSelected: isSelected, onClick: clickHandler, onKeyDown: handleKeyDown, tabIndex: isSelected ? 0 : -1, "aria-label": `Page ${page}`, "aria-current": isSelected ? "page" : void 0, ...{
-    $shades,
-    $individualRemSize,
-    $fontRemSize
-  }, children: page }, `page_${page}`);
-};
-const renderThreeDots = () => /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { "aria-hidden": "true", children: "…" });
-const PrevArrow = ({
-  iconSize,
-  shades,
-  setPrevPage
-}) => /* @__PURE__ */ jsxRuntime.jsx(ArrowButton, { onClick: setPrevPage, "aria-label": "Previous page", $shades: shades, children: /* @__PURE__ */ jsxRuntime.jsx(Ripple.default, { rippleColor: shades["m50"], children: /* @__PURE__ */ jsxRuntime.jsx(ClickableChevronLeft, { size: iconSize, "aria-hidden": "true" }) }) });
-const NextArrow = ({
-  iconSize,
-  shades,
-  setNextPage
-}) => /* @__PURE__ */ jsxRuntime.jsx(ArrowButton, { onClick: setNextPage, "aria-label": "Next page", $shades: shades, children: /* @__PURE__ */ jsxRuntime.jsx(Ripple.default, { rippleColor: shades["m50"], children: /* @__PURE__ */ jsxRuntime.jsx(ClickableChevronRight, { size: iconSize, "aria-hidden": "true" }) }) });
-const Pagination = ({
-  pageNumber,
-  setPageNumber,
-  totalPages,
-  theme = "lime",
-  size = constants.MEDIUM,
-  isDisabled = false,
-  ...rest
-}) => {
-  var _a;
-  const navRef = react.useRef(null);
-  const focusActiveRef = react.useRef(false);
-  react.useEffect(() => {
-    var _a2, _b;
-    if (focusActiveRef.current) {
-      focusActiveRef.current = false;
-      (_b = (_a2 = navRef.current) == null ? void 0 : _a2.querySelector('[aria-current="page"]')) == null ? void 0 : _b.focus();
-    }
-  }, [pageNumber]);
-  const changePage = (newPage) => {
-    if (newPage !== pageNumber) {
-      setPageNumber(newPage);
-    }
-  };
-  const setPrevPage = () => {
-    if (pageNumber > 1) {
-      changePage(pageNumber - 1);
-    }
-  };
-  const setNextPage = () => {
-    if (pageNumber < totalPages) {
-      changePage(pageNumber + 1);
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (["ArrowLeft", "ArrowUp"].includes(e.code)) {
-      focusActiveRef.current = true;
-      setPrevPage();
-    }
-    if (["ArrowRight", "ArrowDown"].includes(e.code)) {
-      focusActiveRef.current = true;
-      setNextPage();
-    }
-  };
-  const shades = (_a = colorMap.default[theme]) != null ? _a : teal.default;
-  const individualRemSize = constants.SIZE_REM_MAPPING[size];
-  const iconSize = constants.ICON_SIZE_MAPPING[size];
-  if (totalPages <= 7) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(AllPages, { ref: navRef, onKeyDown: handleKeyDown, "aria-label": "Pagination", $isDisabled: isDisabled, ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PrevArrow, { ...{
-        iconSize,
-        shades,
-        setPrevPage
-      } }),
-      /* @__PURE__ */ jsxRuntime.jsx(MiddleLayer, { size: `${totalPages * individualRemSize}rem`, children: Array.from({
-        length: totalPages
-      }, (_, i) => i + 1).map(renderPageNum({
-        size,
-        selected: pageNumber,
-        shades,
-        changePage
-      })) }),
-      /* @__PURE__ */ jsxRuntime.jsx(NextArrow, { ...{
-        iconSize,
-        shades,
-        setNextPage
-      } })
-    ] });
-  }
-  if (totalPages < 10 || pageNumber < 4 || pageNumber > totalPages - 3 && pageNumber <= totalPages) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(AllPages, { ref: navRef, onKeyDown: handleKeyDown, "aria-label": "Pagination", $isDisabled: isDisabled, ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PrevArrow, { ...{
-        iconSize,
-        shades,
-        setPrevPage
-      } }),
-      /* @__PURE__ */ jsxRuntime.jsxs(MiddleLayer, { size: `${9 * individualRemSize}rem`, children: [
-        [1, 2, 3, 4].map(renderPageNum({
-          size,
-          selected: pageNumber,
-          shades,
-          changePage
-        })),
-        renderThreeDots(),
-        [totalPages - 3, totalPages - 2, totalPages - 1, totalPages].map(renderPageNum({
-          size,
-          selected: pageNumber,
-          shades,
-          changePage
-        }))
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(NextArrow, { ...{
-        iconSize,
-        shades,
-        setNextPage
-      } })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(AllPages, { ref: navRef, onKeyDown: handleKeyDown, "aria-label": "Pagination", $isDisabled: isDisabled, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PrevArrow, { ...{
-      iconSize,
-      shades,
-      setPrevPage
-    } }),
-    /* @__PURE__ */ jsxRuntime.jsxs(MiddleLayer, { size: `${9 * individualRemSize}rem`, children: [
-      [1, 2].map(renderPageNum({
-        size,
-        selected: pageNumber,
-        shades,
-        changePage
-      })),
-      pageNumber > 4 && renderThreeDots(),
-      [pageNumber - 1, pageNumber, pageNumber + 1].map(renderPageNum({
-        size,
-        selected: pageNumber,
-        shades,
-        changePage
-      })),
-      pageNumber < totalPages - 3 && renderThreeDots(),
-      [totalPages - 1, totalPages].map(renderPageNum({
-        size,
-        selected: pageNumber,
-        shades,
-        changePage
-      }))
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(NextArrow, { ...{
-      iconSize,
-      shades,
-      setNextPage
-    } })
-  ] });
-};
-exports.default = Pagination;
+`,h=({size:e,selected:i,shades:n,changePage:C})=>t=>{const _=o.SIZE_REM_MAPPING[e],$=o.FONT_SIZE_MAPPING[e],a=n,s=i===t,l=()=>{C(t)},x=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),l())};return r.jsx(K,{"data-testid":s?"current-page":`test-${t}`,$isSelected:s,onClick:l,onKeyDown:x,tabIndex:s?0:-1,"aria-label":`Page ${t}`,"aria-current":s?"page":void 0,$shades:a,$individualRemSize:_,$fontRemSize:$,children:t},`page_${t}`)},T=()=>r.jsx(Z,{"aria-hidden":"true",children:"…"}),A=({iconSize:e,shades:i,setPrevPage:n})=>r.jsx(G,{onClick:n,"aria-label":"Previous page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,children:r.jsx(z,{size:e,"aria-hidden":"true"})})}),k=({iconSize:e,shades:i,setNextPage:n})=>r.jsx(G,{onClick:n,"aria-label":"Next page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,children:r.jsx(U,{size:e,"aria-hidden":"true"})})}),V=({pageNumber:e,setPageNumber:i,totalPages:n,theme:C="lime",size:t=o.MEDIUM,isDisabled:_=!1,...$})=>{var R;const a=D.useRef(null),s=D.useRef(!1);D.useEffect(()=>{var d,v;s.current&&(s.current=!1,(v=(d=a.current)==null?void 0:d.querySelector('[aria-current="page"]'))==null||v.focus())},[e]);const l=d=>{d!==e&&i(d)},x=()=>{e>1&&l(e-1)},u=()=>{e<n&&l(e+1)},S=d=>{["ArrowLeft","ArrowUp"].includes(d.code)&&(s.current=!0,x()),["ArrowRight","ArrowDown"].includes(d.code)&&(s.current=!0,u())},c=(R=B.default[C])!=null?R:P.default,m=o.SIZE_REM_MAPPING[t],E=o.ICON_SIZE_MAPPING[t];return n<=7?r.jsxs(w,{ref:a,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsx(p,{size:`${n*m}rem`,children:Array.from({length:n},(d,v)=>v+1).map(h({size:t,selected:e,shades:c,changePage:l}))}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]}):n<10||e<4||e>n-3&&e<=n?r.jsxs(w,{ref:a,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(p,{size:`${9*m}rem`,children:[[1,2,3,4].map(h({size:t,selected:e,shades:c,changePage:l})),T(),[n-3,n-2,n-1,n].map(h({size:t,selected:e,shades:c,changePage:l}))]}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]}):r.jsxs(w,{ref:a,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(p,{size:`${9*m}rem`,children:[[1,2].map(h({size:t,selected:e,shades:c,changePage:l})),e>4&&T(),[e-1,e,e+1].map(h({size:t,selected:e,shades:c,changePage:l})),e<n-3&&T(),[n-1,n].map(h({size:t,selected:e,shades:c,changePage:l}))]}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]})};exports.default=V;

package/cjs/components/Pagination/constants.cjs

@@ -1,41 +1 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const INDIVIDUAL_SMALL_REM_SIZE = 3.4;
-const INDIVIDUAL_MEDIUM_REM_SIZE = 4.2;
-const INDIVIDUAL_LARGE_REM_SIZE = 5;
-const SMALL_FONT_SIZE = 1.5;
-const MEDIUM_REM_FONT_SIZE = 1.7;
-const LARGE_REM_FONT_SIZE = 1.9;
-const SMALL_ICON_SIZE = 23;
-const MEDIUM_ICON_SIZE = 25;
-const LARGE_ICON_SIZE = 27;
-const SMALL = "small";
-const MEDIUM = "medium";
-const LARGE = "large";
-const SIZE_REM_MAPPING = {
-  [SMALL]: INDIVIDUAL_SMALL_REM_SIZE,
-  [MEDIUM]: INDIVIDUAL_MEDIUM_REM_SIZE,
-  [LARGE]: INDIVIDUAL_LARGE_REM_SIZE
-};
-const FONT_SIZE_MAPPING = {
-  [SMALL]: SMALL_FONT_SIZE,
-  [MEDIUM]: MEDIUM_REM_FONT_SIZE,
-  [LARGE]: LARGE_REM_FONT_SIZE
-};
-const ICON_SIZE_MAPPING = {
-  [SMALL]: SMALL_ICON_SIZE,
-  [MEDIUM]: MEDIUM_ICON_SIZE,
-  [LARGE]: LARGE_ICON_SIZE
-};
-const SELECTED_BG = "selected_bg";
-const NOT_SELECTED_BG = "not_selected_bg";
-const ACTIVE_NOT_SELECTED_BG = "active_not_selected_bg";
-exports.ACTIVE_NOT_SELECTED_BG = ACTIVE_NOT_SELECTED_BG;
-exports.FONT_SIZE_MAPPING = FONT_SIZE_MAPPING;
-exports.ICON_SIZE_MAPPING = ICON_SIZE_MAPPING;
-exports.LARGE = LARGE;
-exports.MEDIUM = MEDIUM;
-exports.NOT_SELECTED_BG = NOT_SELECTED_BG;
-exports.SELECTED_BG = SELECTED_BG;
-exports.SIZE_REM_MAPPING = SIZE_REM_MAPPING;
-exports.SMALL = SMALL;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=3.4,M=4.2,S=5,c=1.5,o=1.7,s=1.9,L=23,N=25,n=27,_="small",E="medium",I="large",A={[_]:t,[E]:M,[I]:S},e={[_]:c,[E]:o,[I]:s},T={[_]:L,[E]:N,[I]:n},D="selected_bg",G="not_selected_bg",O="active_not_selected_bg";exports.ACTIVE_NOT_SELECTED_BG=O;exports.FONT_SIZE_MAPPING=e;exports.ICON_SIZE_MAPPING=T;exports.LARGE=I;exports.MEDIUM=E;exports.NOT_SELECTED_BG=G;exports.SELECTED_BG=D;exports.SIZE_REM_MAPPING=A;exports.SMALL=_;

package/cjs/components/Pagination/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Pagination = require("./Pagination.cjs");
-exports.default = Pagination.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Pagination.cjs");exports.default=e.default;

package/cjs/components/Ripple/Ripple.cjs

@@ -1,45 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const RIPPLE_CSS = `.ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}`;
-if (typeof document !== "undefined" && !document.getElementById("meticulous-ripple-styles")) {
-  const style = /* @__PURE__ */ document.createElement("style");
-  style.id = "meticulous-ripple-styles";
-  style.textContent = RIPPLE_CSS;
-  document.head.appendChild(style);
-}
-const Ripple = ({
-  children,
-  rippleColor = "rgba(255, 255, 255, 0.3)",
-  className = "",
-  ...props
-}) => {
-  const containerRef = react.useRef(null);
-  const spawnRipple = (x, y) => {
-    const container = containerRef.current;
-    if (!container) return;
-    const ripple = document.createElement("span");
-    const rect = container.getBoundingClientRect();
-    const size = Math.max(rect.width, rect.height);
-    ripple.style.width = ripple.style.height = `${size}px`;
-    ripple.style.left = `${x - size / 2}px`;
-    ripple.style.top = `${y - size / 2}px`;
-    ripple.style.backgroundColor = rippleColor;
-    ripple.classList.add("ripple-effect");
-    container.appendChild(ripple);
-    ripple.addEventListener("animationend", () => ripple.remove());
-  };
-  const createRipple = (e) => {
-    if (e.detail === 0) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    spawnRipple(e.clientX - rect.left, e.clientY - rect.top);
-  };
-  const createRippleFromCenter = (e) => {
-    if (e.key !== "Enter" && e.key !== " ") return;
-    const rect = containerRef.current.getBoundingClientRect();
-    spawnRipple(rect.width / 2, rect.height / 2);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: `ripple-container ${className}`, onClick: createRipple, onKeyDown: createRippleFromCenter, ...props, children });
-};
-exports.default = Ripple;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),y=require("react"),g=".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";if(typeof document!="undefined"&&!document.getElementById("meticulous-ripple-styles")){const i=document.createElement("style");i.id="meticulous-ripple-styles",i.textContent=g,document.head.appendChild(i)}const h=({children:i,rippleColor:a="rgba(255, 255, 255, 0.3)",className:p="",...d})=>{const r=y.useRef(null),s=(t,n)=>{const o=r.current;if(!o)return;const e=document.createElement("span"),c=o.getBoundingClientRect(),l=Math.max(c.width,c.height);e.style.width=e.style.height=`${l}px`,e.style.left=`${t-l/2}px`,e.style.top=`${n-l/2}px`,e.style.backgroundColor=a,e.classList.add("ripple-effect"),o.appendChild(e),e.addEventListener("animationend",()=>e.remove())},u=t=>{if(t.detail===0)return;const n=r.current.getBoundingClientRect();s(t.clientX-n.left,t.clientY-n.top)},m=t=>{if(t.key!=="Enter"&&t.key!==" ")return;const n=r.current.getBoundingClientRect();s(n.width/2,n.height/2)};return f.jsx("div",{ref:r,className:`ripple-container ${p}`,onClick:u,onKeyDown:m,...d,children:i})};exports.default=h;

package/cjs/components/Ripple/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Ripple = require("./Ripple.cjs");
-exports.default = Ripple.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Ripple.cjs");exports.default=e.default;

package/cjs/components/RootComponent/RootComponent.cjs

@@ -1,23 +1,4 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const PropTypes = require("prop-types");
-const styled = require("styled-components");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const Root = styled__default.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),n=require("prop-types"),r=require("styled-components"),t=e=>e&&e.__esModule?e:{default:e},d=t(n),l=t(r),i=l.default.div`
   font-size: 62.5%;
   -webkit-text-size-adjust: 100%;
-`;
-const RootComponent = ({
-  children,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root, { ...rest, children });
-};
-RootComponent.propTypes = {
-  /** Content to render inside the root wrapper */
-  children: PropTypes__default.default.node
-};
-exports.default = RootComponent;
+`,o=({children:e,...s})=>u.jsx(i,{...s,children:e});o.propTypes={children:d.default.node};exports.default=o;

package/cjs/components/RootComponent/index.cjs

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const RootComponent = require("./RootComponent.cjs");
-exports.default = RootComponent.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./RootComponent.cjs");exports.default=e.default;