@cruk/cruk-react-components 5.0.7 → 6.0.0

package/lib/src/components/Modal/styles.js

@@ -1,2 +1,60 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{keyframes as i}from"styled-components";import{Box as t}from"../Box/index.js";import{Button as a}from"../Button/index.js";var r,e,m,d,s,c,f=o.div(r||(r=n(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"],["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n"]))),u=i(e||(e=n(["\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"],["\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"]))),p=i(m||(m=n(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n"],["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n"]))),l=o(t)(d||(d=n(["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ",";\n"],["\n  background-color: ",";\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ",";\n  width: ",";\n  min-height: 10rem;\n  max-width: ",";\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ",";\n"])),(function(n){var o=n.theme.colors,i=n.backgroundColor;return void 0!==i&&void 0!==typeof i?void 0!==o[i]?o[i]:i:o.backgroundLight}),(function(n){var o=n.$top;return"".concat(o," auto auto auto")}),(function(n){return n.$width}),(function(n){return n.$maxWidth}),(function(n){return n.$isAnimated?u:"none"})),g=o(a)(s||(s=n(["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"],["\n  float: right;\n  margin-left: ",";\n  font-size: 1.2rem;\n  padding: 0;\n"])),(function(n){return n.theme.spacing.xs})),h=o.div(c||(c=n(["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ",";\n"],["\n  background: ",";\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ",";\n"])),(function(n){return n.theme.colors.modalBackdrop}),(function(n){return n.$isAnimated?p:"none"}));export{h as Background,g as CloseButton,l as Content,f as Wrapper};
+import o,{keyframes as i}from"styled-components";import{Box as t}from"../Box/index.js";import{Button as n}from"../Button/index.js";const a=o.div`
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+`,e=i`
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`,m=i`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.5;
+  }
+`,r=o(t)`
+  background-color: ${({theme:{colors:o},backgroundColor:i})=>void 0!==i?void 0!==o[i]?o[i]:i:o.backgroundLight};
+  position: relative;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  margin: ${({$top:o})=>`${o} auto auto auto`};
+  width: ${({$width:o})=>o};
+  min-height: 10rem;
+  max-width: ${({$maxWidth:o})=>o};
+  z-index: 9999;
+  animation-direction: normal;
+  animation-timing-function: ease-in-out;
+  animation-duration: 0.2s;
+  animation-name: ${({$isAnimated:o})=>o?e:"none"};
+`,d=o(n)`
+  float: right;
+  margin-left: ${({theme:{spacing:{xs:o}}})=>o};
+  font-size: 1.2rem;
+  padding: 0;
+`,s=o.div`
+  background: ${({theme:o})=>o.colors.modalBackdrop};
+  bottom: 0;
+  left: 0;
+  opacity: 0.5;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition:
+    opacity 0.3s,
+    bottom 0s 0.3s;
+  z-index: 100;
+  animation-direction: normal;
+  animation-timing-function: ease-in-out;
+  animation-duration: 0.3s;
+  animation-name: ${({$isAnimated:o})=>o?m:"none"};
+`;export{s as Background,d as CloseButton,r as Content,a as Wrapper};
 //# sourceMappingURL=styles.js.map

package/lib/src/components/Modal/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\nimport Box from \"../Box\";\nimport { Button } from \"../Button\";\n\nexport const Wrapper = styled.div`\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n`;\n\nconst grow = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\nconst fade = keyframes`\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n`;\n\nexport const Content = styled(Box)<{\n  $backgroundColor?: string;\n  $top: string;\n  $width: string;\n  $maxWidth: string;\n  $isAnimated?: boolean;\n  theme: ThemeType;\n}>`\n  background-color: ${({ theme: { colors }, backgroundColor }) =>\n    backgroundColor !== undefined && typeof backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ $top }) => `${$top} auto auto auto`};\n  width: ${({ $width }) => $width};\n  min-height: 10rem;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? grow : \"none\")};\n`;\n\nexport const CloseButton = styled(Button)<{\n  theme: ThemeType;\n}>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n\nexport const Background = styled.div<{\n  theme: ThemeType;\n  $isAnimated?: boolean;\n}>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? fade : \"none\")};\n`;\n"],"names":["Wrapper","styled","div","templateObject_1","__makeTemplateObject","grow","keyframes","templateObject_2","fade","templateObject_3","Content","Box","templateObject_4","_a","colors","theme","backgroundColor","undefined","backgroundLight","$top","concat","$width","$maxWidth","$isAnimated","CloseButton","Button","templateObject_5","spacing","xs","Background","templateObject_6","modalBackdrop"],"mappings":"mNAKa,gBAAAA,EAAUC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,oIAAA,CAAA,uIAU3BC,EAAOC,EAASC,IAAAA,EAAAH,EAAA,CAAA,wHAAA,CAAA,2HAWhBI,EAAOF,EAASG,IAAAA,EAAAL,EAAA,CAAA,sEAAA,CAAA,yEASTM,EAAUT,EAAOU,EAAPV,CAAWW,IAAAA,EAAAR,EAAA,CAAA,yBAAA,qFAAA,eAAA,yCAAA,kJAAA,OAAA,CAOhC,yBAM4B,qFAGoB,eACjB,yCAEU,kJAK2B,UAhBhD,SAACS,OAAWC,EAAMD,EAAAE,MAAAD,OAAIE,EAAeH,EAAAG,gBACvD,YAAoBC,IAApBD,QAA4DC,WAApBD,OACQC,IAA5CH,EAAOE,GACLF,EAAOE,GACPA,EACFF,EAAOI,eAJX,IAOQ,SAACL,GAAE,IAAAM,EAAIN,EAAAM,KAAO,MAAA,GAAAC,OAAGD,EAAqB,kBAAxB,IACf,SAACN,GAAe,OAAPA,EAAAQ,MAAO,IAEZ,SAACR,GAAkB,OAAPA,EAAAS,SAAO,IAKd,SAACT,GAAoB,OAAPA,EAAAU,YAAsBlB,EAAO,MAAtB,IAG5BmB,EAAcvB,EAAOwB,EAAPxB,CAAcyB,IAAAA,EAAAtB,EAAA,CAAA,qCAAA,4CAAA,CAEvC,qCAMQ,+CAJO,SAACS,GAIV,OAFWA,EAAAE,MAAAY,QAAAC,EAEX,IAKKC,EAAa5B,EAAOC,IAG/B4B,IAAAA,EAAA1B,EAAA,CAAA,mBAAA,+RAAA,OAAA,CAAA,mBACuD,+RAca,UAdtD,SAACS,GAAc,OAAPA,EAAAE,MAAaD,OAAOiB,aAAb,IAcX,SAAClB,GAAoB,OAAPA,EAAAU,YAAsBf,EAAO,MAAtB"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Modal/styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\nimport Box from \"../Box\";\nimport { Button } from \"../Button\";\n\nexport const Wrapper = styled.div`\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 9999;\n`;\n\nconst grow = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\nconst fade = keyframes`\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n`;\n\nexport const Content = styled(Box)<{\n  $backgroundColor?: string;\n  $top: string;\n  $width: string;\n  $maxWidth: string;\n  $isAnimated?: boolean;\n  theme: ThemeType;\n}>`\n  background-color: ${({ theme: { colors }, backgroundColor }) =>\n    backgroundColor !== undefined\n      ? colors[backgroundColor as ColorKeyType] !== undefined\n        ? colors[backgroundColor as ColorKeyType]\n        : backgroundColor\n      : colors.backgroundLight};\n  position: relative;\n  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);\n  margin: ${({ $top }) => `${$top} auto auto auto`};\n  width: ${({ $width }) => $width};\n  min-height: 10rem;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  z-index: 9999;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.2s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? grow : \"none\")};\n`;\n\nexport const CloseButton = styled(Button)<{\n  theme: ThemeType;\n}>`\n  float: right;\n  margin-left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n  font-size: 1.2rem;\n  padding: 0;\n`;\n\nexport const Background = styled.div<{\n  theme: ThemeType;\n  $isAnimated?: boolean;\n}>`\n  background: ${({ theme }) => theme.colors.modalBackdrop};\n  bottom: 0;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transition:\n    opacity 0.3s,\n    bottom 0s 0.3s;\n  z-index: 100;\n  animation-direction: normal;\n  animation-timing-function: ease-in-out;\n  animation-duration: 0.3s;\n  animation-name: ${({ $isAnimated }) => ($isAnimated ? fade : \"none\")};\n`;\n"],"names":["Wrapper","styled","div","grow","keyframes","fade","Content","Box","theme","colors","backgroundColor","undefined","backgroundLight","$top","$width","$maxWidth","$isAnimated","CloseButton","Button","spacing","xs","Background","modalBackdrop"],"mappings":"mIAKa,MAAAA,EAAUC,EAAOC,GAAG;;;;;;;;EAU3BC,EAAOC,CAAS;;;;;;;;;EAWhBC,EAAOD,CAAS;;;;;;;EASTE,EAAUL,EAAOM,EAO5B;sBACoB,EAAGC,OAASC,UAAUC,0BACpBC,IAApBD,OACgDC,IAA5CF,EAAOC,GACLD,EAAOC,GACPA,EACFD,EAAOG;;;YAGH,EAAGC,UAAW,GAAGA;WAClB,EAAGC,YAAaA;;eAEZ,EAAGC,eAAgBA;;;;;oBAKd,EAAGC,iBAAmBA,EAAcb,EAAO;EAGlDc,EAAchB,EAAOiB,EAEhC;;iBAEe,EACbV,OACEW,SAAWC,UAETA;;;EAKKC,EAAapB,EAAOC,GAG/B;gBACc,EAAGM,WAAYA,EAAMC,OAAOa;;;;;;;;;;;;;;oBAcxB,EAAGN,iBAAmBA,EAAcX,EAAO;"}

package/lib/{components → src/components}/Pagination/Pagination.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import Pagination from ".";
 declare const _default: {
     title: string;

package/lib/src/components/Pagination/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as a,ThemeProvider as c}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{PagerWrapper as l,PagerList as r,PagerItem as o,PagerLink as i}from"./styles.js";function s(s){var m=s.current,d=s.items,u=s.hideLast,p=s.pagerCallback,f=s.perPage,E=s.searchParam,v=void 0===E?"page":E,b=s.children,h=s.id,k=a(),y=e(e({},n),k),x=f>0?f:1,g=Math.ceil(d/x)||1,P=function(e){return{href:"".concat("undefined"!=typeof window?window.location.pathname:"","?").concat(v?"".concat(v,"=").concat(e):""),onClick:function(t){t.preventDefault(),p(e)}}};return t.createElement(c,{theme:y},d>f&&t.createElement(l,null,t.createElement(r,null,t.createElement(o,{key:"Prev"},t.createElement(i,e({"data-cta":h?"".concat(h,"-prev"):null,name:"Prev","aria-disabled":1===m},1===m&&{tabIndex:-1},1!==m&&P(m-1),{$disabled:1===m}),"Prev")),function(a,c){for(var n=[],l=[],r=1;r<=c;r+=1)n.push(t.createElement(o,{key:r},t.createElement(i,e({"data-cta":h?"".concat(h,"-").concat(r):null,$active:r===a},P(r),{"aria-label":"page ".concat(r," of ").concat(c)}),r)));var s=n.slice(0,1).concat(t.createElement(o,{key:"first"},t.createElement("span",null,"..."))),m=n.slice(n.length-1).concat(t.createElement(o,{key:"last"},t.createElement("span",null,"..."))).reverse();return l=n.slice(0,c),c>7&&(l=a<=4?u?n.slice(0,7):n.slice(0,5).concat(m):a>c-4?s.concat(n.slice(-5)):u?s.concat(n.slice(a-3,a+2)):s.concat(n.slice(a-2,a+1)).concat(m)),l}(m,g),t.createElement(o,{key:"Next"},t.createElement(i,e({"data-cta":h?"".concat(h,"-next"):null,name:"Next","aria-disabled":m===g},m===g&&{tabIndex:-1},m!==g&&P(m+1),{$disabled:m===g}),"Next"))),b))}export{s as Pagination,s as default};
+import e from"react";import{useTheme as t,ThemeProvider as a}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{PagerWrapper as n,PagerList as c,PagerItem as r,PagerLink as i}from"./styles.js";function s({current:s,items:o,hideLast:m,pagerCallback:d,perPage:p,searchParam:u="page",children:f,id:E}){const $=t(),h={...l,...$},b=p>0?p:1,k=Math.ceil(o/b)||1,y=e=>({href:`${"undefined"!=typeof window?window.location.pathname:""}?${u?`${u}=${e}`:""}`,onClick:t=>{t.preventDefault(),d(e)}});return e.createElement(a,{theme:h},o>p&&e.createElement(n,null,e.createElement(c,null,e.createElement(r,{key:"Prev"},e.createElement(i,{"data-cta":E?`${E}-prev`:null,name:"Prev","aria-disabled":1===s,...1===s&&{tabIndex:-1},...1!==s&&y(s-1),$disabled:1===s},"Prev")),((t,a)=>{const l=[];let n=[];for(let n=1;n<=a;n+=1)l.push(e.createElement(r,{key:n},e.createElement(i,{"data-cta":E?`${E}-${n}`:null,$active:n===t,...y(n),"aria-label":`page ${n} of ${a}`},n)));const c=l.slice(0,1).concat(e.createElement(r,{key:"first"},e.createElement("span",null,"..."))),s=l.slice(l.length-1).concat(e.createElement(r,{key:"last"},e.createElement("span",null,"..."))).reverse();return n=l.slice(0,a),a>7&&(n=t<=4?m?l.slice(0,7):l.slice(0,5).concat(s):t>a-4?c.concat(l.slice(-5)):m?c.concat(l.slice(t-3,t+2)):c.concat(l.slice(t-2,t+1)).concat(s)),n})(s,k),e.createElement(r,{key:"Next"},e.createElement(i,{"data-cta":E?`${E}-next`:null,name:"Next","aria-disabled":s===k,...s===k&&{tabIndex:-1},...s!==k&&y(s+1),$disabled:s===k},"Next"))),f))}export{s as Pagination,s as default};
 //# sourceMappingURL=index.js.map

