@cruk/cruk-react-components 6.0.0 → 6.0.2

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

@@ -1,2 +1,2 @@
-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};
+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};
 //# 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","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"}
+{"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","undefined","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,OAAcC,IAAAF,EAAA,OAAMA,EACpBG,EAAQT,EAAAS,SACRC,EAAEV,EAAAU,GAEIC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAeX,EAAU,EAAIA,EAAU,EACvCY,EAAaC,KAAKC,KAAKjB,EAAQc,IAAiB,EAEhDI,EAAY,SAACC,GAAmB,MAAC,CACrCC,KAAM,GAAAC,OAAqB,oBAAXC,OAAyBA,OAAOC,SAASC,SAAW,GAClE,KAAAH,OAAAhB,EAAc,GAAGgB,OAAAhB,EAAe,KAAAgB,OAAAF,GAAW,IAE7CM,QAAS,SAACC,GACRA,EAAEC,iBACFzB,EAAciB,EACf,EACD,EAiDF,OACES,EAAAC,cAACC,EAAa,CAACnB,MAAOA,GACnBX,EAAQG,GACPyB,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,IAAZrC,GACE,IAAZA,GAAiB,CAAEsC,UAAY,GACnB,IAAZtC,GAAiBmB,EAAUnB,EAAU,cACnB,IAAZA,IAAa,SA3DlB,SAACuC,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,EACJrC,EAAWuC,EAAKK,MAAM,EAAG,GAAKL,EAAKK,MAAM,EAAG,GAAGxB,OAAOyB,GAG5DR,EAASC,EAAQ,EACbK,EAAMvB,OAAOmB,EAAKK,OAAM,IACxB5C,EACE2C,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAC7CM,EAAMvB,OAAOmB,EAAKK,MAAMP,EAAS,EAAGA,EAAS,IAAIjB,OAAOyB,IAG7DL,CACR,CAmBUQ,CAAYlD,EAASgB,GACtBa,EAAAC,cAACI,EAAS,CAACC,IAAI,QACbN,EAACC,cAAAM,EACWvB,EAAA,CAAA,WAAAJ,EAAK,GAAGa,OAAAb,EAAS,SAAG,KAC9B4B,KAAK,OACU,gBAAArC,IAAYgB,GACtBhB,IAAYgB,GAAc,CAAEsB,UAAU,GACtCtC,IAAYgB,GAAcG,EAAUnB,EAAU,GACxC,CAAAmD,UAAAnD,IAAYgB,IAGb,UAGfR,GAKX"}

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

@@ -1,93 +1,2 @@
-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};
+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};
 //# 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","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;;"}
+{"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"}

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

