@cruk/cruk-react-components 5.0.7 → 5.0.8

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

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

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

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

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

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

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

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

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","_a","_b","percentage","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,OAAU,IAAAD,EAAG,EAACA,EACdE,EAAUH,EAAAG,WACVC,EAAcJ,EAAAI,eACdC,EAAUL,EAAAK,WACVC,EAAQN,EAAAM,SACRC,EAAiBP,EAAAO,kBACjBC,EAAmBR,EAAAQ,oBACnBC,EAAQT,EAAAS,SAEFC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAoBC,OAAOC,MAAMf,GAA2B,EAAbA,EAC/CgB,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"}
+{"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"}

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

@@ -1,2 +1,133 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{css as o,keyframes as e}from"styled-components";var r,i,s,a,h,c,d,f,l,p,u,g,b,x,m,k="16px",w=function(){return e(s||(s=n(["\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n"],["\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n"])))},y=function(){return e(a||(a=n(["\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n"],["\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n"])))},v=t.div(h||(h=n(["\n  margin-top: ",";\n"],["\n  margin-top: ",";\n"])),k),$=t.div(d||(d=n(["\n  position: relative;\n  height: ",";\n  margin-bottom: 0;\n  background-color: ",";\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ","\n"],["\n  position: relative;\n  height: ",";\n  margin-bottom: 0;\n  background-color: ",";\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ","\n"])),k,(function(n){return n.theme.colors.progressBarBackground}),(function(t){var e=t.$percentage,r=t.$secondaryPercentage;return(100===e||100===r)&&o(c||(c=n(["\n      animation: "," 0.3s 0.5s 1 ease-out;\n    "],["\n      animation: "," 0.3s 0.5s 1 ease-out;\n    "])),y)})),D=t.div(l||(l=n(["\n  position: absolute;\n  left: 0;\n  height: ",";\n  background-color: ",";\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ",'%;\n\n  &::before {\n    content: "";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ',";\n\n    ","\n  }\n"],["\n  position: absolute;\n  left: 0;\n  height: ",";\n  background-color: ",";\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ",'%;\n\n  &::before {\n    content: "";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ',";\n\n    ","\n  }\n"])),k,(function(n){var t=n.$barColor,o=n.$isSecondary,e=n.theme;return t||o?e.colors.progressBarSecondary:e.colors.progressBar}),(function(n){return n.$percentage}),(function(n){var t=n.$barColor,o=n.$isSecondary,e=n.theme.colors,r=e.progressBar,i=e.progressBarSecondary;return t||o?i:r}),(function(t){return 100===t.$percentage&&o(f||(f=n(["\n        animation: "," 0.33s 0.75s 3 ease-in;\n      "],["\n        animation: "," 0.33s 0.75s 3 ease-in;\n      "])),w)})),S=t.span(p||(p=n(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"],["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"]))),z=t.div(u||(u=n(["\n  position: relative;\n  width: ",";\n  height: ",";\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n"],["\n  position: relative;\n  width: ",";\n  height: ",";\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n"])),(function(n){return n.$circleSize}),(function(n){return n.$circleSize})),B=t.svg(g||(g=n(["\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n"],["\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n"]))),I=t.circle(b||(b=n(["\n  stroke: ",";\n"],["\n  stroke: ",";\n"])),(function(n){return n.theme.tokenColors.grey_200})),C=t.circle(x||(x=n(["\n  stroke: ",";\n  animation: ","\n    1s linear;\n"],["\n  stroke: ",";\n  animation: ","\n    1s linear;\n"])),(function(n){var t=n.$isSecondary,o=n.$barColor,e=n.theme.colors,r=e.circularProgress,i=e.circularProgressSecondary;return o||t?i:r}),(function(t){var o=t.$isSecondary,s=t.strokeDashoffset,a=t.$strokeDashoffsetInit;return o?function(t){var o=t.$strokeDashoffsetInit,r=t.strokeDashoffset;return e(i||(i=n(["\n  0% {\n     stroke-dashoffset: "," ;\n  }\n  100% {\n     stroke-dashoffset: "," ;\n  }\n"],["\n  0% {\n     stroke-dashoffset: "," ;\n  }\n  100% {\n     stroke-dashoffset: "," ;\n  }\n"])),o,r)}({strokeDashoffset:s,$strokeDashoffsetInit:a}):function(t){var o=t.$strokeDashoffsetInit,i=t.strokeDashoffset;return e(r||(r=n(["\n  0% {\n     stroke-dashoffset: "," ;\n  }\n  50% {\n     stroke-dashoffset: "," ;\n  }\n  100% {\n     stroke-dashoffset: "," ;\n  }\n"],["\n  0% {\n     stroke-dashoffset: "," ;\n  }\n  50% {\n     stroke-dashoffset: "," ;\n  }\n  100% {\n     stroke-dashoffset: "," ;\n  }\n"])),o,i,i)}({strokeDashoffset:s,$strokeDashoffsetInit:a})})),j=t.div(m||(m=n(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ",";\n  line-height: ",";\n  text-align: center;\n  height: 100%;\n  color: ",";\n"],["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ",";\n  line-height: ",";\n  text-align: center;\n  height: 100%;\n  color: ",";\n"])),(function(n){return n.theme.fontSizes.l}),(function(n){return n.theme.fontSizes.l}),(function(n){return n.theme.colors.textDark}));export{B as CircleSvg,j as CircularValue,z as CircularWrapper,I as EmptyCircle,C as FullCircle,D as LineProgressBar,$ as LineProgressBarWrapper,v as ProgressBarWrapper,S as ScreenReaderOnly};
+import e,{css as o,keyframes as t}from"styled-components";const r="16px",s=()=>t`
+    0% {
+    width: 0px;
+    height: 0px;
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    width: 64px;
+    height: 64px;
+    right: -32px;
+  }
+`,i=()=>t`
+  0% {
+    transform: scale(1);
+    border-radius: 0px;
+
+  }
+  50% {
+    transform:scale(1.025);
+  }
+  100% {
+    transform: scale(1);
+     border-radius: 0px;
+  }
+`,a=e.div`
+  margin-top: ${r};
+`,n=e.div`
+  position: relative;
+  height: ${r};
+  margin-bottom: 0;
+  background-color: ${({theme:{colors:{progressBarBackground:e}}})=>e};
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+
+  ${({$percentage:e,$secondaryPercentage:t})=>(100===e||100===t)&&o`
+      animation: ${i} 0.3s 0.5s 1 ease-out;
+    `}
+`,h=e.div`
+  position: absolute;
+  left: 0;
+  height: ${r};
+  background-color: ${({$barColor:e,$isSecondary:o,theme:t})=>e||o?t.colors.progressBarSecondary:t.colors.progressBar};
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  transition: width 0.6s ease;
+  width: ${({$percentage:e})=>e}%;
+
+  &::before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 0px;
+    height: 0px;
+    border-radius: 50%;
+    opacity: 0;
+    filter: blur(2px);
+    background-color: ${({$barColor:e,$isSecondary:o,theme:{colors:{progressBar:t,progressBarSecondary:r}}})=>e||o?r:t};
+
+    ${({$percentage:e})=>100===e&&o`
+        animation: ${s} 0.33s 0.75s 3 ease-in;
+      `}
+  }
+`,c=e.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+`,d=e.div`
+  position: relative;
+  width: ${({$circleSize:e})=>e};
+  height: ${({$circleSize:e})=>e};
+  background: none;
+  margin: 0 auto;
+  box-shadow: none;
+`,l=e.svg`
+  position: absolute;
+  transform: rotate(-90deg);
+  fill: none;
+  stroke-linecap: round;
+  width: 100%;
+  height: 100%;
+`,p=e.circle`
+  stroke: ${({theme:e})=>e.tokenColors.grey_200};
+`,f=e.circle`
+  stroke: ${({$isSecondary:e,$barColor:o,theme:{colors:{circularProgress:t,circularProgressSecondary:r}}})=>o||e?r:t};
+  animation: ${({$isSecondary:e,strokeDashoffset:o,$strokeDashoffsetInit:r})=>e?(({$strokeDashoffsetInit:e,strokeDashoffset:o})=>t`
+  0% {
+     stroke-dashoffset: ${e} ;
+  }
+  100% {
+     stroke-dashoffset: ${o} ;
+  }
+`)({strokeDashoffset:o,$strokeDashoffsetInit:r}):(({$strokeDashoffsetInit:e,strokeDashoffset:o})=>t`
+  0% {
+     stroke-dashoffset: ${e} ;
+  }
+  50% {
+     stroke-dashoffset: ${o} ;
+  }
+  100% {
+     stroke-dashoffset: ${o} ;
+  }
+`)({strokeDashoffset:o,$strokeDashoffsetInit:r})}
+    1s linear;
+`,g=e.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  z-index: 2;
+  font-size: ${({theme:{fontSizes:{l:e}}})=>e};
+  line-height: ${({theme:{fontSizes:{l:e}}})=>e};
+  text-align: center;
+  height: 100%;
+  color: ${({theme:{colors:{textDark:e}}})=>e};
+`;export{l as CircleSvg,g as CircularValue,d as CircularWrapper,p as EmptyCircle,f as FullCircle,h as LineProgressBar,n as LineProgressBarWrapper,a as ProgressBarWrapper,c as ScreenReaderOnly};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/ProgressBar/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst BAR_HEIGHT = \"16px\";\n\ntype CircleKeyCircleFillKeyFramesProps = {\n  $strokeDashoffsetInit: number;\n  strokeDashoffset: number;\n};\n\nconst CircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  50% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst SecondaryCircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst TargetBarPulseKeyFrames = () => keyframes`\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n`;\n\nconst LineBarPulseKeyFrames = () => keyframes`\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n`;\n\nexport const ProgressBarWrapper = styled.div`\n  margin-top: ${BAR_HEIGHT};\n`;\n\nexport const LineProgressBarWrapper = styled.div<{\n  $percentage: number;\n  $secondaryPercentage: number;\n  theme: ThemeType;\n}>`\n  position: relative;\n  height: ${BAR_HEIGHT};\n  margin-bottom: 0;\n  background-color: ${({\n    theme: {\n      colors: { progressBarBackground },\n    },\n  }) => progressBarBackground};\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ${({ $percentage, $secondaryPercentage }) =>\n    ($percentage === 100 || $secondaryPercentage === 100) &&\n    css`\n      animation: ${LineBarPulseKeyFrames} 0.3s 0.5s 1 ease-out;\n    `}\n`;\n\nexport const LineProgressBar = styled.div<{\n  $percentage: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n  theme: ThemeType;\n}>`\n  position: absolute;\n  left: 0;\n  height: ${BAR_HEIGHT};\n  background-color: ${({ $barColor, $isSecondary, theme }) =>\n    !!$barColor || !!$isSecondary\n      ? theme.colors.progressBarSecondary\n      : theme.colors.progressBar};\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ${({ $percentage }) => $percentage}%;\n\n  &::before {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ${({\n      $barColor,\n      $isSecondary,\n      theme: {\n        colors: { progressBar, progressBarSecondary },\n      },\n    }) => ($barColor || $isSecondary ? progressBarSecondary : progressBar)};\n\n    ${({ $percentage }) =>\n      $percentage === 100 &&\n      css`\n        animation: ${TargetBarPulseKeyFrames} 0.33s 0.75s 3 ease-in;\n      `}\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n`;\n\nexport const CircularWrapper = styled.div<{\n  $circleSize: string;\n  theme: ThemeType;\n}>`\n  position: relative;\n  width: ${({ $circleSize }) => $circleSize};\n  height: ${({ $circleSize }) => $circleSize};\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n`;\n\nexport const CircleSvg = styled.svg`\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const EmptyCircle = styled.circle<{\n  theme: ThemeType;\n}>`\n  stroke: ${({ theme }) => theme.tokenColors.grey_200};\n`;\n\nexport const FullCircle = styled.circle<{\n  strokeDashoffset: number;\n  theme: ThemeType;\n  $strokeDashoffsetInit: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n}>`\n  stroke: ${({\n    $isSecondary,\n    $barColor,\n    theme: {\n      colors: { circularProgress, circularProgressSecondary },\n    },\n  }) =>\n    $barColor || $isSecondary ? circularProgressSecondary : circularProgress};\n  animation: ${({ $isSecondary, strokeDashoffset, $strokeDashoffsetInit }) =>\n      $isSecondary\n        ? SecondaryCircleFillKeyFrames({\n            strokeDashoffset,\n            $strokeDashoffsetInit,\n          })\n        : CircleFillKeyFrames({ strokeDashoffset, $strokeDashoffsetInit })}\n    1s linear;\n`;\n\nexport const CircularValue = styled.div<{\n  theme: ThemeType;\n}>`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  line-height: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  text-align: center;\n  height: 100%;\n  color: ${({\n    theme: {\n      colors: { textDark },\n    },\n  }) => textDark};\n`;\n"],"names":["BAR_HEIGHT","TargetBarPulseKeyFrames","keyframes","templateObject_3","__makeTemplateObject","LineBarPulseKeyFrames","templateObject_4","ProgressBarWrapper","styled","div","templateObject_5","LineProgressBarWrapper","templateObject_7","_a","theme","colors","progressBarBackground","$percentage","$secondaryPercentage","css","templateObject_6","LineProgressBar","templateObject_9","$barColor","$isSecondary","progressBarSecondary","progressBar","_b","templateObject_8","ScreenReaderOnly","span","templateObject_10","CircularWrapper","templateObject_11","$circleSize","CircleSvg","svg","templateObject_12","EmptyCircle","circle","templateObject_13","tokenColors","grey_200","FullCircle","templateObject_14","circularProgress","circularProgressSecondary","strokeDashoffset","$strokeDashoffsetInit","templateObject_2","SecondaryCircleFillKeyFrames","templateObject_1","CircleFillKeyFrames","CircularValue","templateObject_15","fontSizes","l","textDark"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/ProgressBar/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst BAR_HEIGHT = \"16px\";\n\ntype CircleKeyCircleFillKeyFramesProps = {\n  $strokeDashoffsetInit: number;\n  strokeDashoffset: number;\n};\n\nconst CircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  50% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst SecondaryCircleFillKeyFrames = ({\n  $strokeDashoffsetInit,\n  strokeDashoffset,\n}: CircleKeyCircleFillKeyFramesProps) => keyframes`\n  0% {\n     stroke-dashoffset: ${$strokeDashoffsetInit} ;\n  }\n  100% {\n     stroke-dashoffset: ${strokeDashoffset} ;\n  }\n`;\n\nconst TargetBarPulseKeyFrames = () => keyframes`\n    0% {\n    width: 0px;\n    height: 0px;\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 64px;\n    height: 64px;\n    right: -32px;\n  }\n`;\n\nconst LineBarPulseKeyFrames = () => keyframes`\n  0% {\n    transform: scale(1);\n    border-radius: 0px;\n\n  }\n  50% {\n    transform:scale(1.025);\n  }\n  100% {\n    transform: scale(1);\n     border-radius: 0px;\n  }\n`;\n\nexport const ProgressBarWrapper = styled.div`\n  margin-top: ${BAR_HEIGHT};\n`;\n\nexport const LineProgressBarWrapper = styled.div<{\n  $percentage: number;\n  $secondaryPercentage: number;\n  theme: ThemeType;\n}>`\n  position: relative;\n  height: ${BAR_HEIGHT};\n  margin-bottom: 0;\n  background-color: ${({\n    theme: {\n      colors: { progressBarBackground },\n    },\n  }) => progressBarBackground};\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ${({ $percentage, $secondaryPercentage }) =>\n    ($percentage === 100 || $secondaryPercentage === 100) &&\n    css`\n      animation: ${LineBarPulseKeyFrames} 0.3s 0.5s 1 ease-out;\n    `}\n`;\n\nexport const LineProgressBar = styled.div<{\n  $percentage: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n  theme: ThemeType;\n}>`\n  position: absolute;\n  left: 0;\n  height: ${BAR_HEIGHT};\n  background-color: ${({ $barColor, $isSecondary, theme }) =>\n    !!$barColor || !!$isSecondary\n      ? theme.colors.progressBarSecondary\n      : theme.colors.progressBar};\n  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n  transition: width 0.6s ease;\n  width: ${({ $percentage }) => $percentage}%;\n\n  &::before {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    margin: auto;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 0px;\n    height: 0px;\n    border-radius: 50%;\n    opacity: 0;\n    filter: blur(2px);\n    background-color: ${({\n      $barColor,\n      $isSecondary,\n      theme: {\n        colors: { progressBar, progressBarSecondary },\n      },\n    }) => ($barColor || $isSecondary ? progressBarSecondary : progressBar)};\n\n    ${({ $percentage }) =>\n      $percentage === 100 &&\n      css`\n        animation: ${TargetBarPulseKeyFrames} 0.33s 0.75s 3 ease-in;\n      `}\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n`;\n\nexport const CircularWrapper = styled.div<{\n  $circleSize: string;\n  theme: ThemeType;\n}>`\n  position: relative;\n  width: ${({ $circleSize }) => $circleSize};\n  height: ${({ $circleSize }) => $circleSize};\n  background: none;\n  margin: 0 auto;\n  box-shadow: none;\n`;\n\nexport const CircleSvg = styled.svg`\n  position: absolute;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke-linecap: round;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const EmptyCircle = styled.circle<{\n  theme: ThemeType;\n}>`\n  stroke: ${({ theme }) => theme.tokenColors.grey_200};\n`;\n\nexport const FullCircle = styled.circle<{\n  strokeDashoffset: number;\n  theme: ThemeType;\n  $strokeDashoffsetInit: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n}>`\n  stroke: ${({\n    $isSecondary,\n    $barColor,\n    theme: {\n      colors: { circularProgress, circularProgressSecondary },\n    },\n  }) =>\n    $barColor || $isSecondary ? circularProgressSecondary : circularProgress};\n  animation: ${({ $isSecondary, strokeDashoffset, $strokeDashoffsetInit }) =>\n      $isSecondary\n        ? SecondaryCircleFillKeyFrames({\n            strokeDashoffset,\n            $strokeDashoffsetInit,\n          })\n        : CircleFillKeyFrames({ strokeDashoffset, $strokeDashoffsetInit })}\n    1s linear;\n`;\n\nexport const CircularValue = styled.div<{\n  theme: ThemeType;\n}>`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: 2;\n  font-size: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  line-height: ${({\n    theme: {\n      fontSizes: { l },\n    },\n  }) => l};\n  text-align: center;\n  height: 100%;\n  color: ${({\n    theme: {\n      colors: { textDark },\n    },\n  }) => textDark};\n`;\n"],"names":["BAR_HEIGHT","TargetBarPulseKeyFrames","keyframes","LineBarPulseKeyFrames","ProgressBarWrapper","styled","div","LineProgressBarWrapper","theme","colors","progressBarBackground","$percentage","$secondaryPercentage","css","LineProgressBar","$barColor","$isSecondary","progressBarSecondary","progressBar","ScreenReaderOnly","span","CircularWrapper","$circleSize","CircleSvg","svg","EmptyCircle","circle","tokenColors","grey_200","FullCircle","circularProgress","circularProgressSecondary","strokeDashoffset","$strokeDashoffsetInit","SecondaryCircleFillKeyFrames","CircleFillKeyFrames","CircularValue","fontSizes","l","textDark"],"mappings":"0DAGA,MAAMA,EAAa,OAkCbC,EAA0B,IAAMC,CAAS;;;;;;;;;;;;;;;EAiBzCC,EAAwB,IAAMD,CAAS;;;;;;;;;;;;;EAehCE,EAAqBC,EAAOC,GAAG;gBAC5BN;EAGHO,EAAyBF,EAAOC,GAI3C;;YAEUN;;sBAEU,EAClBQ,OACEC,QAAUC,6BAERA;;;IAGJ,EAAGC,cAAaC,2BACC,MAAhBD,GAAgD,MAAzBC,IACxBC,CAAG;mBACYV;;EAINW,EAAkBT,EAAOC,GAKpC;;;YAGUN;sBACU,EAAGe,YAAWC,eAAcR,WAC5CO,GAAeC,EACbR,EAAMC,OAAOQ,qBACbT,EAAMC,OAAOS;;;WAGV,EAAGP,iBAAkBA;;;;;;;;;;;;;;;;wBAgBR,EAClBI,YACAC,eACAR,OACEC,QAAUS,cAAaD,4BAEpBF,GAAaC,EAAeC,EAAuBC;;MAExD,EAAGP,iBACa,MAAhBA,GACAE,CAAG;qBACYZ;;;EAKRkB,EAAmBd,EAAOe,IAAI;;;;;;;;;EAW9BC,EAAkBhB,EAAOC,GAGpC;;WAES,EAAGgB,iBAAkBA;YACpB,EAAGA,iBAAkBA;;;;EAMpBC,EAAYlB,EAAOmB,GAAG;;;;;;;EAStBC,EAAcpB,EAAOqB,MAEhC;YACU,EAAGlB,WAAYA,EAAMmB,YAAYC;EAGhCC,EAAaxB,EAAOqB,MAM/B;YACU,EACRV,eACAD,YACAP,OACEC,QAAUqB,mBAAkBC,iCAG9BhB,GAAaC,EAAee,EAA4BD;eAC7C,EAAGd,eAAcgB,mBAAkBC,2BAC5CjB,EA3K+B,GACnCiB,wBACAD,sBACuC9B,CAAS;;0BAExB+B;;;0BAGAD;;EAoKhBE,CAA6B,CAC3BF,mBACAC,0BA7LgB,GAC1BA,wBACAD,sBACuC9B,CAAS;;0BAExB+B;;;0BAGAD;;;0BAGAA;;EAoLhBG,CAAoB,CAAEH,mBAAkBC;;EAIrCG,EAAgB/B,EAAOC,GAElC;;;;;;;;;;;eAWa,EACXE,OACE6B,WAAaC,SAEXA;iBACS,EACb9B,OACE6B,WAAaC,SAEXA;;;WAGG,EACP9B,OACEC,QAAU8B,gBAERA;"}

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import Radio, { RadioProps } from ".";
+import { type StoryObj } from "@storybook/react";
+import Radio, { type RadioProps } from ".";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,2 +1,2 @@
-import{__assign as e,__rest as r}from"../../../node_modules/tslib/tslib.es6.js";import s,{forwardRef as t}from"react";import{useTheme as a,ThemeProvider as o}from"styled-components";import{crukTheme as l}from"../../themes/cruk.js";import{ErrorText as i}from"../ErrorText/index.js";import{StyledLabel as d,StyledInput as m,SelectedBorder as n,CheckWrapper as c,Check as u,VerticalAlign as E}from"./styles.js";var h=t((function(t,h){var f=a(),p=e(e({},l),f);t.children,t.hasError,t.errorMessage;var b=r(t,["children","hasError","errorMessage"]);return s.createElement(o,{theme:p},s.createElement(d,{$hasError:t.hasError||!!t.errorMessage||!1,className:t.className,$checked:t.checked||!1,$disabled:t.disabled||!1},s.createElement(m,e({},b,{disabled:t.disabled||!1,type:"radio",ref:h,"aria-describedby":t.id&&t.errorMessage?"".concat(t.id,"-error"):void 0})),s.createElement(n,null),p.utilities.useDefaultFromControls?null:s.createElement(c,null,s.createElement(u,null)),s.createElement(E,null,t.children||t.value)),!!t.errorMessage&&s.createElement(i,{marginTop:"xxs",id:t.id?"".concat(t.id,"-error"):void 0},t.errorMessage))}));export{h as Radio,h as default};
+import e,{forwardRef as r}from"react";import{useTheme as s,ThemeProvider as t}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{ErrorText as l}from"../ErrorText/index.js";import{StyledLabel as o,StyledInput as i,SelectedBorder as d,CheckWrapper as m,Check as n,VerticalAlign as c}from"./styles.js";const u=r(((r,u)=>{const E=s(),p={...a,...E},{children:h,hasError:f,errorMessage:b,...g}=r;return e.createElement(t,{theme:p},e.createElement(o,{$hasError:r.hasError||!!r.errorMessage||!1,className:r.className,$checked:r.checked||!1,$disabled:r.disabled||!1},e.createElement(i,{...g,disabled:r.disabled||!1,type:"radio",ref:u,"aria-describedby":r.id&&r.errorMessage?`${r.id}-error`:void 0}),e.createElement(d,null),p.utilities.useDefaultFromControls?null:e.createElement(m,null,e.createElement(n,null)),e.createElement(c,null,r.children||r.value)),!!r.errorMessage&&e.createElement(l,{marginTop:"xxs",id:r.id?`${r.id}-error`:void 0},r.errorMessage))}));u.displayName="Radio";export{u as Radio,u as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  SelectedBorder,\n  CheckWrapper,\n  Check,\n  VerticalAlign,\n} from \"./styles\";\n\nexport type RadioProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * A single radio button which should be part of a field set of radio buttons\n *\n * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component\n */\nexport const Radio = forwardRef(\n  (props: RadioProps, ref?: Ref<HTMLInputElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, hasError, errorMessage, ...rest } = props;\n    return (\n      <ThemeProvider theme={theme}>\n        <StyledLabel\n          $hasError={props.hasError || !!props.errorMessage || false}\n          className={props.className}\n          $checked={props.checked || false}\n          $disabled={props.disabled || false}\n        >\n          <StyledInput\n            {...rest}\n            disabled={props.disabled || false}\n            type=\"radio\"\n            ref={ref}\n            aria-describedby={\n              !!props.id && !!props.errorMessage\n                ? `${props.id}-error`\n                : undefined\n            }\n          />\n          <SelectedBorder />\n          {theme.utilities.useDefaultFromControls ? null : (\n            <CheckWrapper>\n              <Check />\n            </CheckWrapper>\n          )}\n          <VerticalAlign>{props.children || props.value}</VerticalAlign>\n        </StyledLabel>\n        {!!props.errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {props.errorMessage}\n          </ErrorText>\n        )}\n      </ThemeProvider>\n    );\n  },\n);\n\nexport default Radio;\n"],"names":["Radio","forwardRef","props","ref","foundTheme","useTheme","theme","__assign","defaultTheme","children","hasError","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","errorMessage","className","$checked","checked","$disabled","disabled","StyledInput","type","id","concat","undefined","SelectedBorder","utilities","useDefaultFromControls","CheckWrapper","Check","VerticalAlign","value","ErrorText","marginTop"],"mappings":"4ZAmCaA,EAAQC,GACnB,SAACC,EAAmBC,GAClB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGiDF,EAAKO,SAALP,EAA5BQ,SAA4BR,eAAT,IAAAS,IAAST,EAAhD,CAA6C,WAAA,WAAA,iBACnD,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAAAC,cAACE,EAAW,CAAAC,UACCd,EAAMQ,YAAcR,EAAMe,eAAgB,EACrDC,UAAWhB,EAAMgB,UACPC,SAAAjB,EAAMkB,UAAW,EAChBC,UAAAnB,EAAMoB,WAAY,GAE7BV,EAAAC,cAACU,EAAWhB,EAAA,CAAA,EACNI,EAAI,CACRW,SAAUpB,EAAMoB,WAAY,EAC5BE,KAAK,QACLrB,IAAKA,EAEH,mBAAED,EAAMuB,IAAQvB,EAAMe,aAClB,GAAAS,OAAGxB,EAAMuB,GAAU,eACnBE,KAGRf,EAAAC,cAACe,EAAiB,MACjBtB,EAAMuB,UAAUC,uBAAyB,KACxClB,gBAACmB,EAAY,KACXnB,EAACC,cAAAmB,EAAQ,OAGbpB,EAACC,cAAAoB,EAAe,KAAA/B,EAAMO,UAAYP,EAAMgC,UAEvChC,EAAMe,cACPL,EAACC,cAAAsB,EACC,CAAAC,UAAU,MACVX,GAAIvB,EAAMuB,GAAK,UAAGvB,EAAMuB,GAAE,eAAWE,GAEpCzB,EAAMe,cAKjB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  forwardRef,\n  type ReactNode,\n  type LegacyRef,\n} from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport {\n  StyledLabel,\n  StyledInput,\n  SelectedBorder,\n  CheckWrapper,\n  Check,\n  VerticalAlign,\n} from \"./styles\";\n\nexport type RadioProps = InputHTMLAttributes<HTMLInputElement> & {\n  ref?: Ref<HTMLInputElement> | LegacyRef<HTMLInputElement>;\n  /** flag for error styling */\n  hasError?: boolean;\n  /** error message text  */\n  errorMessage?: string;\n  children?: ReactNode;\n};\n\n/**\n * A single radio button which should be part of a field set of radio buttons\n *\n * The value or children becomes the label, if you want an outer label for a radio or group of radios please use a LegendWrapper component\n */\nexport const Radio = forwardRef(\n  (props: RadioProps, ref?: Ref<HTMLInputElement>) => {\n    const foundTheme = useTheme();\n    const theme = {\n      ...defaultTheme,\n      ...foundTheme,\n    };\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, hasError, errorMessage, ...rest } = props;\n    return (\n      <ThemeProvider theme={theme}>\n        <StyledLabel\n          $hasError={props.hasError || !!props.errorMessage || false}\n          className={props.className}\n          $checked={props.checked || false}\n          $disabled={props.disabled || false}\n        >\n          <StyledInput\n            {...rest}\n            disabled={props.disabled || false}\n            type=\"radio\"\n            ref={ref}\n            aria-describedby={\n              !!props.id && !!props.errorMessage\n                ? `${props.id}-error`\n                : undefined\n            }\n          />\n          <SelectedBorder />\n          {theme.utilities.useDefaultFromControls ? null : (\n            <CheckWrapper>\n              <Check />\n            </CheckWrapper>\n          )}\n          <VerticalAlign>{props.children || props.value}</VerticalAlign>\n        </StyledLabel>\n        {!!props.errorMessage && (\n          <ErrorText\n            marginTop=\"xxs\"\n            id={props.id ? `${props.id}-error` : undefined}\n          >\n            {props.errorMessage}\n          </ErrorText>\n        )}\n      </ThemeProvider>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\n\nexport default Radio;\n"],"names":["Radio","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","children","hasError","errorMessage","rest","React","createElement","ThemeProvider","StyledLabel","$hasError","className","$checked","checked","$disabled","disabled","StyledInput","type","id","undefined","SelectedBorder","utilities","useDefaultFromControls","CheckWrapper","Check","VerticalAlign","value","ErrorText","marginTop","displayName"],"mappings":"wUAmCa,MAAAA,EAAQC,GACnB,CAACC,EAAmBC,KAClB,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAGCI,SAAEA,EAAQC,SAAEA,EAAQC,aAAEA,KAAiBC,GAAST,EACtD,OACEU,EAACC,cAAAC,EAAc,CAAAR,MAAOA,GACpBM,EAAAC,cAACE,EAAW,CAAAC,UACCd,EAAMO,YAAcP,EAAMQ,eAAgB,EACrDO,UAAWf,EAAMe,UACPC,SAAAhB,EAAMiB,UAAW,EAChBC,UAAAlB,EAAMmB,WAAY,GAE7BT,EAAAC,cAACS,EAAW,IACNX,EACJU,SAAUnB,EAAMmB,WAAY,EAC5BE,KAAK,QACLpB,IAAKA,EAEH,mBAAED,EAAMsB,IAAQtB,EAAMQ,aAClB,GAAGR,EAAMsB,gBACTC,IAGRb,EAAAC,cAACa,EAAiB,MACjBpB,EAAMqB,UAAUC,uBAAyB,KACxChB,gBAACiB,EAAY,KACXjB,EAACC,cAAAiB,EAAQ,OAGblB,EAACC,cAAAkB,EAAe,KAAA7B,EAAMM,UAAYN,EAAM8B,UAEvC9B,EAAMQ,cACPE,EAACC,cAAAoB,EACC,CAAAC,UAAU,MACVV,GAAItB,EAAMsB,GAAK,GAAGtB,EAAMsB,gBAAaC,GAEpCvB,EAAMQ,cAGG,IAKtBV,EAAMmC,YAAc"}