package/lib/src/components/Pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type TouchEvent,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { PagerItem, PagerLink, PagerList, PagerWrapper } from \"./styles\";\n\nexport type PaginationProps = {\n  /** set current page number */\n  current: number;\n  /** total number of pages */\n  items: number;\n  /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */\n  hideLast?: boolean;\n  /** callback function which is passed the selected page number on click */\n  pagerCallback: (n: number) => void;\n  /** number of items per page */\n  perPage: number;\n  /** the name of the search param in the url that is modified on page click, defaults to 'page' */\n  searchParam?: string;\n  children?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * \n * Pagination is used when we are viewing large amounts of data.\nData is split into multiple pages and pagination is used to\neasily navigate through these pages.\n */\nexport function Pagination({\n  current,\n  items,\n  hideLast,\n  pagerCallback,\n  perPage,\n  searchParam = \"page\",\n  children,\n  id,\n}: PaginationProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const perPageValue = perPage > 0 ? perPage : 1;\n  const totalPages = Math.ceil(items / perPageValue) || 1;\n\n  const linkProps = (number: number) => ({\n    href: `${typeof window !== \"undefined\" ? window.location.pathname : \"\"}?${\n      searchParam ? `${searchParam}=${number}` : \"\"\n    }`,\n    onClick: (e: TouchEvent | MouseEvent) => {\n      e.preventDefault();\n      pagerCallback(number);\n    },\n  });\n\n  const renderPager = (active: number, total: number) => {\n    const list = [];\n    let pager = [];\n    // get the list of items\n    for (let number = 1; number <= total; number += 1) {\n      list.push(\n        <PagerItem key={number}>\n          <PagerLink\n            data-cta={id ? `${id}-${number}` : null}\n            $active={number === active}\n            {...linkProps(number)}\n            aria-label={`page ${number} of ${total}`}\n          >\n            {number}\n          </PagerLink>\n        </PagerItem>,\n      );\n    }\n    const first = list.slice(0, 1).concat(\n      <PagerItem key=\"first\">\n        <span>...</span>\n      </PagerItem>,\n    );\n    const last = list\n      .slice(list.length - 1)\n      .concat(\n        <PagerItem key=\"last\">\n          <span>...</span>\n        </PagerItem>,\n      )\n      .reverse();\n    pager = list.slice(0, total);\n    if (total > 7) {\n      if (active <= 4) {\n        pager = hideLast ? list.slice(0, 7) : list.slice(0, 5).concat(last);\n      } else {\n        pager =\n          active > total - 4\n            ? first.concat(list.slice(-5))\n            : hideLast\n              ? first.concat(list.slice(active - 3, active + 2))\n              : first.concat(list.slice(active - 2, active + 1)).concat(last);\n      }\n    }\n    return pager;\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      {items > perPage && (\n        <PagerWrapper>\n          <PagerList>\n            <PagerItem key=\"Prev\">\n              <PagerLink\n                data-cta={id ? `${id}-prev` : null}\n                name=\"Prev\"\n                aria-disabled={current === 1}\n                {...(current === 1 && { tabIndex: -1 })}\n                {...(current !== 1 && linkProps(current - 1))}\n                $disabled={current === 1}\n              >\n                Prev\n              </PagerLink>\n            </PagerItem>\n            {renderPager(current, totalPages)}\n            <PagerItem key=\"Next\">\n              <PagerLink\n                data-cta={id ? `${id}-next` : null}\n                name=\"Next\"\n                aria-disabled={current === totalPages}\n                {...(current === totalPages && { tabIndex: -1 })}\n                {...(current !== totalPages && linkProps(current + 1))}\n                $disabled={current === totalPages}\n              >\n                Next\n              </PagerLink>\n            </PagerItem>\n          </PagerList>\n          {children}\n        </PagerWrapper>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default Pagination;\n"],"names":["Pagination","_a","current","items","hideLast","pagerCallback","perPage","_b","searchParam","children","id","foundTheme","useTheme","theme","__assign","defaultTheme","perPageValue","totalPages","Math","ceil","linkProps","number","href","concat","window","location","pathname","onClick","e","preventDefault","React","createElement","ThemeProvider","PagerWrapper","PagerList","PagerItem","key","PagerLink","name","tabIndex","active","total","list","pager","push","$active","first","slice","last","length","reverse","renderPager","$disabled"],"mappings":"kSAkCM,SAAUA,EAAWC,OACzBC,EAAOD,EAAAC,QACPC,EAAKF,EAAAE,MACLC,EAAQH,EAAAG,SACRC,EAAaJ,EAAAI,cACbC,YACAC,EAAAN,EAAAO,YAAAA,OAAc,IAAAD,EAAA,OAAMA,EACpBE,EAAQR,EAAAQ,SACRC,EAAET,EAAAS,GAEIC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAeV,EAAU,EAAIA,EAAU,EACvCW,EAAaC,KAAKC,KAAKhB,EAAQa,IAAiB,EAEhDI,EAAY,SAACC,GAAmB,MAAC,CACrCC,KAAM,GAAAC,OAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,GAClE,KAAAH,OAAAf,EAAc,GAAGe,OAAAf,EAAe,KAAAe,OAAAF,GAAW,IAE7CM,QAAS,SAACC,GACRA,EAAEC,iBACFxB,EAAcgB,EACf,EACD,EAiDF,OACES,EAAAC,cAACC,EAAa,CAACnB,MAAOA,GACnBV,EAAQG,GACPwB,gBAACG,EAAY,KACXH,EAAAC,cAACG,EAAS,KACRJ,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACWvB,EAAA,CAAA,WAAAJ,EAAK,GAAGa,OAAAb,EAAS,SAAG,KAC9B4B,KAAK,OACU,gBAAY,IAAZpC,GACE,IAAZA,GAAiB,CAAEqC,UAAW,GAClB,IAAZrC,GAAiBkB,EAAUlB,EAAU,cACnB,IAAZA,IAAa,SA3DlB,SAACsC,EAAgBC,GAInC,IAHA,IAAMC,EAAO,GACTC,EAAQ,GAEHtB,EAAS,EAAGA,GAAUoB,EAAOpB,GAAU,EAC9CqB,EAAKE,KACHd,EAAAC,cAACI,EAAU,CAAAC,IAAKf,GACdS,EAAAC,cAACM,EAASvB,EAAA,CAAA,WACEJ,EAAK,GAAAa,OAAGb,EAAE,KAAAa,OAAIF,GAAW,KAC1BwB,QAAAxB,IAAWmB,GAChBpB,EAAUC,iBACF,QAAQE,OAAAF,EAAa,QAAAE,OAAAkB,KAEhCpB,KAKT,IAAMyB,EAAQJ,EAAKK,MAAM,EAAG,GAAGxB,OAC7BO,EAAAC,cAACI,EAAU,CAAAC,IAAI,SACbN,EAAgBC,cAAA,OAAA,KAAA,SAGdiB,EAAON,EACVK,MAAML,EAAKO,OAAS,GACpB1B,OACCO,EAACC,cAAAI,EAAU,CAAAC,IAAI,QACbN,EAAAC,cAAA,OAAA,KAAA,SAGHmB,UAcH,OAbAP,EAAQD,EAAKK,MAAM,EAAGN,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJpC,EAAWsC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGxB,OAAOyB,GAG5DR,EAASC,EAAQ,EACbK,EAAMvB,OAAOmB,EAAKK,OAAO,IACzB3C,EACE0C,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIjB,OAAOyB,IAG7DL,CACR,CAmBUQ,CAAYjD,EAASe,GACtBa,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACWvB,EAAA,CAAA,WAAAJ,EAAK,GAAGa,OAAAb,EAAS,SAAG,KAC9B4B,KAAK,OACU,gBAAApC,IAAYe,GACtBf,IAAYe,GAAc,CAAEsB,UAAW,GACvCrC,IAAYe,GAAcG,EAAUlB,EAAU,GACxC,CAAAkD,UAAAlD,IAAYe,IAGb,UAGfR,GAKX"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  type TouchEvent,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { PagerItem, PagerLink, PagerList, PagerWrapper } from \"./styles\";\n\nexport type PaginationProps = {\n  /** set current page number */\n  current: number;\n  /** total number of pages */\n  items: number;\n  /** don't show an ellipsise and then the last page link, usefull for search results where the last page isn't important */\n  hideLast?: boolean;\n  /** callback function which is passed the selected page number on click */\n  pagerCallback: (n: number) => void;\n  /** number of items per page */\n  perPage: number;\n  /** the name of the search param in the url that is modified on page click, defaults to 'page' */\n  searchParam?: string;\n  children?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * \n * Pagination is used when we are viewing large amounts of data.\nData is split into multiple pages and pagination is used to\neasily navigate through these pages.\n */\nexport function Pagination({\n  current,\n  items,\n  hideLast,\n  pagerCallback,\n  perPage,\n  searchParam = \"page\",\n  children,\n  id,\n}: PaginationProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const perPageValue = perPage > 0 ? perPage : 1;\n  const totalPages = Math.ceil(items / perPageValue) || 1;\n\n  const linkProps = (number: number) => ({\n    href: `${typeof window !== \"undefined\" ? window.location.pathname : \"\"}?${\n      searchParam ? `${searchParam}=${number}` : \"\"\n    }`,\n    onClick: (e: TouchEvent | MouseEvent) => {\n      e.preventDefault();\n      pagerCallback(number);\n    },\n  });\n\n  const renderPager = (active: number, total: number) => {\n    const list = [];\n    let pager = [];\n    // get the list of items\n    for (let number = 1; number <= total; number += 1) {\n      list.push(\n        <PagerItem key={number}>\n          <PagerLink\n            data-cta={id ? `${id}-${number}` : null}\n            $active={number === active}\n            {...linkProps(number)}\n            aria-label={`page ${number} of ${total}`}\n          >\n            {number}\n          </PagerLink>\n        </PagerItem>,\n      );\n    }\n    const first = list.slice(0, 1).concat(\n      <PagerItem key=\"first\">\n        <span>...</span>\n      </PagerItem>,\n    );\n    const last = list\n      .slice(list.length - 1)\n      .concat(\n        <PagerItem key=\"last\">\n          <span>...</span>\n        </PagerItem>,\n      )\n      .reverse();\n    pager = list.slice(0, total);\n    if (total > 7) {\n      if (active <= 4) {\n        pager = hideLast ? list.slice(0, 7) : list.slice(0, 5).concat(last);\n      } else {\n        pager =\n          active > total - 4\n            ? first.concat(list.slice(-5))\n            : hideLast\n              ? first.concat(list.slice(active - 3, active + 2))\n              : first.concat(list.slice(active - 2, active + 1)).concat(last);\n      }\n    }\n    return pager;\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      {items > perPage && (\n        <PagerWrapper>\n          <PagerList>\n            <PagerItem key=\"Prev\">\n              <PagerLink\n                data-cta={id ? `${id}-prev` : null}\n                name=\"Prev\"\n                aria-disabled={current === 1}\n                {...(current === 1 && { tabIndex: -1 })}\n                {...(current !== 1 && linkProps(current - 1))}\n                $disabled={current === 1}\n              >\n                Prev\n              </PagerLink>\n            </PagerItem>\n            {renderPager(current, totalPages)}\n            <PagerItem key=\"Next\">\n              <PagerLink\n                data-cta={id ? `${id}-next` : null}\n                name=\"Next\"\n                aria-disabled={current === totalPages}\n                {...(current === totalPages && { tabIndex: -1 })}\n                {...(current !== totalPages && linkProps(current + 1))}\n                $disabled={current === totalPages}\n              >\n                Next\n              </PagerLink>\n            </PagerItem>\n          </PagerList>\n          {children}\n        </PagerWrapper>\n      )}\n    </ThemeProvider>\n  );\n}\n\nexport default Pagination;\n"],"names":["Pagination","current","items","hideLast","pagerCallback","perPage","searchParam","children","id","foundTheme","useTheme","theme","defaultTheme","perPageValue","totalPages","Math","ceil","linkProps","number","href","window","location","pathname","onClick","e","preventDefault","React","createElement","ThemeProvider","PagerWrapper","PagerList","PagerItem","key","PagerLink","name","tabIndex","active","total","list","pager","push","$active","first","slice","concat","last","length","reverse","renderPager","$disabled"],"mappings":"8NAkCM,SAAUA,GAAWC,QACzBA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,cACRA,EAAaC,QACbA,EAAOC,YACPA,EAAc,OAAMC,SACpBA,EAAQC,GACRA,IAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EAAeR,EAAU,EAAIA,EAAU,EACvCS,EAAaC,KAAKC,KAAKd,EAAQW,IAAiB,EAEhDI,EAAaC,IAAoB,CACrCC,KAAM,GAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,MAClEhB,EAAc,GAAGA,KAAeY,IAAW,KAE7CK,QAAUC,IACRA,EAAEC,iBACFrB,EAAcc,EAAO,IAmDzB,OACEQ,EAAAC,cAACC,EAAa,CAACjB,MAAOA,GACnBT,EAAQG,GACPqB,gBAACG,EAAY,KACXH,EAAAC,cAACG,EAAS,KACRJ,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACW,CAAA,WAAAzB,EAAK,GAAGA,SAAY,KAC9B0B,KAAK,OACU,gBAAY,IAAZjC,KACE,IAAZA,GAAiB,CAAEkC,UAAY,MACnB,IAAZlC,GAAiBgB,EAAUhB,EAAU,aACnB,IAAZA,GAAa,SA3DlB,EAACmC,EAAgBC,KACnC,MAAMC,EAAO,GACb,IAAIC,EAAQ,GAEZ,IAAK,IAAIrB,EAAS,EAAGA,GAAUmB,EAAOnB,GAAU,EAC9CoB,EAAKE,KACHd,EAAAC,cAACI,EAAU,CAAAC,IAAKd,GACdQ,EAAAC,cAACM,EAAS,CAAA,WACEzB,EAAK,GAAGA,KAAMU,IAAW,KAC1BuB,QAAAvB,IAAWkB,KAChBnB,EAAUC,gBACF,QAAQA,QAAamB,KAEhCnB,KAKT,MAAMwB,EAAQJ,EAAKK,MAAM,EAAG,GAAGC,OAC7BlB,EAAAC,cAACI,EAAU,CAAAC,IAAI,SACbN,EAAgBC,cAAA,OAAA,KAAA,SAGdkB,EAAOP,EACVK,MAAML,EAAKQ,OAAS,GACpBF,OACClB,EAACC,cAAAI,EAAU,CAAAC,IAAI,QACbN,EAAAC,cAAA,OAAA,KAAA,SAGHoB,UAcH,OAbAR,EAAQD,EAAKK,MAAM,EAAGN,GAClBA,EAAQ,IAERE,EADEH,GAAU,EACJjC,EAAWmC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGC,OAAOC,GAG5DT,EAASC,EAAQ,EACbK,EAAME,OAAON,EAAKK,OAAM,IACxBxC,EACEuC,EAAME,OAAON,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAME,OAAON,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIQ,OAAOC,IAG7DN,CAAK,EAoBHS,CAAY/C,EAASa,GACtBY,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACW,CAAA,WAAAzB,EAAK,GAAGA,SAAY,KAC9B0B,KAAK,OACU,gBAAAjC,IAAYa,KACtBb,IAAYa,GAAc,CAAEqB,UAAY,MACxClC,IAAYa,GAAcG,EAAUhB,EAAU,GACxCgD,UAAAhD,IAAYa,GAGb,UAGfP,GAKX"}