@@ -1,2 +1,2 @@
-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};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t,{useRef as n,useState as o,useEffect as r}from"react";import{useTheme as i,ThemeProvider as m}from"styled-components";import{useKey as a}from"../../hooks/useKey.js";import{crukTheme as l}from"../../themes/cruk.js";import{useEffectBrowser as s}from"../../hooks/useEffectBrowser.js";import{PopOverWrapper as c,PopOverModal as u}from"./styles.js";function d(d){var f=d.onPopOverIsOpenChange,p=d.children,h=d.minWidth,E=d.maxWidth,k=d.position,v=d.modalLabel,j=d.modalContent,$=d.css,b=d.full,g=void 0!==b&&b,x=n(null),y=o(!1),C=y[0],W=y[1],L=i(),K=e(e({},l),L),O=function(){return W(!C)},w=function(){return W(!1)},B=function(e){x.current&&!x.current.contains(e.target)&&w()};return a((function(){w()}),{detectKeys:["Escape"]},[]),r((function(){f&&f(C)}),[C,f]),s((function(){return document.addEventListener("click",B,!0),function(){document.removeEventListener("click",B,!0)}}),[]),t.createElement(m,{theme:K},t.createElement(c,{$full:g,$css:$,ref:x},t.Children.map(p,(function(e){return t.cloneElement(e,{onClick:O,"aria-expanded":C,"aria-haspopup":"dialog"})})),C?t.createElement(u,{$maxWidth:E||"none",$minWidth:h||"auto",$position:k||"top",theme:K,role:"dialog","aria-label":v,"aria-modal":C},j):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  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"}
+{"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","_a","onPopOverIsOpenChange","children","minWidth","maxWidth","position","modalLabel","modalContent","css","_b","full","undefined","popRef","useRef","_c","useState","showPopOver","setShowPopOver","foundTheme","useTheme","theme","__assign","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":"qaAuCM,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,OAAOC,IAAAF,GAAKA,EAENG,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,EAAsB,SAACC,GACrBd,EAAOe,UAAYf,EAAOe,QAAQC,SAASF,EAAEG,SACjDL,GAEH,EAyBD,OAvBAM,GACE,WACEN,GACF,GACA,CACEO,WAAY,CAAC,WAEf,IAGFC,GAAU,WACJ/B,GACFA,EAAsBe,EAE1B,GAAG,CAACA,EAAaf,IAEjBgC,GAAiB,WAEf,OADAC,SAASC,iBAAiB,QAASV,GAAqB,GACjD,WACLS,SAASE,oBAAoB,QAASX,GAAqB,EAC5D,CACF,GAAE,IAGDY,EAACC,cAAAC,EAAc,CAAAnB,MAAOA,GACpBiB,EAACC,cAAAE,SAAsB9B,EAAI+B,KAAQjC,EAAKkC,IAAK9B,GAC1CyB,EAAMM,SAASC,IAAI1C,GAAU,SAAC2C,GAC7B,OAAAR,EAAMS,aACJD,EACA,CACEE,QAASxB,EACT,gBAAiBP,EACjB,gBAAiB,UALrB,IASDA,EACCqB,EAACC,cAAAU,aACY5C,GAAY,OAAM6C,UAClB9C,GAAY,iBACZE,GAAY,MACvBe,MAAOA,EACP8B,KAAK,SACO,aAAA5C,eACAU,GAEXT,GAED,MAIZ"}

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

@@ -1,82 +1,2 @@
-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};
+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};
 //# 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","$full","props","$css","css","PopOverModal","$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","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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"}

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

@@ -1,2 +1,2 @@
-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};
+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};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  ProgressBarWrapper,\n  CircularWrapper,\n  CircleSvg,\n  EmptyCircle,\n  FullCircle,\n  CircularValue,\n  LineProgressBarWrapper,\n  LineProgressBar,\n  ScreenReaderOnly,\n} from \"./styles\";\n\nconst DEFAULT_CIRCLE_SIZE = \"90px\";\n\nexport type ProgressBarProps = {\n  /** percentage value of the progressbar */\n  percentage: number;\n  /** percentage value of a secondary (highter) amount of the progressbar */\n  secondaryPercentage?: number;\n  /** flag which converts line bar to donut chart */\n  isCircular?: boolean;\n  /** contents inside the donut chart */\n  circleContents?: ReactNode;\n  /** diameter of the donut chart */\n  circleSize?: string;\n  /** foreground colour of chart bar */\n  barColor?: string;\n  /** foreground colour of chart secondary bar */\n  secondaryBarColor?: string;\n  children?: ReactNode;\n};\n\n/**\n * Provide up-to-date feedback on the progress of a workflow or action with\nsimple yet flexible progress bars.\n*/\nexport function ProgressBar({\n  percentage = 0,\n  isCircular,\n  circleContents,\n  circleSize,\n  barColor,\n  secondaryBarColor,\n  secondaryPercentage,\n  children,\n}: ProgressBarProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const percentageNumber = !Number.isNaN(percentage) ? percentage : 0;\n  const percentageLimited = percentageNumber > 100 ? 100 : percentageNumber;\n  const percentString = `${percentageNumber}%`;\n\n  const secondaryPercentageNumber =\n    secondaryPercentage && !Number.isNaN(secondaryPercentage)\n      ? secondaryPercentage\n      : 0;\n\n  const secondaryPercentageLimited =\n    secondaryPercentageNumber > 100 ? 100 : secondaryPercentageNumber;\n\n  const descriptivePercentageString = `${\n    typeof circleContents === \"string\" ? circleContents : \"\"\n  } ${percentString}% Complete`;\n  const textOrPercentString = circleContents || percentString;\n\n  const strokeWidth = 6;\n  const d = 128;\n  const r = d / 2 - strokeWidth;\n  const c = 2 * Math.PI * r;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <ProgressBarWrapper>\n        {isCircular ? (\n          <CircularWrapper $circleSize={circleSize || DEFAULT_CIRCLE_SIZE}>\n            <CircleSvg viewBox={`0 0 ${d} ${d}`}>\n              <EmptyCircle\n                cx={r + strokeWidth}\n                cy={r + strokeWidth}\n                r={r}\n                strokeWidth={strokeWidth}\n              />\n              <FullCircle\n                $isSecondary\n                $barColor={secondaryBarColor}\n                cx={r + strokeWidth}\n                cy={r + strokeWidth}\n                r={r}\n                strokeWidth={strokeWidth}\n                strokeDasharray={c}\n                strokeDashoffset={c * (1 - secondaryPercentageLimited / 100)}\n                $strokeDashoffsetInit={c}\n              />\n\n              <FullCircle\n                $barColor={barColor}\n                cx={r + strokeWidth}\n                cy={r + strokeWidth}\n                r={r}\n                strokeWidth={strokeWidth}\n                strokeDasharray={c}\n                strokeDashoffset={c * (1 - percentageLimited / 100)}\n                $strokeDashoffsetInit={c}\n              />\n            </CircleSvg>\n            <CircularValue>{textOrPercentString}</CircularValue>\n          </CircularWrapper>\n        ) : (\n          <LineProgressBarWrapper\n            $percentage={percentageLimited}\n            $secondaryPercentage={secondaryPercentageLimited}\n          >\n            <LineProgressBar\n              $isSecondary\n              $percentage={secondaryPercentageLimited}\n              $barColor={secondaryBarColor}\n            />\n\n            <LineProgressBar\n              $percentage={percentageLimited}\n              $barColor={barColor}\n            />\n            <ScreenReaderOnly>{descriptivePercentageString}</ScreenReaderOnly>\n          </LineProgressBarWrapper>\n        )}\n        {children}\n      </ProgressBarWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default ProgressBar;\n"],"names":["ProgressBar","percentage","isCircular","circleContents","circleSize","barColor","secondaryBarColor","secondaryPercentage","children","foundTheme","useTheme","theme","defaultTheme","percentageNumber","Number","isNaN","percentageLimited","percentString","secondaryPercentageNumber","secondaryPercentageLimited","descriptivePercentageString","textOrPercentString","r","d","c","Math","PI","React","createElement","ThemeProvider","ProgressBarWrapper","CircularWrapper","$circleSize","CircleSvg","viewBox","EmptyCircle","cx","cy","strokeWidth","FullCircle","$isSecondary","$barColor","strokeDasharray","strokeDashoffset","$strokeDashoffsetInit","CircularValue","LineProgressBarWrapper","$percentage","LineProgressBar","ScreenReaderOnly"],"mappings":"sVAyCM,SAAUA,GAAYC,WAC1BA,EAAa,EAACC,WACdA,EAAUC,eACVA,EAAcC,WACdA,EAAUC,SACVA,EAAQC,kBACRA,EAAiBC,oBACjBA,EAAmBC,SACnBA,IAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EAAoBC,OAAOC,MAAMd,GAA2B,EAAbA,EAC/Ce,EAAoBH,EAAmB,IAAM,IAAMA,EACnDI,EAAgB,GAAGJ,KAEnBK,EACJX,IAAwBO,OAAOC,MAAMR,GACjCA,EACA,EAEAY,EACJD,EAA4B,IAAM,IAAMA,EAEpCE,EAA8B,GACR,iBAAnBjB,EAA8BA,EAAiB,MACpDc,cACEI,EAAsBlB,GAAkBc,EAIxCK,EAAIC,GACJC,EAAI,EAAIC,KAAKC,GAAKJ,EAExB,OACEK,EAACC,cAAAC,EAAc,CAAAlB,MAAOA,GACpBgB,EAAAC,cAACE,EAAkB,KAChB5B,EACCyB,gBAACI,EAAe,CAAAC,YAAc5B,GAjEZ,QAkEhBuB,EAACC,cAAAK,GAAUC,QAAS,eAClBP,EAACC,cAAAO,GACCC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAfM,IAiBRX,EAAAC,cAACW,EAEY,CAAAC,cAAA,EAAAC,UAAAnC,EACX8B,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAvBM,EAwBNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIL,EAA6B,KAAIyB,sBACrCpB,IAGzBG,EAAAC,cAACW,EACY,CAAAE,UAAApC,EACX+B,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAlCM,EAmCNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIR,EAAoB,KACxB4B,sBAAApB,KAG3BG,EAAAC,cAACiB,EAAa,KAAExB,IAGlBM,EAACC,cAAAkB,EACc,CAAAC,YAAA/B,uBACSG,GAEtBQ,EAAAC,cAACoB,EAAe,CAAAR,cAAA,EAAAO,YAED5B,EAA0BsB,UAC5BnC,IAGbqB,EAAAC,cAACoB,EAAe,CAAAD,YACD/B,EAAiByB,UACnBpC,IAEbsB,EAAAC,cAACqB,EAAgB,KAAE7B,IAGtBZ,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n  ProgressBarWrapper,\n  CircularWrapper,\n  CircleSvg,\n  EmptyCircle,\n  FullCircle,\n  CircularValue,\n  LineProgressBarWrapper,\n  LineProgressBar,\n  ScreenReaderOnly,\n} from \"./styles\";\n\nconst DEFAULT_CIRCLE_SIZE = \"90px\";\n\nexport type ProgressBarProps = {\n  /** percentage value of the progressbar */\n  percentage: number;\n  /** percentage value of a secondary (highter) amount of the progressbar */\n  secondaryPercentage?: number;\n  /** flag which converts line bar to donut chart */\n  isCircular?: boolean;\n  /** contents inside the donut chart */\n  circleContents?: ReactNode;\n  /** diameter of the donut chart */\n  circleSize?: string;\n  /** foreground colour of chart bar */\n  barColor?: string;\n  /** foreground colour of chart secondary bar */\n  secondaryBarColor?: string;\n  children?: ReactNode;\n};\n\n/**\n * Provide up-to-date feedback on the progress of a workflow or action with\nsimple yet flexible progress bars.\n*/\nexport function ProgressBar({\n  percentage = 0,\n  isCircular,\n  circleContents,\n  circleSize,\n  barColor,\n  secondaryBarColor,\n  secondaryPercentage,\n  children,\n}: ProgressBarProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const percentageNumber = !Number.isNaN(percentage) ? percentage : 0;\n  const percentageLimited = percentageNumber > 100 ? 100 : percentageNumber;\n  const percentString = `${percentageNumber}%`;\n\n  const secondaryPercentageNumber =\n    secondaryPercentage && !Number.isNaN(secondaryPercentage)\n      ? secondaryPercentage\n      : 0;\n\n  const secondaryPercentageLimited =\n    secondaryPercentageNumber > 100 ? 100 : secondaryPercentageNumber;\n\n  const descriptivePercentageString = `${\n    typeof circleContents === \"string\" ? circleContents : \"\"\n  } ${percentString}% Complete`;\n  const textOrPercentString = circleContents || percentString;\n\n  const strokeWidth = 6;\n  const d = 128;\n  const r = d / 2 - strokeWidth;\n  const c = 2 * Math.PI * r;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <ProgressBarWrapper>\n        {isCircular ? (\n          <CircularWrapper $circleSize={circleSize || DEFAULT_CIRCLE_SIZE}>\n            <CircleSvg viewBox={`0 0 ${d} ${d}`}>\n              <EmptyCircle\n                cx={r + strokeWidth}\n                cy={r + strokeWidth}\n                r={r}\n                strokeWidth={strokeWidth}\n              />\n              <FullCircle\n                $isSecondary\n                $barColor={secondaryBarColor}\n                cx={r + strokeWidth}\n                cy={r + strokeWidth}\n                r={r}\n                strokeWidth={strokeWidth}\n                strokeDasharray={c}\n                strokeDashoffset={c * (1 - secondaryPercentageLimited / 100)}\n                $strokeDashoffsetInit={c}\n              />\n\n              <FullCircle\n                $barColor={barColor}\n                cx={r + strokeWidth}\n                cy={r + strokeWidth}\n                r={r}\n                strokeWidth={strokeWidth}\n                strokeDasharray={c}\n                strokeDashoffset={c * (1 - percentageLimited / 100)}\n                $strokeDashoffsetInit={c}\n              />\n            </CircleSvg>\n            <CircularValue>{textOrPercentString}</CircularValue>\n          </CircularWrapper>\n        ) : (\n          <LineProgressBarWrapper\n            $percentage={percentageLimited}\n            $secondaryPercentage={secondaryPercentageLimited}\n          >\n            <LineProgressBar\n              $isSecondary\n              $percentage={secondaryPercentageLimited}\n              $barColor={secondaryBarColor}\n            />\n\n            <LineProgressBar\n              $percentage={percentageLimited}\n              $barColor={barColor}\n            />\n            <ScreenReaderOnly>{descriptivePercentageString}</ScreenReaderOnly>\n          </LineProgressBarWrapper>\n        )}\n        {children}\n      </ProgressBarWrapper>\n    </ThemeProvider>\n  );\n}\n\nexport default ProgressBar;\n"],"names":["ProgressBar","_a","_b","percentage","undefined","isCircular","circleContents","circleSize","barColor","secondaryBarColor","secondaryPercentage","children","foundTheme","useTheme","theme","__assign","defaultTheme","percentageNumber","Number","isNaN","percentageLimited","percentString","concat","secondaryPercentageNumber","secondaryPercentageLimited","descriptivePercentageString","textOrPercentString","r","d","c","Math","PI","React","createElement","ThemeProvider","ProgressBarWrapper","CircularWrapper","$circleSize","CircleSvg","viewBox","EmptyCircle","cx","cy","strokeWidth","FullCircle","$isSecondary","$barColor","strokeDasharray","strokeDashoffset","$strokeDashoffsetInit","CircularValue","LineProgressBarWrapper","$percentage","LineProgressBar","ScreenReaderOnly"],"mappings":"0ZAyCM,SAAUA,EAAYC,OAC1BC,EAAcD,EAAAE,WAAdA,OAAUC,IAAAF,EAAG,EAACA,EACdG,EAAUJ,EAAAI,WACVC,EAAcL,EAAAK,eACdC,EAAUN,EAAAM,WACVC,EAAQP,EAAAO,SACRC,EAAiBR,EAAAQ,kBACjBC,EAAmBT,EAAAS,oBACnBC,EAAQV,EAAAU,SAEFC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAoBC,OAAOC,MAAMhB,GAA2B,EAAbA,EAC/CiB,EAAoBH,EAAmB,IAAM,IAAMA,EACnDI,EAAgB,GAAGC,OAAAL,OAEnBM,EACJb,IAAwBQ,OAAOC,MAAMT,GACjCA,EACA,EAEAc,EACJD,EAA4B,IAAM,IAAMA,EAEpCE,EAA8B,GAAAH,OACR,iBAAnBhB,EAA8BA,EAAiB,GACpD,KAAAgB,OAAAD,gBACEK,EAAsBpB,GAAkBe,EAIxCM,EAAIC,GACJC,EAAI,EAAIC,KAAKC,GAAKJ,EAExB,OACEK,EAACC,cAAAC,EAAc,CAAApB,MAAOA,GACpBkB,EAAAC,cAACE,EAAkB,KAChB9B,EACC2B,gBAACI,EAAe,CAAAC,YAAc9B,GAjEZ,QAkEhByB,EAACC,cAAAK,GAAUC,QAAS,cATpB,IAS4B,KAAAjB,OAT5B,MAUEU,EAACC,cAAAO,GACCC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAfM,IAiBRX,EAAAC,cAACW,EAEY,CAAAC,cAAA,EAAAC,UAAArC,EACXgC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAvBM,EAwBNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIL,EAA6B,KAAIyB,sBACrCpB,IAGzBG,EAAAC,cAACW,EACY,CAAAE,UAAAtC,EACXiC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAlCM,EAmCNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIT,EAAoB,KACxB6B,sBAAApB,KAG3BG,EAAAC,cAACiB,EAAa,KAAExB,IAGlBM,EAACC,cAAAkB,EACc,CAAAC,YAAAhC,uBACSI,GAEtBQ,EAAAC,cAACoB,EAAe,CAAAR,cAAA,EAAAO,YAED5B,EAA0BsB,UAC5BrC,IAGbuB,EAAAC,cAACoB,EAAe,CAAAD,YACDhC,EAAiB0B,UACnBtC,IAEbwB,EAAAC,cAACqB,EAAgB,KAAE7B,IAGtBd,GAIT"}