package/lib/src/components/Pagination/styles.js

@@ -1,2 +1,93 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as e}from"styled-components";var t,r,i,a,d,c,l,s=o.div(t||(t=n(["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"],["\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n"]))),u=o.ul(r||(r=n(["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"],["\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n"]))),p=o.a(c||(c=n(["\n  font-weight: normal;\n  font-family: ",";\n  font-size: ",";\n  color: ",";\n  background-color: ",";\n  cursor: pointer;\n  border-radius: 0;\n  margin: ",";\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ","\n\n  ","\n\n  ","\n"],["\n  font-weight: normal;\n  font-family: ",";\n  font-size: ",";\n  color: ",";\n  background-color: ",";\n  cursor: pointer;\n  border-radius: 0;\n  margin: ",";\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ","\n\n  ","\n\n  ","\n"])),(function(n){return n.theme.typography.fontFamilyBase}),(function(n){return n.theme.fontSizes.s}),(function(n){return n.theme.colors.textLight}),(function(n){return n.theme.colors.paginationBackground}),(function(n){return n.theme.spacing.xxs}),(function(o){var t=o.$active,r=o.theme;return t&&e(i||(i=n(["\n      color: ",";\n      background-color: ",";\n      cursor: default;\n      &:hover {\n        background-color: ",";\n        text-decoration: none;\n      }\n    "],["\n      color: ",";\n      background-color: ",";\n      cursor: default;\n      &:hover {\n        background-color: ",";\n        text-decoration: none;\n      }\n    "])),r.colors.textDark,r.colors.paginationActive,r.colors.paginationActive)}),(function(o){var t=o.name,r=o.theme,i=o.$disabled;return("Prev"===t||"Next"===t)&&e(a||(a=n(["\n      color: ",";\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    "],["\n      color: ",";\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    "])),i?r.colors.disabled:r.colors.paginationText)}),(function(o){var t=o.theme;return o.$disabled&&e(d||(d=n(["\n      color: $ ",";\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ",";\n        text-decoration: none;\n      }\n    "],["\n      color: $ ",";\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ",";\n        text-decoration: none;\n      }\n    "])),t.colors.disabled,t.colors.disabled)})),b=o.li(l||(l=n(["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ",") {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ",";\n  }\n"],["\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ",") {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ",";\n  }\n"])),(function(n){return n.theme.breakpoint.mobile}),(function(n){return n.theme.breakpoint.mobile}));export{b as PagerItem,p as PagerLink,u as PagerList,s as PagerWrapper};
+import o,{css as e}from"styled-components";const t=o.div`
+  display: table;
+  width: 100%;
+  clear: both;
+  text-align: center;
+`,n=o.ul`
+  display: inline-block;
+  padding-left: 0;
+  margin: 20px 0;
+`,i=o.a`
+  font-weight: normal;
+  font-family: ${({theme:{typography:{fontFamilyBase:o}}})=>o};
+  font-size: ${({theme:{fontSizes:{s:o}}})=>o};
+  color: ${({theme:o})=>o.colors.textLight};
+  background-color: ${({theme:o})=>o.colors.paginationBackground};
+  cursor: pointer;
+  border-radius: 0;
+  margin: ${({theme:o})=>o.spacing.xxs};
+  padding: 7px 11px;
+  text-decoration: none;
+  &:active,
+  &:focus,
+  &:hover {
+    opacity: 0.88;
+    text-decoration: underline;
+  }
+  &:visited {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: auto;
+  }
+
+  ${({$active:o,theme:t})=>o&&e`
+      color: ${t.colors.textDark};
+      background-color: ${t.colors.paginationActive};
+      cursor: default;
+      &:hover {
+        background-color: ${t.colors.paginationActive};
+        text-decoration: none;
+      }
+    `}
+
+  ${({name:o,theme:t,$disabled:n})=>("Prev"===o||"Next"===o)&&e`
+      color: ${n?t.colors.disabled:t.colors.paginationText};
+      background-color: transparent;
+      font-weight: bold;
+      padding: 8px 6px;
+      background-color: transparent;
+      &:focus,
+      &:hover {
+        background-color: transparent;
+        text-decoration: underline;
+      }
+      &:active,
+      &:visited {
+        text-decoration: none;
+      }
+    `}
+
+  ${({theme:o,$disabled:t})=>t&&e`
+      color: $ ${o.colors.disabled};
+      cursor: not-allowed;
+      pointer-events:none
+      text-decoration: none;
+      &:hover,
+      &:focus,
+      &:active,
+      &:visited {
+        color: ${o.colors.disabled};
+        text-decoration: none;
+      }
+    `}
+`,r=o.li`
+  display: none;
+  &:first-child,
+  &:last-child {
+    display: inline;
+  }
+  @media (min-width: ${o=>o.theme.breakpoint.mobile}) {
+    display: inline;
+  }
+  span {
+    border: none;
+    min-width: 30px;
+    padding: 5px;
+    margin: 1px;
+    border-radius: 0;
+    border-width: ${o=>o.theme.breakpoint.mobile};
+  }
+`;export{r as PagerItem,i as PagerLink,n as PagerList,t as PagerWrapper};
 //# sourceMappingURL=styles.js.map

package/lib/src/components/Pagination/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Pagination/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const PagerWrapper = styled.div`\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n`;\n\nexport const PagerList = styled.ul`\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n`;\n\nexport const PagerLink = styled.a<{\n  name?: string;\n  theme: ThemeType;\n  $active?: boolean;\n  $disabled?: boolean;\n}>`\n  font-weight: normal;\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyBase },\n    },\n  }) => fontFamilyBase};\n  font-size: ${({\n    theme: {\n      fontSizes: { s },\n    },\n  }) => s};\n  color: ${({ theme }) => theme.colors.textLight};\n  background-color: ${({ theme }) => theme.colors.paginationBackground};\n  cursor: pointer;\n  border-radius: 0;\n  margin: ${({ theme }) => theme.spacing.xxs};\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${({ $active, theme }) =>\n    $active &&\n    css`\n      color: ${theme.colors.textDark};\n      background-color: ${theme.colors.paginationActive};\n      cursor: default;\n      &:hover {\n        background-color: ${theme.colors.paginationActive};\n        text-decoration: none;\n      }\n    `}\n\n  ${({ name, theme, $disabled }) =>\n    (name === \"Prev\" || name === \"Next\") &&\n    css`\n      color: ${$disabled ? theme.colors.disabled : theme.colors.paginationText};\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    `}\n\n  ${({ theme, $disabled }) =>\n    $disabled &&\n    css`\n      color: $ ${theme.colors.disabled};\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ${theme.colors.disabled};\n        text-decoration: none;\n      }\n    `}\n`;\n\nexport const PagerItem = styled.li<{ theme: ThemeType }>`\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ${(props) => props.theme.breakpoint.mobile}) {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ${(props) => props.theme.breakpoint.mobile};\n  }\n`;\n"],"names":["PagerWrapper","styled","div","templateObject_1","__makeTemplateObject","PagerList","ul","templateObject_2","PagerLink","a","templateObject_6","_a","theme","typography","fontFamilyBase","fontSizes","s","colors","textLight","paginationBackground","spacing","xxs","$active","css","templateObject_3","textDark","paginationActive","name","$disabled","templateObject_4","disabled","paginationText","templateObject_5","PagerItem","li","templateObject_7","props","breakpoint","mobile"],"mappings":"2HAGa,kBAAAA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,gFAAA,CAAA,mFAOzBC,EAAYJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,uEAAA,CAAA,0EAMrBI,EAAYP,EAAOQ,EAK9BC,IAAAA,EAAAN,EAAA,CAAA,4CAAA,mBAAA,eAAA,0BAAA,yDAAA,0PAAA,SAAA,SAAA,MAAA,CAAA,4CAMoB,mBAKb,eACuC,0BACsB,yDAG1B,0PA2BvC,SAmBA,SAgBA,SA5EY,SAACO,GAIV,OAF0BA,EAAAC,MAAAC,WAAAC,cAE1B,IACO,SAACH,GAIR,OAFYA,EAAAC,MAAAG,UAAAC,CAEZ,IACG,SAACL,GAAc,OAAPA,EAAAC,MAAaK,OAAOC,SAAb,IACJ,SAACP,GAAc,OAAPA,EAAAC,MAAaK,OAAOE,oBAAb,IAGzB,SAACR,GAAc,OAAPA,EAAAC,MAAaQ,QAAQC,GAAd,IAiBvB,SAACV,OAAEW,EAAOX,EAAAW,QAAEV,EAAKD,EAAAC,MACjB,OAAAU,GACAC,EAAGC,IAAAA,EAAApB,EAAA,CAAA,kBAAA,8BAAA,yEAAA,oDAAA,CAAA,kBAC6B,8BACmB,yEAGE,sDAJ1CQ,EAAMK,OAAOQ,SACFb,EAAMK,OAAOS,iBAGXd,EAAMK,OAAOS,iBANrC,IAWA,SAACf,GAAE,IAAAgB,SAAMf,EAAKD,EAAAC,MAAEgB,EAASjB,EAAAiB,UACzB,OAAU,SAATD,GAA4B,SAATA,IACpBJ,EAAGM,IAAAA,EAAAzB,EAAA,CAAA,kBAAA,8UAAA,CAAA,kBACuE,gVAA/DwB,EAAYhB,EAAMK,OAAOa,SAAWlB,EAAMK,OAAOc,eAF5D,IAkBA,SAACpB,OAAEC,EAAKD,EAAAC,MACR,OADmBD,EAAAiB,WAEnBL,EAAGS,IAAAA,EAAA5B,EAAA,CAAA,oBAAA,8KAAA,oDAAA,CAAA,oBAC+B,8KAQA,sDARrBQ,EAAMK,OAAOa,SAQblB,EAAMK,OAAOa,SAV1B,IAgBSG,EAAYhC,EAAOiC,GAAwBC,IAAAA,EAAA/B,EAAA,CAAA,2GAAA,oKAAA,YAAA,CAAA,2GAMO,oKASH,eATrC,SAACgC,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAM,IAS3C,SAACF,GAAU,OAAAA,EAAMxB,MAAMyB,WAAWC,MAAM"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Pagination/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const PagerWrapper = styled.div`\n  display: table;\n  width: 100%;\n  clear: both;\n  text-align: center;\n`;\n\nexport const PagerList = styled.ul`\n  display: inline-block;\n  padding-left: 0;\n  margin: 20px 0;\n`;\n\nexport const PagerLink = styled.a<{\n  name?: string;\n  theme: ThemeType;\n  $active?: boolean;\n  $disabled?: boolean;\n}>`\n  font-weight: normal;\n  font-family: ${({\n    theme: {\n      typography: { fontFamilyBase },\n    },\n  }) => fontFamilyBase};\n  font-size: ${({\n    theme: {\n      fontSizes: { s },\n    },\n  }) => s};\n  color: ${({ theme }) => theme.colors.textLight};\n  background-color: ${({ theme }) => theme.colors.paginationBackground};\n  cursor: pointer;\n  border-radius: 0;\n  margin: ${({ theme }) => theme.spacing.xxs};\n  padding: 7px 11px;\n  text-decoration: none;\n  &:active,\n  &:focus,\n  &:hover {\n    opacity: 0.88;\n    text-decoration: underline;\n  }\n  &:visited {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    outline: auto;\n  }\n\n  ${({ $active, theme }) =>\n    $active &&\n    css`\n      color: ${theme.colors.textDark};\n      background-color: ${theme.colors.paginationActive};\n      cursor: default;\n      &:hover {\n        background-color: ${theme.colors.paginationActive};\n        text-decoration: none;\n      }\n    `}\n\n  ${({ name, theme, $disabled }) =>\n    (name === \"Prev\" || name === \"Next\") &&\n    css`\n      color: ${$disabled ? theme.colors.disabled : theme.colors.paginationText};\n      background-color: transparent;\n      font-weight: bold;\n      padding: 8px 6px;\n      background-color: transparent;\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        text-decoration: underline;\n      }\n      &:active,\n      &:visited {\n        text-decoration: none;\n      }\n    `}\n\n  ${({ theme, $disabled }) =>\n    $disabled &&\n    css`\n      color: $ ${theme.colors.disabled};\n      cursor: not-allowed;\n      pointer-events:none\n      text-decoration: none;\n      &:hover,\n      &:focus,\n      &:active,\n      &:visited {\n        color: ${theme.colors.disabled};\n        text-decoration: none;\n      }\n    `}\n`;\n\nexport const PagerItem = styled.li<{ theme: ThemeType }>`\n  display: none;\n  &:first-child,\n  &:last-child {\n    display: inline;\n  }\n  @media (min-width: ${(props) => props.theme.breakpoint.mobile}) {\n    display: inline;\n  }\n  span {\n    border: none;\n    min-width: 30px;\n    padding: 5px;\n    margin: 1px;\n    border-radius: 0;\n    border-width: ${(props) => props.theme.breakpoint.mobile};\n  }\n`;\n"],"names":["PagerWrapper","styled","div","PagerList","ul","PagerLink","a","theme","typography","fontFamilyBase","fontSizes","s","colors","textLight","paginationBackground","spacing","xxs","$active","css","textDark","paginationActive","name","$disabled","disabled","paginationText","PagerItem","li","props","breakpoint","mobile"],"mappings":"2CAGa,MAAAA,EAAeC,EAAOC,GAAG;;;;;EAOzBC,EAAYF,EAAOG,EAAE;;;;EAMrBC,EAAYJ,EAAOK,CAK9B;;iBAEe,EACbC,OACEC,YAAcC,sBAEZA;eACO,EACXF,OACEG,WAAaC,SAEXA;WACG,EAAGJ,WAAYA,EAAMK,OAAOC;sBACjB,EAAGN,WAAYA,EAAMK,OAAOE;;;YAGtC,EAAGP,WAAYA,EAAMQ,QAAQC;;;;;;;;;;;;;;;;;IAiBrC,EAAGC,UAASV,WACZU,GACAC,CAAG;eACQX,EAAMK,OAAOO;0BACFZ,EAAMK,OAAOQ;;;4BAGXb,EAAMK,OAAOQ;;;;;IAKrC,EAAGC,OAAMd,QAAOe,gBACN,SAATD,GAA4B,SAATA,IACpBH,CAAG;eACQI,EAAYf,EAAMK,OAAOW,SAAWhB,EAAMK,OAAOY;;;;;;;;;;;;;;;;IAgB5D,EAAGjB,QAAOe,eACVA,GACAJ,CAAG;iBACUX,EAAMK,OAAOW;;;;;;;;iBAQbhB,EAAMK,OAAOW;;;;EAMjBE,EAAYxB,EAAOyB,EAAwB;;;;;;uBAMhCC,GAAUA,EAAMpB,MAAMqB,WAAWC;;;;;;;;;oBASpCF,GAAUA,EAAMpB,MAAMqB,WAAWC;;"}

package/lib/{components → src/components}/PopOver/Popover.stories.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import PopOver from ".";
 declare const _default: {
     title: string;

package/lib/src/components/PopOver/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t,{useRef as n,useState as o,useCallback as r,useEffect as i}from"react";import{useTheme as m,ThemeProvider as a}from"styled-components";import{useKey as c}from"../../hooks/useKey.js";import{crukTheme as l}from"../../themes/cruk.js";import{useEffectBrowser as s}from"../../hooks/useEffectBrowser.js";import{PopOverWrapper as u,PopOverModal as d}from"./styles.js";function f(f){var p=f.onPopOverIsOpenChange,h=f.children,E=f.minWidth,k=f.maxWidth,v=f.position,j=f.modalLabel,$=f.modalContent,b=f.css,g=f.full,x=void 0!==g&&g,y=n(null),C=o(!1),W=C[0],L=C[1],K=m(),O=e(e({},l),K),w=function(){return L(!W)},B=function(){return L(!1)},I=r((function(e){y.current&&!y.current.contains(e.target)&&B()}),[y.current]);return c((function(){B()}),{detectKeys:["Escape"]},[]),i((function(){p&&p(W)}),[W]),s((function(){return document.addEventListener("click",I,!0),function(){document.removeEventListener("click",I,!0)}}),[]),t.createElement(a,{theme:O},t.createElement(u,{$full:x,$css:b,ref:y},t.Children.map(h,(function(e){return t.cloneElement(e,{onClick:w,"aria-expanded":W,"aria-haspopup":"dialog"})})),W?t.createElement(d,{$maxWidth:k||"none",$minWidth:E||"auto",$position:v||"top",theme:O,role:"dialog","aria-label":j,"aria-modal":W},$):null))}export{f as PopOver,f as default};
+import e,{useRef as t,useState as o,useEffect as r}from"react";import{useTheme as n,ThemeProvider as a}from"styled-components";import{useKey as i}from"../../hooks/useKey.js";import{crukTheme as m}from"../../themes/cruk.js";import{useEffectBrowser as l}from"../../hooks/useEffectBrowser.js";import{PopOverWrapper as s,PopOverModal as c}from"./styles.js";function d({onPopOverIsOpenChange:d,children:p,minWidth:u,maxWidth:f,position:h,modalLabel:E,modalContent:k,css:$,full:g=!1}){const j=t(null),[v,x]=o(!1),y=n(),C={...m,...y},W=()=>x(!v),L=()=>x(!1),b=e=>{j.current&&!j.current.contains(e.target)&&L()};return i((()=>{L()}),{detectKeys:["Escape"]},[]),r((()=>{d&&d(v)}),[v,d]),l((()=>(document.addEventListener("click",b,!0),()=>{document.removeEventListener("click",b,!0)})),[]),e.createElement(a,{theme:C},e.createElement(s,{$full:g,$css:$,ref:j},e.Children.map(p,(t=>e.cloneElement(t,{onClick:W,"aria-expanded":v,"aria-haspopup":"dialog"}))),v?e.createElement(c,{$maxWidth:f||"none",$minWidth:u||"auto",$position:h||"top",theme:C,role:"dialog","aria-label":E,"aria-modal":v},k):null))}export{d as PopOver,d as default};
 //# sourceMappingURL=index.js.map

package/lib/src/components/PopOver/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = useCallback(\n    (e: MouseEvent) => {\n      if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n        closePopOver();\n      }\n    },\n    [popRef.current],\n  );\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <ThemeProvider theme={theme}>\n      <PopOverWrapper $full={full} $css={css} ref={popRef}>\n        {React.Children.map(\n          children as ReactElement,\n          (child: React.ReactElement) =>\n            React.cloneElement(child, {\n              onClick: toggle,\n              \"aria-expanded\": showPopOver,\n              \"aria-haspopup\": \"dialog\",\n            }),\n        )}\n        {showPopOver ? (\n          <PopOverModal\n            $maxWidth={maxWidth || \"none\"}\n            $minWidth={minWidth || \"auto\"}\n            $position={position || \"top\"}\n            theme={theme}\n            role=\"dialog\"\n            aria-label={modalLabel}\n            aria-modal={showPopOver}\n          >\n            {modalContent}\n          </PopOverModal>\n        ) : null}\n      </PopOverWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","_b","full","popRef","useRef","_c","useState","showPopOver","setShowPopOver","foundTheme","useTheme","theme","__assign","defaultTheme","toggle","closePopOver","handleDocumentClick","useCallback","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","ThemeProvider","PopOverWrapper","$css","ref","Children","map","child","cloneElement","onClick","PopOverModal","$minWidth","role"],"mappings":"sbAwCM,SAAUA,EAAQC,GACtB,IAAAC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAQJ,EAAAI,SACRC,EAAQL,EAAAK,SACRC,EAAUN,EAAAM,WACVC,EAAYP,EAAAO,aACZC,EAAGR,EAAAQ,IACHC,EAAAT,EAAAU,KAAAA,OAAO,IAAAD,GAAKA,EAENE,EAASC,EAAuB,MAChCC,EAAgCC,GAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAC5BI,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAS,WAAM,OAAAN,GAAgBD,EAAY,EAC3CQ,EAAe,WAAM,OAAAP,GAAe,EAAM,EAG1CQ,EAAsBC,GAC1B,SAACC,GACOf,EAAOgB,UAAYhB,EAAOgB,QAAQC,SAASF,EAAEG,SACjDN,GAEJ,GACA,CAACZ,EAAOgB,UA0BV,OAvBAG,GACE,WACEP,GACF,GACA,CACEQ,WAAY,CAAC,WAEf,IAGFC,GAAU,WACJ/B,GACFA,EAAsBc,EAE1B,GAAG,CAACA,IAEJkB,GAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASX,GAAqB,GACjD,WACLU,SAASE,oBAAoB,QAASZ,GAAqB,EAC5D,CACF,GAAE,IAGDa,EAACC,cAAAC,EAAc,CAAApB,MAAOA,GACpBkB,EAACC,cAAAE,SAAsB9B,EAAI+B,KAAQjC,EAAKkC,IAAK/B,GAC1C0B,EAAMM,SAASC,IACd1C,GACA,SAAC2C,GACC,OAAAR,EAAMS,aAAaD,EAAO,CACxBE,QAASzB,EACT,gBAAiBP,EACjB,gBAAiB,UAHnB,IAMHA,EACCsB,EAACC,cAAAU,aACY5C,GAAY,OAAM6C,UAClB9C,GAAY,iBACZE,GAAY,MACvBc,MAAOA,EACP+B,KAAK,SACO,aAAA5C,eACAS,GAEXR,GAED,MAIZ"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type DetailedReactHTMLElement,\n} from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { useKey } from \"../../hooks/useKey\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { useEffectBrowser } from \"../../hooks/useEffectBrowser\";\n\nimport { type PopOverPositionType } from \"../../types\";\nimport { PopOverWrapper, PopOverModal } from \"./styles\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /** full: enable child button extend full width */\n  full?: boolean;\n  /**  maxWidth: popover modal max width */\n  maxWidth?: string;\n  /**  minWidth: popover modal min width */\n  minWidth?: string;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  children?: ReactNode;\n  css?: string;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  minWidth,\n  maxWidth,\n  position,\n  modalLabel,\n  modalContent,\n  css,\n  full = false,\n}: PopOverProps) {\n  const popRef = useRef<HTMLDivElement>(null);\n  const [showPopOver, setShowPopOver] = useState(false);\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n\n  const toggle = () => setShowPopOver(!showPopOver);\n  const closePopOver = () => setShowPopOver(false);\n\n  // outside click closes popover\n  const handleDocumentClick = (e: MouseEvent) => {\n    if (!!popRef.current && !popRef.current.contains(e.target as Node)) {\n      closePopOver();\n    }\n  };\n\n  useKey(\n    () => {\n      closePopOver();\n    },\n    {\n      detectKeys: [\"Escape\"],\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (onPopOverIsOpenChange) {\n      onPopOverIsOpenChange(showPopOver);\n    }\n  }, [showPopOver, onPopOverIsOpenChange]);\n\n  useEffectBrowser(() => {\n    document.addEventListener(\"click\", handleDocumentClick, true);\n    return () => {\n      document.removeEventListener(\"click\", handleDocumentClick, true);\n    };\n  }, []);\n\n  return (\n    <ThemeProvider theme={theme}>\n      <PopOverWrapper $full={full} $css={css} ref={popRef}>\n        {React.Children.map(children, (child) =>\n          React.cloneElement(\n            child as DetailedReactHTMLElement<object, HTMLElement>,\n            {\n              onClick: toggle,\n              \"aria-expanded\": showPopOver,\n              \"aria-haspopup\": \"dialog\",\n            },\n          ),\n        )}\n        {showPopOver ? (\n          <PopOverModal\n            $maxWidth={maxWidth || \"none\"}\n            $minWidth={minWidth || \"auto\"}\n            $position={position || \"top\"}\n            theme={theme}\n            role=\"dialog\"\n            aria-label={modalLabel}\n            aria-modal={showPopOver}\n          >\n            {modalContent}\n          </PopOverModal>\n        ) : null}\n      </PopOverWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","full","popRef","useRef","showPopOver","setShowPopOver","useState","foundTheme","useTheme","theme","defaultTheme","toggle","closePopOver","handleDocumentClick","e","current","contains","target","useKey","detectKeys","useEffect","useEffectBrowser","document","addEventListener","removeEventListener","React","createElement","ThemeProvider","PopOverWrapper","$css","ref","Children","map","child","cloneElement","onClick","PopOverModal","$minWidth","role"],"mappings":"iWAuCM,SAAUA,GAAQC,sBACtBA,EAAqBC,SACrBA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,WACRA,EAAUC,aACVA,EAAYC,IACZA,EAAGC,KACHA,GAAO,IAEP,MAAMC,EAASC,EAAuB,OAC/BC,EAAaC,GAAkBC,GAAS,GACzCC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EAAS,IAAMN,GAAgBD,GAC/BQ,EAAe,IAAMP,GAAe,GAGpCQ,EAAuBC,IACrBZ,EAAOa,UAAYb,EAAOa,QAAQC,SAASF,EAAEG,SACjDL,KA2BJ,OAvBAM,GACE,KACEN,GAAc,GAEhB,CACEO,WAAY,CAAC,WAEf,IAGFC,GAAU,KACJ3B,GACFA,EAAsBW,KAEvB,CAACA,EAAaX,IAEjB4B,GAAiB,KACfC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,KACLS,SAASE,oBAAoB,QAASX,GAAqB,EAAK,IAEjE,IAGDY,EAACC,cAAAC,EAAc,CAAAlB,MAAOA,GACpBgB,EAACC,cAAAE,SAAsB3B,EAAI4B,KAAQ7B,EAAK8B,IAAK5B,GAC1CuB,EAAMM,SAASC,IAAItC,GAAWuC,GAC7BR,EAAMS,aACJD,EACA,CACEE,QAASxB,EACT,gBAAiBP,EACjB,gBAAiB,aAItBA,EACCqB,EAACC,cAAAU,aACYxC,GAAY,OAAMyC,UAClB1C,GAAY,iBACZE,GAAY,MACvBY,MAAOA,EACP6B,KAAK,SACO,aAAAxC,eACAM,GAEXL,GAED,MAIZ"}

package/lib/src/components/PopOver/styles.js

@@ -1,2 +1,82 @@
-import{__makeTemplateObject as t}from"../../../node_modules/tslib/tslib.es6.js";import n,{css as e}from"styled-components";var o,r,a,s=n.div(r||(r=t(["\n  position: relative;\n  display: ",";\n  ","\n"],["\n  position: relative;\n  display: ",";\n  ","\n"])),(function(t){return t.$full?"block":"inline-block"}),(function(n){return n.$css&&e(o||(o=t(["\n      ","\n    "],["\n      ","\n    "])),n.$css)})),c=n.div(a||(a=t(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  word-wrap: break-word;\n  z-index: 9999;\n  max-width: ",";\n  min-width: ",";\n  font-size: ",";\n  background-color: ",";\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.25);\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n\n  margin-bottom: ",";\n\n  margin-top: ",";\n  top: ",";\n\n  bottom: ",";\n\n  left: ",";\n  right: ",';\n\n  &:after,\n  &:before {\n    content: "";\n    border-style: solid;\n    border-width: 10px;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: ',";\n    bottom: ",";\n\n    left: ",";\n    right: ",";\n  }\n  &:before {\n    border-color: ",";\n  }\n  &:after {\n    margin: ",";\n    border-color: ",";\n  }\n\n  @media (min-width: ",") {\n    margin-top: ",";\n\n    margin-left: ",";\n    margin-right: ",";\n\n    top: ",";\n\n    left: ",";\n    right: ",';\n\n    &:after,\n    &:before {\n      content: "";\n      top: ',";\n      bottom: ",";\n\n      left: ",";\n      right: ",";\n    }\n    &:before {\n      border-color: ",";\n    }\n    &:after {\n      margin: ",";\n      border-color: ",";\n    }\n  }\n"],["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  word-wrap: break-word;\n  z-index: 9999;\n  max-width: ",";\n  min-width: ",";\n  font-size: ",";\n  background-color: ",";\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.25);\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n\n  margin-bottom: ",";\n\n  margin-top: ",";\n  top: ",";\n\n  bottom: ",";\n\n  left: ",";\n  right: ",';\n\n  &:after,\n  &:before {\n    content: "";\n    border-style: solid;\n    border-width: 10px;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: ',";\n    bottom: ",";\n\n    left: ",";\n    right: ",";\n  }\n  &:before {\n    border-color: ",";\n  }\n  &:after {\n    margin: ",";\n    border-color: ",";\n  }\n\n  @media (min-width: ",") {\n    margin-top: ",";\n\n    margin-left: ",";\n    margin-right: ",";\n\n    top: ",";\n\n    left: ",";\n    right: ",';\n\n    &:after,\n    &:before {\n      content: "";\n      top: ',";\n      bottom: ",";\n\n      left: ",";\n      right: ",";\n    }\n    &:before {\n      border-color: ",";\n    }\n    &:after {\n      margin: ",";\n      border-color: ",";\n    }\n  }\n"])),(function(t){return t.$maxWidth}),(function(t){return t.$minWidth}),(function(t){return t.theme.fontSizes.s}),(function(t){return t.theme.colors.popoverBackground}),(function(t){switch(t.$position){case"top":case"topLeft":case"bottomLeft":default:return"10px";case"left":case"right":case"bottom":return 0}}),(function(t){switch(t.$position){case"bottom":case"bottomLeft":case"left":case"right":return"10px";default:return 0}}),(function(t){switch(t.$position){case"top":case"topLeft":default:return"auto";case"left":case"right":case"bottom":case"bottomLeft":return"100%"}}),(function(t){switch(t.$position){case"top":case"topLeft":default:return"100%";case"left":case"right":case"bottom":case"bottomLeft":return"auto"}}),(function(t){return"top"===t.$position?0:"auto"}),(function(t){switch(t.$position){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return 0;case"right":return"0"}}),(function(t){switch(t.$position){case"top":case"topLeft":default:return"100%";case"left":case"right":case"bottom":case"bottomLeft":return"auto"}}),(function(t){switch(t.$position){case"top":case"topLeft":default:return"auto";case"left":case"right":case"bottom":case"bottomLeft":return"100%"}}),(function(t){var n=t.$position,e=t.theme;switch(n){case"top":case"left":case"bottom":default:return"".concat(e.spacing.s);case"topLeft":case"right":case"bottomLeft":return"auto"}}),(function(t){var n=t.$position,e=t.theme;switch(n){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"right":case"bottomLeft":return"".concat(e.spacing.s)}}),(function(t){switch(t.$position){case"top":case"topLeft":default:return"rgba(0, 0, 0, 0.25) transparent transparent";case"left":case"right":case"bottom":case"bottomLeft":return"transparent transparent rgba(0, 0, 0, 0.25)"}}),(function(t){switch(t.$position){case"top":case"topLeft":default:return"-1px 0 0 0";case"left":case"right":case"bottom":case"bottomLeft":return"0 0 -1px 0"}}),(function(t){var n=t.theme;switch(t.$position){case"top":case"topLeft":default:return"".concat(n.colors.popoverBackground," transparent transparent");case"left":case"right":case"bottom":case"bottomLeft":return"transparent transparent ".concat(n.colors.popoverBackground)}}),(function(t){return t.theme.breakpoint.desktop}),(function(t){switch(t.$position){case"bottom":case"bottomLeft":return"10px";default:return 0}}),(function(t){return"right"===t.$position?"10px":0}),(function(t){return"left"===t.$position?"10px":0}),(function(t){switch(t.$position){case"top":case"topLeft":default:return"auto";case"left":case"right":return 0;case"bottom":case"bottomLeft":return"100%"}}),(function(t){switch(t.$position){case"top":return 0;case"topLeft":case"left":case"bottom":case"bottomLeft":default:return"auto";case"right":return"100%"}}),(function(t){switch(t.$position){case"top":case"right":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return 0;case"left":return"100%"}}),(function(t){var n=t.$position,e=t.theme;switch(n){case"top":case"topLeft":default:return"100%";case"left":case"right":return"".concat(e.spacing.xs);case"bottom":case"bottomLeft":return"auto"}}),(function(t){switch(t.$position){case"top":case"topLeft":case"left":case"right":default:return"auto";case"bottom":case"bottomLeft":return"100%"}}),(function(t){var n=t.$position,e=t.theme;switch(n){case"top":case"bottom":default:return"".concat(e.spacing.s);case"topLeft":case"bottomLeft":return"auto";case"left":return"100%";case"right":return"-20px"}}),(function(t){var n=t.$position,e=t.theme;switch(n){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return"".concat(e.spacing.s);case"right":return"0"}}),(function(t){switch(t.$position){case"top":case"topLeft":default:return"rgba(0, 0, 0, 0.25) transparent transparent";case"left":return"transparent transparent transparent rgba(0, 0, 0, 0.25)";case"right":return"transparent rgba(0, 0, 0, 0.25) transparent transparent";case"bottom":case"bottomLeft":return"transparent transparent rgba(0, 0, 0, 0.25)"}}),(function(t){switch(t.$position){case"top":case"topLeft":default:return"-1px 0 0 0";case"left":return"0 0 0 -1px";case"right":return"0 0 0 1px";case"bottom":case"bottomLeft":return"0 0 -1px 0"}}),(function(t){var n=t.theme;switch(t.$position){case"top":case"topLeft":default:return"".concat(n.colors.popoverBackground," transparent transparent");case"left":return"transparent transparent transparent ".concat(n.colors.popoverBackground);case"right":return"transparent ".concat(n.colors.popoverBackground," transparent transparent");case"bottom":case"bottomLeft":return"transparent transparent ".concat(n.colors.popoverBackground)}}));export{c as PopOverModal,s as PopOverWrapper};
+import t,{css as e}from"styled-components";const o=t.div`
+  position: relative;
+  display: ${({$full:t})=>t?"block":"inline-block"};
+  ${t=>t.$css&&e`
+      ${t.$css}
+    `}
+`,r=t.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  word-wrap: break-word;
+  z-index: 9999;
+  max-width: ${({$maxWidth:t})=>t};
+  min-width: ${({$minWidth:t})=>t};
+  font-size: ${({theme:{fontSizes:{s:t}}})=>t};
+  background-color: ${({theme:{colors:{popoverBackground:t}}})=>t};
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+  margin-bottom: ${({$position:t})=>{switch(t){case"top":case"topLeft":case"bottomLeft":default:return"10px";case"left":case"right":case"bottom":return 0}}};
+
+  margin-top: ${({$position:t})=>{switch(t){case"bottom":case"bottomLeft":case"left":case"right":return"10px";default:return 0}}};
+  top: ${({$position:t})=>{switch(t){case"top":case"topLeft":default:return"auto";case"left":case"right":case"bottom":case"bottomLeft":return"100%"}}};
+
+  bottom: ${({$position:t})=>{switch(t){case"top":case"topLeft":default:return"100%";case"left":case"right":case"bottom":case"bottomLeft":return"auto"}}};
+
+  left: ${({$position:t})=>"top"===t?0:"auto"};
+  right: ${({$position:t})=>{switch(t){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return 0;case"right":return"0"}}};
+
+  &:after,
+  &:before {
+    content: "";
+    border-style: solid;
+    border-width: 10px;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: ${({$position:t})=>{switch(t){case"top":case"topLeft":default:return"100%";case"left":case"right":case"bottom":case"bottomLeft":return"auto"}}};
+    bottom: ${({$position:t})=>{switch(t){case"top":case"topLeft":default:return"auto";case"left":case"right":case"bottom":case"bottomLeft":return"100%"}}};
+
+    left: ${({$position:t,theme:e})=>{switch(t){case"top":case"left":case"bottom":default:return`${e.spacing.s}`;case"topLeft":case"right":case"bottomLeft":return"auto"}}};
+    right: ${({$position:t,theme:e})=>{switch(t){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"right":case"bottomLeft":return`${e.spacing.s}`}}};
+  }
+  &:before {
+    border-color: ${({$position:t})=>{switch(t){case"top":case"topLeft":default:return"rgba(0, 0, 0, 0.25) transparent transparent";case"left":case"right":case"bottom":case"bottomLeft":return"transparent transparent rgba(0, 0, 0, 0.25)"}}};
+  }
+  &:after {
+    margin: ${({$position:t})=>{switch(t){case"top":case"topLeft":default:return"-1px 0 0 0";case"left":case"right":case"bottom":case"bottomLeft":return"0 0 -1px 0"}}};
+    border-color: ${({theme:t,$position:e})=>{switch(e){case"top":case"topLeft":default:return`${t.colors.popoverBackground} transparent transparent`;case"left":case"right":case"bottom":case"bottomLeft":return`transparent transparent ${t.colors.popoverBackground}`}}};
+  }
+
+  @media (min-width: ${({theme:t})=>t.breakpoint.desktop}) {
+    margin-top: ${({$position:t})=>{switch(t){case"bottom":case"bottomLeft":return"10px";default:return 0}}};
+
+    margin-left: ${({$position:t})=>"right"===t?"10px":0};
+    margin-right: ${({$position:t})=>"left"===t?"10px":0};
+
+    top: ${({$position:t})=>{switch(t){case"top":case"topLeft":default:return"auto";case"left":case"right":return 0;case"bottom":case"bottomLeft":return"100%"}}};
+
+    left: ${({$position:t})=>{switch(t){case"top":return 0;case"topLeft":case"left":case"bottom":case"bottomLeft":default:return"auto";case"right":return"100%"}}};
+    right: ${({$position:t})=>{switch(t){case"top":case"right":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return 0;case"left":return"100%"}}};
+
+    &:after,
+    &:before {
+      content: "";
+      top: ${({$position:t,theme:e})=>{switch(t){case"top":case"topLeft":default:return"100%";case"left":case"right":return`${e.spacing.xs}`;case"bottom":case"bottomLeft":return"auto"}}};
+      bottom: ${({$position:t})=>{switch(t){case"top":case"topLeft":case"left":case"right":default:return"auto";case"bottom":case"bottomLeft":return"100%"}}};
+
+      left: ${({$position:t,theme:e})=>{switch(t){case"top":case"bottom":default:return`${e.spacing.s}`;case"topLeft":case"bottomLeft":return"auto";case"left":return"100%";case"right":return"-20px"}}};
+      right: ${({$position:t,theme:e})=>{switch(t){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return`${e.spacing.s}`;case"right":return"0"}}};
+    }
+    &:before {
+      border-color: ${({$position:t})=>{switch(t){case"top":case"topLeft":default:return"rgba(0, 0, 0, 0.25) transparent transparent";case"left":return"transparent transparent transparent rgba(0, 0, 0, 0.25)";case"right":return"transparent rgba(0, 0, 0, 0.25) transparent transparent";case"bottom":case"bottomLeft":return"transparent transparent rgba(0, 0, 0, 0.25)"}}};
+    }
+    &:after {
+      margin: ${({$position:t})=>{switch(t){case"top":case"topLeft":default:return"-1px 0 0 0";case"left":return"0 0 0 -1px";case"right":return"0 0 0 1px";case"bottom":case"bottomLeft":return"0 0 -1px 0"}}};
+      border-color: ${({theme:t,$position:e})=>{switch(e){case"top":case"topLeft":default:return`${t.colors.popoverBackground} transparent transparent`;case"left":return`transparent transparent transparent ${t.colors.popoverBackground}`;case"right":return`transparent ${t.colors.popoverBackground} transparent transparent`;case"bottom":case"bottomLeft":return`transparent transparent ${t.colors.popoverBackground}`}}};
+    }
+  }
+`;export{r as PopOverModal,o as PopOverWrapper};
 //# sourceMappingURL=styles.js.map

package/lib/src/components/PopOver/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/PopOver/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType, type PopOverPositionType } from \"../../types\";\n\nexport const PopOverWrapper = styled.div<{\n  $full: boolean;\n  $css?: string;\n}>`\n  position: relative;\n  display: ${({ $full }) => ($full ? \"block\" : \"inline-block\")};\n  ${(props) =>\n    props.$css &&\n    css`\n      ${props.$css}\n    `}\n`;\n\nexport const PopOverModal = styled.div<{\n  $position: PopOverPositionType;\n  $maxWidth: string;\n  $minWidth: string;\n  theme?: ThemeType;\n}>`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  word-wrap: break-word;\n  z-index: 9999;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  min-width: ${({ $minWidth }) => $minWidth};\n  font-size: ${({\n    theme: {\n      fontSizes: { s },\n    },\n  }) => s};\n  background-color: ${({\n    theme: {\n      colors: { popoverBackground },\n    },\n  }) => popoverBackground};\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.25);\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n\n  margin-bottom: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return \"10px\";\n      case \"topLeft\":\n        return \"10px\";\n      case \"left\":\n        return 0;\n      case \"right\":\n        return 0;\n      case \"bottom\":\n        return 0;\n      case \"bottomLeft\":\n        return \"10px\";\n      default:\n        return \"10px\";\n    }\n  }};\n\n  margin-top: ${({ $position }) => {\n    switch ($position) {\n      case \"bottom\":\n        return \"10px\";\n      case \"bottomLeft\":\n        return \"10px\";\n      case \"left\":\n        return \"10px\";\n      case \"right\":\n        return \"10px\";\n      default:\n        return 0;\n    }\n  }};\n  top: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return \"auto\";\n      case \"topLeft\":\n        return \"auto\";\n      case \"left\":\n        return \"100%\";\n      case \"right\":\n        return \"100%\";\n      case \"bottom\":\n        return \"100%\";\n      case \"bottomLeft\":\n        return \"100%\";\n      default:\n        return \"auto\";\n    }\n  }};\n\n  bottom: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return \"100%\";\n      case \"topLeft\":\n        return \"100%\";\n      case \"left\":\n        return \"auto\";\n      case \"right\":\n        return \"auto\";\n      case \"bottom\":\n        return \"auto\";\n      case \"bottomLeft\":\n        return \"auto\";\n      default:\n        return \"100%\";\n    }\n  }};\n\n  left: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return 0;\n      case \"topLeft\":\n        return \"auto\";\n      case \"left\":\n        return \"auto\";\n      case \"right\":\n        return \"auto\";\n      case \"bottom\":\n        return \"auto\";\n      case \"bottomLeft\":\n        return \"auto\";\n      default:\n        return \"auto\";\n    }\n  }};\n  right: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return \"auto\";\n      case \"topLeft\":\n        return 0;\n      case \"left\":\n        return \"auto\";\n      case \"right\":\n        return \"0\";\n      case \"bottom\":\n        return \"auto\";\n      case \"bottomLeft\":\n        return 0;\n      default:\n        return \"auto\";\n    }\n  }};\n\n  &:after,\n  &:before {\n    content: \"\";\n    border-style: solid;\n    border-width: 10px;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"100%\";\n        case \"topLeft\":\n          return \"100%\";\n        case \"left\":\n          return \"auto\";\n        case \"right\":\n          return \"auto\";\n        case \"bottom\":\n          return \"auto\";\n        case \"bottomLeft\":\n          return \"auto\";\n        default:\n          return \"100%\";\n      }\n    }};\n    bottom: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"auto\";\n        case \"topLeft\":\n          return \"auto\";\n        case \"left\":\n          return \"100%\";\n        case \"right\":\n          return \"100%\";\n        case \"bottom\":\n          return \"100%\";\n        case \"bottomLeft\":\n          return \"100%\";\n        default:\n          return \"auto\";\n      }\n    }};\n\n    left: ${({ $position, theme }) => {\n      switch ($position) {\n        case \"top\":\n          return `${theme.spacing.s}`;\n        case \"topLeft\":\n          return \"auto\";\n        case \"left\":\n          return `${theme.spacing.s}`;\n        case \"right\":\n          return \"auto\";\n        case \"bottom\":\n          return `${theme.spacing.s}`;\n        case \"bottomLeft\":\n          return \"auto\";\n        default:\n          return `${theme.spacing.s}`;\n      }\n    }};\n    right: ${({ $position, theme }) => {\n      switch ($position) {\n        case \"top\":\n          return `auto`;\n        case \"topLeft\":\n          return `${theme.spacing.s}`;\n        case \"left\":\n          return \"auto\";\n        case \"right\":\n          return `${theme.spacing.s}`;\n        case \"bottom\":\n          return `auto`;\n        case \"bottomLeft\":\n          return `${theme.spacing.s}`;\n        default:\n          return `auto`;\n      }\n    }};\n  }\n  &:before {\n    border-color: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n        case \"topLeft\":\n          return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n        case \"left\":\n          return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n        case \"right\":\n          return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n        case \"bottom\":\n          return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n        case \"bottomLeft\":\n          return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n        default:\n          return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n      }\n    }};\n  }\n  &:after {\n    margin: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"-1px 0 0 0\";\n        case \"topLeft\":\n          return \"-1px 0 0 0\";\n        case \"left\":\n          return \"0 0 -1px 0\";\n        case \"right\":\n          return \"0 0 -1px 0\";\n        case \"bottom\":\n          return \"0 0 -1px 0\";\n        case \"bottomLeft\":\n          return \"0 0 -1px 0\";\n        default:\n          return \"-1px 0 0 0\";\n      }\n    }};\n    border-color: ${({ theme, $position }) => {\n      switch ($position) {\n        case \"top\":\n          return `${theme.colors.popoverBackground} transparent transparent`;\n        case \"topLeft\":\n          return `${theme.colors.popoverBackground} transparent transparent`;\n        case \"left\":\n          return `transparent transparent ${theme.colors.popoverBackground}`;\n        case \"right\":\n          return `transparent transparent ${theme.colors.popoverBackground}`;\n        case \"bottom\":\n          return `transparent transparent ${theme.colors.popoverBackground}`;\n        case \"bottomLeft\":\n          return `transparent transparent ${theme.colors.popoverBackground}`;\n        default:\n          return `${theme.colors.popoverBackground} transparent transparent`;\n      }\n    }};\n  }\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    margin-top: ${({ $position }) => {\n      switch ($position) {\n        case \"bottom\":\n          return \"10px\";\n        case \"bottomLeft\":\n          return \"10px\";\n        default:\n          return 0;\n      }\n    }};\n\n    margin-left: ${({ $position }) => {\n      switch ($position) {\n        case \"right\":\n          return \"10px\";\n        default:\n          return 0;\n      }\n    }};\n    margin-right: ${({ $position }) => {\n      switch ($position) {\n        case \"left\":\n          return \"10px\";\n        default:\n          return 0;\n      }\n    }};\n\n    top: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"auto\";\n        case \"topLeft\":\n          return \"auto\";\n        case \"left\":\n          return 0;\n        case \"right\":\n          return 0;\n        case \"bottom\":\n          return \"100%\";\n        case \"bottomLeft\":\n          return \"100%\";\n        default:\n          return \"auto\";\n      }\n    }};\n\n    left: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return 0;\n        case \"topLeft\":\n          return \"auto\";\n        case \"left\":\n          return \"auto\";\n        case \"right\":\n          return \"100%\";\n        case \"bottom\":\n          return \"auto\";\n        case \"bottomLeft\":\n          return \"auto\";\n        default:\n          return \"auto\";\n      }\n    }};\n    right: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"auto\";\n        case \"topLeft\":\n          return 0;\n        case \"left\":\n          return \"100%\";\n        case \"right\":\n          return \"auto\";\n        case \"bottom\":\n          return \"auto\";\n        case \"bottomLeft\":\n          return 0;\n        default:\n          return \"auto\";\n      }\n    }};\n\n    &:after,\n    &:before {\n      content: \"\";\n      top: ${({ $position, theme }) => {\n        switch ($position) {\n          case \"top\":\n            return \"100%\";\n          case \"topLeft\":\n            return \"100%\";\n          case \"left\":\n            return `${theme.spacing.xs}`;\n          case \"right\":\n            return `${theme.spacing.xs}`;\n          case \"bottom\":\n            return \"auto\";\n          case \"bottomLeft\":\n            return \"auto\";\n          default:\n            return \"100%\";\n        }\n      }};\n      bottom: ${({ $position }) => {\n        switch ($position) {\n          case \"top\":\n            return \"auto\";\n          case \"topLeft\":\n            return \"auto\";\n          case \"left\":\n            return \"auto\";\n          case \"right\":\n            return \"auto\";\n          case \"bottom\":\n            return \"100%\";\n          case \"bottomLeft\":\n            return \"100%\";\n          default:\n            return \"auto\";\n        }\n      }};\n\n      left: ${({ $position, theme }) => {\n        switch ($position) {\n          case \"top\":\n            return `${theme.spacing.s}`;\n          case \"topLeft\":\n            return \"auto\";\n          case \"left\":\n            return \"100%\";\n          case \"right\":\n            return \"-20px\";\n          case \"bottom\":\n            return `${theme.spacing.s}`;\n          case \"bottomLeft\":\n            return \"auto\";\n          default:\n            return `${theme.spacing.s}`;\n        }\n      }};\n      right: ${({ $position, theme }) => {\n        switch ($position) {\n          case \"top\":\n            return `auto`;\n          case \"topLeft\":\n            return `${theme.spacing.s}`;\n          case \"left\":\n            return \"auto\";\n          case \"right\":\n            return `0`;\n          case \"bottom\":\n            return `auto`;\n          case \"bottomLeft\":\n            return `${theme.spacing.s}`;\n          default:\n            return `auto`;\n        }\n      }};\n    }\n    &:before {\n      border-color: ${({ $position }) => {\n        switch ($position) {\n          case \"top\":\n            return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n          case \"topLeft\":\n            return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n          case \"left\":\n            return \"transparent transparent transparent rgba(0, 0, 0, 0.25)\";\n          case \"right\":\n            return \"transparent rgba(0, 0, 0, 0.25) transparent transparent\";\n          case \"bottom\":\n            return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n          case \"bottomLeft\":\n            return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n          default:\n            return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n        }\n      }};\n    }\n    &:after {\n      margin: ${({ $position }) => {\n        switch ($position) {\n          case \"top\":\n            return \"-1px 0 0 0\";\n          case \"topLeft\":\n            return \"-1px 0 0 0\";\n          case \"left\":\n            return \"0 0 0 -1px\";\n          case \"right\":\n            return \"0 0 0 1px\";\n          case \"bottom\":\n            return \"0 0 -1px 0\";\n          case \"bottomLeft\":\n            return \"0 0 -1px 0\";\n          default:\n            return \"-1px 0 0 0\";\n        }\n      }};\n      border-color: ${({ theme, $position }) => {\n        switch ($position) {\n          case \"top\":\n            return `${theme.colors.popoverBackground} transparent transparent`;\n          case \"topLeft\":\n            return `${theme.colors.popoverBackground} transparent transparent`;\n          case \"left\":\n            return `transparent transparent transparent ${theme.colors.popoverBackground}`;\n          case \"right\":\n            return `transparent ${theme.colors.popoverBackground} transparent transparent`;\n          case \"bottom\":\n            return `transparent transparent ${theme.colors.popoverBackground}`;\n          case \"bottomLeft\":\n            return `transparent transparent ${theme.colors.popoverBackground}`;\n          default:\n            return `${theme.colors.popoverBackground} transparent transparent`;\n        }\n      }};\n    }\n  }\n`;\n"],"names":["PopOverWrapper","styled","div","templateObject_2","__makeTemplateObject","_a","$full","props","$css","css","templateObject_1","PopOverModal","templateObject_3","$maxWidth","$minWidth","theme","fontSizes","s","colors","popoverBackground","$position","spacing","breakpoint","desktop","xs"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/PopOver/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType, type PopOverPositionType } from \"../../types\";\n\nexport const PopOverWrapper = styled.div<{\n  $full: boolean;\n  $css?: string;\n}>`\n  position: relative;\n  display: ${({ $full }) => ($full ? \"block\" : \"inline-block\")};\n  ${(props) =>\n    props.$css &&\n    css`\n      ${props.$css}\n    `}\n`;\n\nexport const PopOverModal = styled.div<{\n  $position: PopOverPositionType;\n  $maxWidth: string;\n  $minWidth: string;\n  theme?: ThemeType;\n}>`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  word-wrap: break-word;\n  z-index: 9999;\n  max-width: ${({ $maxWidth }) => $maxWidth};\n  min-width: ${({ $minWidth }) => $minWidth};\n  font-size: ${({\n    theme: {\n      fontSizes: { s },\n    },\n  }) => s};\n  background-color: ${({\n    theme: {\n      colors: { popoverBackground },\n    },\n  }) => popoverBackground};\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.25);\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n\n  margin-bottom: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return \"10px\";\n      case \"topLeft\":\n        return \"10px\";\n      case \"left\":\n        return 0;\n      case \"right\":\n        return 0;\n      case \"bottom\":\n        return 0;\n      case \"bottomLeft\":\n        return \"10px\";\n      default:\n        return \"10px\";\n    }\n  }};\n\n  margin-top: ${({ $position }) => {\n    switch ($position) {\n      case \"bottom\":\n        return \"10px\";\n      case \"bottomLeft\":\n        return \"10px\";\n      case \"left\":\n        return \"10px\";\n      case \"right\":\n        return \"10px\";\n      default:\n        return 0;\n    }\n  }};\n  top: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return \"auto\";\n      case \"topLeft\":\n        return \"auto\";\n      case \"left\":\n        return \"100%\";\n      case \"right\":\n        return \"100%\";\n      case \"bottom\":\n        return \"100%\";\n      case \"bottomLeft\":\n        return \"100%\";\n      default:\n        return \"auto\";\n    }\n  }};\n\n  bottom: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return \"100%\";\n      case \"topLeft\":\n        return \"100%\";\n      case \"left\":\n        return \"auto\";\n      case \"right\":\n        return \"auto\";\n      case \"bottom\":\n        return \"auto\";\n      case \"bottomLeft\":\n        return \"auto\";\n      default:\n        return \"100%\";\n    }\n  }};\n\n  left: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return 0;\n      case \"topLeft\":\n        return \"auto\";\n      case \"left\":\n        return \"auto\";\n      case \"right\":\n        return \"auto\";\n      case \"bottom\":\n        return \"auto\";\n      case \"bottomLeft\":\n        return \"auto\";\n      default:\n        return \"auto\";\n    }\n  }};\n  right: ${({ $position }) => {\n    switch ($position) {\n      case \"top\":\n        return \"auto\";\n      case \"topLeft\":\n        return 0;\n      case \"left\":\n        return \"auto\";\n      case \"right\":\n        return \"0\";\n      case \"bottom\":\n        return \"auto\";\n      case \"bottomLeft\":\n        return 0;\n      default:\n        return \"auto\";\n    }\n  }};\n\n  &:after,\n  &:before {\n    content: \"\";\n    border-style: solid;\n    border-width: 10px;\n    width: 0;\n    height: 0;\n    position: absolute;\n    top: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"100%\";\n        case \"topLeft\":\n          return \"100%\";\n        case \"left\":\n          return \"auto\";\n        case \"right\":\n          return \"auto\";\n        case \"bottom\":\n          return \"auto\";\n        case \"bottomLeft\":\n          return \"auto\";\n        default:\n          return \"100%\";\n      }\n    }};\n    bottom: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"auto\";\n        case \"topLeft\":\n          return \"auto\";\n        case \"left\":\n          return \"100%\";\n        case \"right\":\n          return \"100%\";\n        case \"bottom\":\n          return \"100%\";\n        case \"bottomLeft\":\n          return \"100%\";\n        default:\n          return \"auto\";\n      }\n    }};\n\n    left: ${({ $position, theme }) => {\n      switch ($position) {\n        case \"top\":\n          return `${theme.spacing.s}`;\n        case \"topLeft\":\n          return \"auto\";\n        case \"left\":\n          return `${theme.spacing.s}`;\n        case \"right\":\n          return \"auto\";\n        case \"bottom\":\n          return `${theme.spacing.s}`;\n        case \"bottomLeft\":\n          return \"auto\";\n        default:\n          return `${theme.spacing.s}`;\n      }\n    }};\n    right: ${({ $position, theme }) => {\n      switch ($position) {\n        case \"top\":\n          return `auto`;\n        case \"topLeft\":\n          return `${theme.spacing.s}`;\n        case \"left\":\n          return \"auto\";\n        case \"right\":\n          return `${theme.spacing.s}`;\n        case \"bottom\":\n          return `auto`;\n        case \"bottomLeft\":\n          return `${theme.spacing.s}`;\n        default:\n          return `auto`;\n      }\n    }};\n  }\n  &:before {\n    border-color: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n        case \"topLeft\":\n          return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n        case \"left\":\n          return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n        case \"right\":\n          return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n        case \"bottom\":\n          return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n        case \"bottomLeft\":\n          return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n        default:\n          return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n      }\n    }};\n  }\n  &:after {\n    margin: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"-1px 0 0 0\";\n        case \"topLeft\":\n          return \"-1px 0 0 0\";\n        case \"left\":\n          return \"0 0 -1px 0\";\n        case \"right\":\n          return \"0 0 -1px 0\";\n        case \"bottom\":\n          return \"0 0 -1px 0\";\n        case \"bottomLeft\":\n          return \"0 0 -1px 0\";\n        default:\n          return \"-1px 0 0 0\";\n      }\n    }};\n    border-color: ${({ theme, $position }) => {\n      switch ($position) {\n        case \"top\":\n          return `${theme.colors.popoverBackground} transparent transparent`;\n        case \"topLeft\":\n          return `${theme.colors.popoverBackground} transparent transparent`;\n        case \"left\":\n          return `transparent transparent ${theme.colors.popoverBackground}`;\n        case \"right\":\n          return `transparent transparent ${theme.colors.popoverBackground}`;\n        case \"bottom\":\n          return `transparent transparent ${theme.colors.popoverBackground}`;\n        case \"bottomLeft\":\n          return `transparent transparent ${theme.colors.popoverBackground}`;\n        default:\n          return `${theme.colors.popoverBackground} transparent transparent`;\n      }\n    }};\n  }\n\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktop}) {\n    margin-top: ${({ $position }) => {\n      switch ($position) {\n        case \"bottom\":\n          return \"10px\";\n        case \"bottomLeft\":\n          return \"10px\";\n        default:\n          return 0;\n      }\n    }};\n\n    margin-left: ${({ $position }) => {\n      switch ($position) {\n        case \"right\":\n          return \"10px\";\n        default:\n          return 0;\n      }\n    }};\n    margin-right: ${({ $position }) => {\n      switch ($position) {\n        case \"left\":\n          return \"10px\";\n        default:\n          return 0;\n      }\n    }};\n\n    top: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"auto\";\n        case \"topLeft\":\n          return \"auto\";\n        case \"left\":\n          return 0;\n        case \"right\":\n          return 0;\n        case \"bottom\":\n          return \"100%\";\n        case \"bottomLeft\":\n          return \"100%\";\n        default:\n          return \"auto\";\n      }\n    }};\n\n    left: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return 0;\n        case \"topLeft\":\n          return \"auto\";\n        case \"left\":\n          return \"auto\";\n        case \"right\":\n          return \"100%\";\n        case \"bottom\":\n          return \"auto\";\n        case \"bottomLeft\":\n          return \"auto\";\n        default:\n          return \"auto\";\n      }\n    }};\n    right: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return \"auto\";\n        case \"topLeft\":\n          return 0;\n        case \"left\":\n          return \"100%\";\n        case \"right\":\n          return \"auto\";\n        case \"bottom\":\n          return \"auto\";\n        case \"bottomLeft\":\n          return 0;\n        default:\n          return \"auto\";\n      }\n    }};\n\n    &:after,\n    &:before {\n      content: \"\";\n      top: ${({ $position, theme }) => {\n        switch ($position) {\n          case \"top\":\n            return \"100%\";\n          case \"topLeft\":\n            return \"100%\";\n          case \"left\":\n            return `${theme.spacing.xs}`;\n          case \"right\":\n            return `${theme.spacing.xs}`;\n          case \"bottom\":\n            return \"auto\";\n          case \"bottomLeft\":\n            return \"auto\";\n          default:\n            return \"100%\";\n        }\n      }};\n      bottom: ${({ $position }) => {\n        switch ($position) {\n          case \"top\":\n            return \"auto\";\n          case \"topLeft\":\n            return \"auto\";\n          case \"left\":\n            return \"auto\";\n          case \"right\":\n            return \"auto\";\n          case \"bottom\":\n            return \"100%\";\n          case \"bottomLeft\":\n            return \"100%\";\n          default:\n            return \"auto\";\n        }\n      }};\n\n      left: ${({ $position, theme }) => {\n        switch ($position) {\n          case \"top\":\n            return `${theme.spacing.s}`;\n          case \"topLeft\":\n            return \"auto\";\n          case \"left\":\n            return \"100%\";\n          case \"right\":\n            return \"-20px\";\n          case \"bottom\":\n            return `${theme.spacing.s}`;\n          case \"bottomLeft\":\n            return \"auto\";\n          default:\n            return `${theme.spacing.s}`;\n        }\n      }};\n      right: ${({ $position, theme }) => {\n        switch ($position) {\n          case \"top\":\n            return `auto`;\n          case \"topLeft\":\n            return `${theme.spacing.s}`;\n          case \"left\":\n            return \"auto\";\n          case \"right\":\n            return `0`;\n          case \"bottom\":\n            return `auto`;\n          case \"bottomLeft\":\n            return `${theme.spacing.s}`;\n          default:\n            return `auto`;\n        }\n      }};\n    }\n    &:before {\n      border-color: ${({ $position }) => {\n        switch ($position) {\n          case \"top\":\n            return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n          case \"topLeft\":\n            return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n          case \"left\":\n            return \"transparent transparent transparent rgba(0, 0, 0, 0.25)\";\n          case \"right\":\n            return \"transparent rgba(0, 0, 0, 0.25) transparent transparent\";\n          case \"bottom\":\n            return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n          case \"bottomLeft\":\n            return \"transparent transparent rgba(0, 0, 0, 0.25)\";\n          default:\n            return \"rgba(0, 0, 0, 0.25) transparent transparent\";\n        }\n      }};\n    }\n    &:after {\n      margin: ${({ $position }) => {\n        switch ($position) {\n          case \"top\":\n            return \"-1px 0 0 0\";\n          case \"topLeft\":\n            return \"-1px 0 0 0\";\n          case \"left\":\n            return \"0 0 0 -1px\";\n          case \"right\":\n            return \"0 0 0 1px\";\n          case \"bottom\":\n            return \"0 0 -1px 0\";\n          case \"bottomLeft\":\n            return \"0 0 -1px 0\";\n          default:\n            return \"-1px 0 0 0\";\n        }\n      }};\n      border-color: ${({ theme, $position }) => {\n        switch ($position) {\n          case \"top\":\n            return `${theme.colors.popoverBackground} transparent transparent`;\n          case \"topLeft\":\n            return `${theme.colors.popoverBackground} transparent transparent`;\n          case \"left\":\n            return `transparent transparent transparent ${theme.colors.popoverBackground}`;\n          case \"right\":\n            return `transparent ${theme.colors.popoverBackground} transparent transparent`;\n          case \"bottom\":\n            return `transparent transparent ${theme.colors.popoverBackground}`;\n          case \"bottomLeft\":\n            return `transparent transparent ${theme.colors.popoverBackground}`;\n          default:\n            return `${theme.colors.popoverBackground} transparent transparent`;\n        }\n      }};\n    }\n  }\n`;\n"],"names":["PopOverWrapper","styled","div","$full","props","$css","css","PopOverModal","$maxWidth","$minWidth","theme","fontSizes","s","colors","popoverBackground","$position","spacing","breakpoint","desktop","xs"],"mappings":"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"}

package/lib/{components → src/components}/ProgressBar/ProgressBar.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 import ProgressBar from ".";
 declare const _default: {
     title: string;

package/lib/src/components/ProgressBar/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as t,ThemeProvider as o}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{ProgressBarWrapper as c,CircularWrapper as n,CircleSvg as s,EmptyCircle as l,FullCircle as m,CircularValue as i,LineProgressBarWrapper as f,LineProgressBar as d,ScreenReaderOnly as p}from"./styles.js";function h(h){var y=h.percentage,$=void 0===y?0:y,E=h.isCircular,u=h.circleContents,k=h.circleSize,b=h.barColor,C=h.secondaryBarColor,g=h.secondaryPercentage,x=h.children,D=t(),N=e(e({},a),D),S=Number.isNaN($)?0:$,j=S>100?100:S,v="".concat(S,"%"),I=g&&!Number.isNaN(g)?g:0,P=I>100?100:I,W="".concat("string"==typeof u?u:""," ").concat(v,"% Complete"),z=u||v,B=58,w=2*Math.PI*B;return r.createElement(o,{theme:N},r.createElement(c,null,E?r.createElement(n,{$circleSize:k||"90px"},r.createElement(s,{viewBox:"0 0 ".concat(128," ").concat(128)},r.createElement(l,{cx:64,cy:64,r:B,strokeWidth:6}),r.createElement(m,{$isSecondary:!0,$barColor:C,cx:64,cy:64,r:B,strokeWidth:6,strokeDasharray:w,strokeDashoffset:w*(1-P/100),$strokeDashoffsetInit:w}),r.createElement(m,{$barColor:b,cx:64,cy:64,r:B,strokeWidth:6,strokeDasharray:w,strokeDashoffset:w*(1-j/100),$strokeDashoffsetInit:w})),r.createElement(i,null,z)):r.createElement(f,{$percentage:j,$secondaryPercentage:P},r.createElement(d,{$isSecondary:!0,$percentage:P,$barColor:C}),r.createElement(d,{$percentage:j,$barColor:b}),r.createElement(p,null,W)),x))}export{h as ProgressBar,h as default};
+import e from"react";import{useTheme as r,ThemeProvider as t}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{ProgressBarWrapper as a,CircularWrapper as c,CircleSvg as n,EmptyCircle as s,FullCircle as l,CircularValue as m,LineProgressBarWrapper as i,LineProgressBar as $,ScreenReaderOnly as f}from"./styles.js";function h({percentage:h=0,isCircular:p,circleContents:y,circleSize:E,barColor:d,secondaryBarColor:k,secondaryPercentage:u,children:C}){const b=r(),g={...o,...b},x=Number.isNaN(h)?0:h,D=x>100?100:x,N=`${x}%`,S=u&&!Number.isNaN(u)?u:0,I=S>100?100:S,P=`${"string"==typeof y?y:""} ${N}% Complete`,W=y||N,j=58,z=2*Math.PI*j;return e.createElement(t,{theme:g},e.createElement(a,null,p?e.createElement(c,{$circleSize:E||"90px"},e.createElement(n,{viewBox:"0 0 128 128"},e.createElement(s,{cx:64,cy:64,r:j,strokeWidth:6}),e.createElement(l,{$isSecondary:!0,$barColor:k,cx:64,cy:64,r:j,strokeWidth:6,strokeDasharray:z,strokeDashoffset:z*(1-I/100),$strokeDashoffsetInit:z}),e.createElement(l,{$barColor:d,cx:64,cy:64,r:j,strokeWidth:6,strokeDasharray:z,strokeDashoffset:z*(1-D/100),$strokeDashoffsetInit:z})),e.createElement(m,null,W)):e.createElement(i,{$percentage:D,$secondaryPercentage:I},e.createElement($,{$isSecondary:!0,$percentage:I,$barColor:k}),e.createElement($,{$percentage:D,$barColor:d}),e.createElement(f,null,P)),C))}export{h as ProgressBar,h as default};
 //# sourceMappingURL=index.js.map