@cruk/cruk-react-components 6.2.2 → 7.0.0

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

@@ -1,2 +1,2 @@
-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{__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: var(--font-size-s, 0.875rem);\n  background-color: var(--clr-popover-background, #fff);\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: 992px) {\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: var(--font-size-s, 0.875rem);\n  background-color: var(--clr-popover-background, #fff);\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: 992px) {\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){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){switch(t.$position){case"top":case"left":case"bottom":default:return"var(--spacing-s, 1.5rem)";case"topLeft":case"right":case"bottomLeft":return"auto"}},function(t){switch(t.$position){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"right":case"bottomLeft":return"var(--spacing-s, 1.5rem)"}},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){switch(t.$position){case"top":case"topLeft":default:return"var(--clr-popover-background, #fff) transparent transparent";case"left":case"right":case"bottom":case"bottomLeft":return"transparent transparent var(--clr-popover-background, #fff)"}},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){switch(t.$position){case"top":case"topLeft":default:return"100%";case"left":case"right":return"var(--spacing-xs, 1rem)";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){switch(t.$position){case"top":case"bottom":default:return"var(--spacing-s, 1.5rem)";case"topLeft":case"bottomLeft":return"auto";case"left":return"100%";case"right":return"-20px"}},function(t){switch(t.$position){case"top":case"left":case"bottom":default:return"auto";case"topLeft":case"bottomLeft":return"var(--spacing-s, 1.5rem)";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){switch(t.$position){case"top":case"topLeft":default:return"var(--clr-popover-background, #fff) transparent transparent";case"left":return"transparent transparent transparent var(--clr-popover-background, #fff)";case"right":return"transparent var(--clr-popover-background, #fff) transparent transparent";case"bottom":case"bottomLeft":return"transparent transparent var(--clr-popover-background, #fff)"}});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","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 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}>`\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: var(--font-size-s, 0.875rem);\n  background-color: var(--clr-popover-background, #fff);\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 }) => {\n      switch ($position) {\n        case \"top\":\n          return `var(--spacing-s, 1.5rem)`;\n        case \"topLeft\":\n          return \"auto\";\n        case \"left\":\n          return `var(--spacing-s, 1.5rem)`;\n        case \"right\":\n          return \"auto\";\n        case \"bottom\":\n          return `var(--spacing-s, 1.5rem)`;\n        case \"bottomLeft\":\n          return \"auto\";\n        default:\n          return `var(--spacing-s, 1.5rem)`;\n      }\n    }};\n    right: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return `auto`;\n        case \"topLeft\":\n          return `var(--spacing-s, 1.5rem)`;\n        case \"left\":\n          return \"auto\";\n        case \"right\":\n          return `var(--spacing-s, 1.5rem)`;\n        case \"bottom\":\n          return `auto`;\n        case \"bottomLeft\":\n          return `var(--spacing-s, 1.5rem)`;\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: ${({ $position }) => {\n      switch ($position) {\n        case \"top\":\n          return `var(--clr-popover-background, #fff) transparent transparent`;\n        case \"topLeft\":\n          return `var(--clr-popover-background, #fff) transparent transparent`;\n        case \"left\":\n          return `transparent transparent var(--clr-popover-background, #fff)`;\n        case \"right\":\n          return `transparent transparent var(--clr-popover-background, #fff)`;\n        case \"bottom\":\n          return `transparent transparent var(--clr-popover-background, #fff)`;\n        case \"bottomLeft\":\n          return `transparent transparent var(--clr-popover-background, #fff)`;\n        default:\n          return `var(--clr-popover-background, #fff) transparent transparent`;\n      }\n    }};\n  }\n\n  @media (min-width: 992px) {\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 }) => {\n        switch ($position) {\n          case \"top\":\n            return \"100%\";\n          case \"topLeft\":\n            return \"100%\";\n          case \"left\":\n            return `var(--spacing-xs, 1rem)`;\n          case \"right\":\n            return `var(--spacing-xs, 1rem)`;\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 }) => {\n        switch ($position) {\n          case \"top\":\n            return `var(--spacing-s, 1.5rem)`;\n          case \"topLeft\":\n            return \"auto\";\n          case \"left\":\n            return \"100%\";\n          case \"right\":\n            return \"-20px\";\n          case \"bottom\":\n            return `var(--spacing-s, 1.5rem)`;\n          case \"bottomLeft\":\n            return \"auto\";\n          default:\n            return `var(--spacing-s, 1.5rem)`;\n        }\n      }};\n      right: ${({ $position }) => {\n        switch ($position) {\n          case \"top\":\n            return `auto`;\n          case \"topLeft\":\n            return `var(--spacing-s, 1.5rem)`;\n          case \"left\":\n            return \"auto\";\n          case \"right\":\n            return `0`;\n          case \"bottom\":\n            return `auto`;\n          case \"bottomLeft\":\n            return `var(--spacing-s, 1.5rem)`;\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: ${({ $position }) => {\n        switch ($position) {\n          case \"top\":\n            return `var(--clr-popover-background, #fff) transparent transparent`;\n          case \"topLeft\":\n            return `var(--clr-popover-background, #fff) transparent transparent`;\n          case \"left\":\n            return `transparent transparent transparent var(--clr-popover-background, #fff)`;\n          case \"right\":\n            return `transparent var(--clr-popover-background, #fff) transparent transparent`;\n          case \"bottom\":\n            return `transparent transparent var(--clr-popover-background, #fff)`;\n          case \"bottomLeft\":\n            return `transparent transparent var(--clr-popover-background, #fff)`;\n          default:\n            return `var(--clr-popover-background, #fff) 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","$position"],"mappings":"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"}

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{ProgressBarWrapper as r,CircularWrapper as t,CircleSvg as a,EmptyCircle as c,FullCircle as o,CircularValue as n,LineProgressBarWrapper as s,LineProgressBar as l,ScreenReaderOnly as i}from"./styles.js";function m(m){var f=m.percentage,$=void 0===f?0:f,y=m.isCircular,d=m.circleContents,h=m.circleSize,E=m.barColor,p=m.secondaryBarColor,k=m.secondaryPercentage,u=m.children,C=Number.isNaN($)?0:$,b=C>100?100:C,g="".concat(C,"%"),x=k&&!Number.isNaN(k)?k:0,D=x>100?100:x,N="".concat("string"==typeof d?d:""," ").concat(g,"% Complete"),S=d||g,v=58,I=2*Math.PI*v;return e.createElement(r,null,y?e.createElement(t,{$circleSize:h||"90px"},e.createElement(a,{viewBox:"0 0 ".concat(128," ").concat(128)},e.createElement(c,{cx:64,cy:64,r:v,strokeWidth:6}),e.createElement(o,{$isSecondary:!0,$barColor:p,cx:64,cy:64,r:v,strokeWidth:6,strokeDasharray:I,strokeDashoffset:I*(1-D/100),$strokeDashoffsetInit:I}),e.createElement(o,{$barColor:E,cx:64,cy:64,r:v,strokeWidth:6,strokeDasharray:I,strokeDashoffset:I*(1-b/100),$strokeDashoffsetInit:I})),e.createElement(n,null,S)):e.createElement(s,{$percentage:b,$secondaryPercentage:D},e.createElement(l,{$isSecondary:!0,$percentage:D,$barColor:p}),e.createElement(l,{$percentage:b,$barColor:E}),e.createElement(i,null,N)),u)}export{m as ProgressBar,m 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,EAAAD,EAAAE,WAAAA,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,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAECK,EAAoBC,OAAOC,MAAMf,GAA2B,EAAbA,EAC/CgB,EAAoBH,EAAmB,IAAM,IAAMA,EACnDI,EAAgB,GAAAC,OAAGL,OAEnBM,EACJb,IAAwBQ,OAAOC,MAAMT,GACjCA,EACA,EAEAc,EACJD,EAA4B,IAAM,IAAMA,EAEpCE,EAA8B,GAAAH,OACR,iBAAnBhB,EAA8BA,EAAiB,GAAE,KAAAgB,OACtDD,gBACEK,EAAsBpB,GAAkBe,EAIxCM,EAAIC,GACJC,EAAI,EAAIC,KAAKC,GAAKJ,EAExB,OACEK,EAAAC,cAACC,EAAa,CAACpB,MAAOA,GACpBkB,EAAAC,cAACE,EAAkB,KAChB9B,EACC2B,gBAACI,EAAe,CAAAC,YAAc9B,GAjEZ,QAkEhByB,EAAAC,cAACK,GAAUC,QAAS,cATpB,IAS4B,KAAAjB,OAT5B,MAUEU,EAAAC,cAACO,GACCC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAfM,IAiBRX,EAAAC,cAACW,EAAU,CAAAC,cAAA,EAAAC,UAEErC,EACXgC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAvBM,EAwBNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIL,EAA6B,KAAIyB,sBACrCpB,IAGzBG,EAAAC,cAACW,EAAU,CAAAE,UACEtC,EACXiC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAlCM,EAmCNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIT,EAAoB,KAAI6B,sBAC5BpB,KAG3BG,EAAAC,cAACiB,EAAa,KAAExB,IAGlBM,EAAAC,cAACkB,EAAsB,CAAAC,YACRhC,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\";\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 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    <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  );\n}\n\nexport default ProgressBar;\n"],"names":["ProgressBar","_a","_b","percentage","isCircular","circleContents","circleSize","barColor","secondaryBarColor","secondaryPercentage","children","percentageNumber","Number","isNaN","percentageLimited","percentString","concat","secondaryPercentageNumber","secondaryPercentageLimited","descriptivePercentageString","textOrPercentString","r","d","c","Math","PI","React","ProgressBarWrapper","CircularWrapper","$circleSize","createElement","CircleSvg","viewBox","EmptyCircle","cx","cy","strokeWidth","FullCircle","$isSecondary","$barColor","strokeDasharray","strokeDashoffset","$strokeDashoffsetInit","CircularValue","LineProgressBarWrapper","$percentage","LineProgressBar","ScreenReaderOnly"],"mappings":"qOAsCM,SAAUA,EAAYC,OAC1BC,EAAAD,EAAAE,WAAAA,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,EAAoBC,OAAOC,MAAMV,GAA2B,EAAbA,EAC/CW,EAAoBH,EAAmB,IAAM,IAAMA,EACnDI,EAAgB,GAAAC,OAAGL,OAEnBM,EACJR,IAAwBG,OAAOC,MAAMJ,GACjCA,EACA,EAEAS,EACJD,EAA4B,IAAM,IAAMA,EAEpCE,EAA8B,GAAAH,OACR,iBAAnBX,EAA8BA,EAAiB,GAAE,KAAAW,OACtDD,gBACEK,EAAsBf,GAAkBU,EAIxCM,EAAIC,GACJC,EAAI,EAAIC,KAAKC,GAAKJ,EAExB,OACEK,gBAACC,EAAkB,KAChBvB,EACCsB,gBAACE,EAAe,CAAAC,YAAcvB,GA3DV,QA4DlBoB,EAAAI,cAACC,GAAUC,QAAS,cARlB,IAQ0B,KAAAhB,OAR1B,MASAU,EAAAI,cAACG,GACCC,GAAIb,GACJc,GAAId,GACJA,EAAGA,EACHe,YAdQ,IAgBVV,EAAAI,cAACO,EAAU,CAAAC,cAAA,EAAAC,UAEE/B,EACX0B,GAAIb,GACJc,GAAId,GACJA,EAAGA,EACHe,YAtBQ,EAuBRI,gBAAiBjB,EACjBkB,iBAAkBlB,GAAK,EAAIL,EAA6B,KAAIwB,sBACrCnB,IAGzBG,EAAAI,cAACO,EAAU,CAAAE,UACEhC,EACX2B,GAAIb,GACJc,GAAId,GACJA,EAAGA,EACHe,YAjCQ,EAkCRI,gBAAiBjB,EACjBkB,iBAAkBlB,GAAK,EAAIT,EAAoB,KAAI4B,sBAC5BnB,KAG3BG,EAAAI,cAACa,EAAa,KAAEvB,IAGlBM,EAAAI,cAACc,EAAsB,CAAAC,YACR/B,uBACSI,GAEtBQ,EAAAI,cAACgB,EAAe,CAAAR,cAAA,EAAAO,YAED3B,EAA0BqB,UAC5B/B,IAGbkB,EAAAI,cAACgB,EAAe,CAAAD,YACD/B,EAAiByB,UACnBhC,IAEbmB,EAAAI,cAACiB,EAAgB,KAAE5B,IAGtBT,EAGP"}

package/lib/src/components/ProgressBar/styles.d.ts

@@ -1,32 +1,23 @@
-import { type ThemeType } from "../../types";
 export declare const ProgressBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LineProgressBarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $percentage: number;
     $secondaryPercentage: number;
-    theme: ThemeType;
 }>> & string;
 export declare const LineProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $percentage: number;
     $barColor?: string;
     $isSecondary?: boolean;
-    theme: ThemeType;
 }>> & string;
 export declare const ScreenReaderOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const CircularWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $circleSize: string;
-    theme: ThemeType;
 }>> & string;
 export declare const CircleSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
-export declare const EmptyCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, {
-    theme: ThemeType;
-}>> & string;
+export declare const EmptyCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGCircleElement>, never>> & string;
 export declare const FullCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, {
     strokeDashoffset: number;
-    theme: ThemeType;
     $strokeDashoffsetInit: number;
     $barColor?: string;
     $isSecondary?: boolean;
 }>> & string;
-export declare const CircularValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: ThemeType;
-}>> & string;
+export declare const CircularValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,2 +1,2 @@
-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{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r,{css as e,keyframes as t}from"styled-components";var o,i,s,a,h,p,c,l,d,f,g,u,b,x,m,v=function(){return t(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"])))},k=function(){return t(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"])))},y=r.div(h||(h=n(["\n  --__progress-bar-height: 16px;\n  margin-top: var(--__progress-bar-height, 16px);\n"],["\n  --__progress-bar-height: 16px;\n  margin-top: var(--__progress-bar-height, 16px);\n"]))),w=r.div(c||(c=n(["\n  position: relative;\n  height: var(--__progress-bar-height, 16px);\n  margin-bottom: 0;\n  background-color: var(--clr-progress-bar-background, #e6e6e6);\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ","\n"],["\n  position: relative;\n  height: var(--__progress-bar-height, 16px);\n  margin-bottom: 0;\n  background-color: var(--clr-progress-bar-background, #e6e6e6);\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n\n  ","\n"])),function(r){var t=r.$percentage,o=r.$secondaryPercentage;return(100===t||100===o)&&e(p||(p=n(["\n      animation: "," 0.3s 0.5s 1 ease-out;\n    "],["\n      animation: "," 0.3s 0.5s 1 ease-out;\n    "])),k)}),$=r.div(d||(d=n(["\n  position: absolute;\n  left: 0;\n  height: var(--__progress-bar-height, 16px);\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: var(--__progress-bar-height, 16px);\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"])),function(n){var r=n.$barColor,e=n.$isSecondary;return r||e?"var(--clr-progress-bar-secondary, #e60079)":"var(--clr-progress-bar, #00007e)"},function(n){return n.$percentage},function(n){var r=n.$barColor,e=n.$isSecondary;return r||e?"var(--clr-progress-bar-secondary, #e60079)":"var(--clr-progress-bar, #00007e)"},function(r){return 100===r.$percentage&&e(l||(l=n(["\n        animation: "," 0.33s 0.75s 3 ease-in;\n      "],["\n        animation: "," 0.33s 0.75s 3 ease-in;\n      "])),v)}),_=r.span(f||(f=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=r.div(g||(g=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}),D=r.svg(u||(u=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"]))),S=r.circle(b||(b=n(["\n  stroke: var(--clr-cruk-grey-200, #e6e6e6);\n"],["\n  stroke: var(--clr-cruk-grey-200, #e6e6e6);\n"]))),I=r.circle(x||(x=n(["\n  stroke: ",";\n  animation: ","\n    1s linear;\n"],["\n  stroke: ",";\n  animation: ","\n    1s linear;\n"])),function(n){var r=n.$isSecondary;return n.$barColor||r?"var(--clr-circular-progress-secondary, #e60079)":"var(--clr-circular-progress, #009cee)"},function(r){var e=r.$isSecondary,s=r.strokeDashoffset,a=r.$strokeDashoffsetInit;return e?function(r){var e=r.$strokeDashoffsetInit,o=r.strokeDashoffset;return t(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"])),e,o)}({strokeDashoffset:s,$strokeDashoffsetInit:a}):function(r){var e=r.$strokeDashoffsetInit,i=r.strokeDashoffset;return t(o||(o=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"])),e,i,i)}({strokeDashoffset:s,$strokeDashoffsetInit:a})}),j=r.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: var(--font-size-l, 1.25rem);\n  line-height: var(--font-size-l, 1.25rem);\n  font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);\n  text-align: center;\n  height: 100%;\n  color: var(--clr-text-dark, #000);\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: var(--font-size-l, 1.25rem);\n  line-height: var(--font-size-l, 1.25rem);\n  font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);\n  text-align: center;\n  height: 100%;\n  color: var(--clr-text-dark, #000);\n'])));export{D as CircleSvg,j as CircularValue,z as CircularWrapper,S as EmptyCircle,I as FullCircle,$ as LineProgressBar,w as LineProgressBarWrapper,y as ProgressBarWrapper,_ 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\";\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  --__progress-bar-height: 16px;\n  margin-top: var(--__progress-bar-height, 16px);\n`;\n\nexport const LineProgressBarWrapper = styled.div<{\n  $percentage: number;\n  $secondaryPercentage: number;\n}>`\n  position: relative;\n  height: var(--__progress-bar-height, 16px);\n  margin-bottom: 0;\n  background-color: var(--clr-progress-bar-background, #e6e6e6);\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}>`\n  position: absolute;\n  left: 0;\n  height: var(--__progress-bar-height, 16px);\n  background-color: ${({ $barColor, $isSecondary }) =>\n    !!$barColor || !!$isSecondary\n      ? `var(--clr-progress-bar-secondary, #e60079)`\n      : `var(--clr-progress-bar, #00007e)`};\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: ${({ $barColor, $isSecondary }) =>\n      $barColor || $isSecondary\n        ? `var(--clr-progress-bar-secondary, #e60079)`\n        : `var(--clr-progress-bar, #00007e)`};\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}>`\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  stroke: var(--clr-cruk-grey-200, #e6e6e6);\n`;\n\nexport const FullCircle = styled.circle<{\n  strokeDashoffset: number;\n  $strokeDashoffsetInit: number;\n  $barColor?: string;\n  $isSecondary?: boolean;\n}>`\n  stroke: ${({ $isSecondary, $barColor }) =>\n    $barColor || $isSecondary\n      ? `var(--clr-circular-progress-secondary, #e60079)`\n      : `var(--clr-circular-progress, #009cee)`};\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  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: var(--font-size-l, 1.25rem);\n  line-height: var(--font-size-l, 1.25rem);\n  font-family: var(--typ-font-family-headings, \"Progress\", Arial, sans-serif);\n  text-align: center;\n  height: 100%;\n  color: var(--clr-text-dark, #000);\n`;\n"],"names":["TargetBarPulseKeyFrames","keyframes","templateObject_3","__makeTemplateObject","LineBarPulseKeyFrames","templateObject_4","ProgressBarWrapper","styled","div","templateObject_5","LineProgressBarWrapper","templateObject_7","_a","$percentage","$secondaryPercentage","css","templateObject_6","LineProgressBar","templateObject_9","$barColor","$isSecondary","templateObject_8","ScreenReaderOnly","span","templateObject_10","CircularWrapper","templateObject_11","$circleSize","CircleSvg","svg","templateObject_12","EmptyCircle","circle","templateObject_13","FullCircle","templateObject_14","strokeDashoffset","$strokeDashoffsetInit","templateObject_2","SecondaryCircleFillKeyFrames","templateObject_1","CircleFillKeyFrames","CircularValue","templateObject_15"],"mappings":"0IAOA,kCA2BMA,EAA0B,WAAM,OAAAC,EAASC,IAAAA,EAAAC,EAAA,CAAA,gMAAA,CAAA,kMAAT,EAiBhCC,EAAwB,WAAM,OAAAH,EAASI,IAAAA,EAAAF,EAAA,CAAA,sLAAA,CAAA,wLAAT,EAevBG,EAAqBC,EAAOC,IAAGC,IAAAA,EAAAN,EAAA,CAAA,2FAAA,CAAA,8FAK/BO,EAAyBH,EAAOC,IAAGG,IAAAA,EAAAR,EAAA,CAAA,yNAAA,MAAA,CAG9C,yNAWG,QAJD,SAACS,OAAEC,EAAWD,EAAAC,YAAEC,EAAoBF,EAAAE,qBACpC,OAAiB,MAAhBD,GAAgD,MAAzBC,IACxBC,EAAGC,IAAAA,EAAAb,EAAA,CAAA,sBAAA,gCAAA,CAAA,sBACiC,kCAArBC,EAFf,GAMSa,EAAkBV,EAAOC,IAAGU,IAAAA,EAAAf,EAAA,CAAA,2GAAA,kGAAA,kTAAA,YAAA,WAAA,CAIvC,2GAOwC,kGAGC,kTAmBC,YAMrC,aA/Be,SAACS,OAAEO,EAASP,EAAAO,UAAEC,EAAYR,EAAAQ,aAC5C,OAAED,GAAeC,EACb,6CACA,kCAFJ,EAKO,SAACR,GAAoB,OAAPA,EAAAC,WAAO,EAgBR,SAACD,OAAEO,EAASP,EAAAO,UAAEC,EAAYR,EAAAQ,aAC5C,OAAAD,GAAaC,EACT,6CACA,kCAFJ,EAIA,SAACR,GACD,OAAgB,MADFA,EAAAC,aAEdE,EAAGM,IAAAA,EAAAlB,EAAA,CAAA,wBAAA,mCAAA,CAAA,wBACmC,qCAAvBH,EAFf,GAOOsB,EAAmBf,EAAOgB,KAAIC,IAAAA,EAAArB,EAAA,CAAA,0JAAA,CAAA,6JAW9BsB,EAAkBlB,EAAOC,IAAGkB,IAAAA,EAAAvB,EAAA,CAAA,qCAAA,gBAAA,oEAAA,CAEvC,qCAEyC,gBACC,sEADjC,SAACS,GAAoB,OAAPA,EAAAe,WAAO,EACpB,SAACf,GAAoB,OAAPA,EAAAe,WAAO,GAMpBC,EAAYrB,EAAOsB,IAAGC,IAAAA,EAAA3B,EAAA,CAAA,qIAAA,CAAA,wIAStB4B,EAAcxB,EAAOyB,OAAMC,IAAAA,EAAA9B,EAAA,CAAA,oDAAA,CAAA,uDAI3B+B,EAAa3B,EAAOyB,OAAMG,IAAAA,EAAAhC,EAAA,CAAA,eAAA,mBAAA,sBAAA,CAKrC,eAI6C,mBAO2B,wBAV9D,SAACS,OAAEQ,EAAYR,EAAAQ,aACvB,OADkCR,EAAAO,WACrBC,EACT,kDACA,uCAFJ,EAGW,SAACR,GAAE,IAAAQ,iBAAcgB,EAAgBxB,EAAAwB,iBAAEC,EAAqBzB,EAAAyB,sBACjE,OAAAjB,EA3J+B,SAACR,OACpCyB,EAAqBzB,EAAAyB,sBACrBD,EAAgBxB,EAAAwB,iBACuB,OAAAnC,EAASqC,IAAAA,EAAAnC,EAAA,CAAA,qCAAA,8CAAA,aAAA,CAAA,qCAEH,8CAGL,eAHhBkC,EAGAD,EALe,CAyJ/BG,CAA6B,CAC3BH,iBAAgBA,EAChBC,sBAAqBA,IA7KL,SAACzB,OAC3ByB,EAAqBzB,EAAAyB,sBACrBD,EAAgBxB,EAAAwB,iBACuB,OAAAnC,EAASuC,IAAAA,EAAArC,EAAA,CAAA,qCAAA,6CAAA,8CAAA,aAAA,CAAA,qCAEH,6CAGL,8CAGA,eANhBkC,EAGAD,EAGAA,EARe,CA4K/BK,CAAoB,CAAEL,mBAAkBC,sBAAqBA,GALjE,GASOK,EAAgBnC,EAAOC,IAAGmC,IAAAA,EAAAxC,EAAA,CAAA,ubAAA,CAAA"}

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 from"react";import{useTheme as t,ThemeProvider as a}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{ErrorText as l}from"../ErrorText/index.js";import{StyledLabel as i,StyledInput as d,SelectedBorder as m,CheckWrapper as n,Check as c,VerticalAlign as u}from"./styles.js";var E=function(E){var f=t(),h=e(e({},o),f);E.children,E.hasError,E.errorMessage;var p=E.ref,b=r(E,["children","hasError","errorMessage","ref"]);return s.createElement(a,{theme:h},s.createElement(i,{$hasError:E.hasError||!!E.errorMessage||!1,className:E.className,$checked:E.checked||!1,$disabled:E.disabled||!1},s.createElement(d,e({},b,{disabled:E.disabled||!1,type:"radio",ref:p,"aria-describedby":E.id&&E.errorMessage?"".concat(E.id,"-error"):void 0})),s.createElement(m,null),h.utilities.useDefaultFromControls?null:s.createElement(n,null,s.createElement(c,null)),s.createElement(u,null,E.children||E.value)),!!E.errorMessage&&s.createElement(l,{marginTop:"xxs",id:E.id?"".concat(E.id,"-error"):void 0},E.errorMessage))};export{E as Radio,E as default};
+import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import a from"react";import{ErrorText as s}from"../ErrorText/index.js";import{StyledLabel as l,StyledInput as t,SelectedBorder as o,CheckWrapper as d,Check as i,VerticalAlign as n}from"./styles.js";var c=function(c){c.children,c.hasError,c.errorMessage;var m=c.ref,E=e(c,["children","hasError","errorMessage","ref"]);return a.createElement(a.Fragment,null,a.createElement(l,{$hasError:c.hasError||!!c.errorMessage||!1,className:c.className,$checked:c.checked||!1,$disabled:c.disabled||!1},a.createElement(t,r({},E,{disabled:c.disabled||!1,type:"radio",ref:m,"aria-describedby":c.id&&c.errorMessage?"".concat(c.id,"-error"):void 0})),a.createElement(o,null),a.createElement(d,null,a.createElement(i,null)),a.createElement(n,null,c.children||c.value)),!!c.errorMessage&&a.createElement(s,{marginTop:"xxs",id:c.id?"".concat(c.id,"-error"):void 0},c.errorMessage))};export{c as Radio,c 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  type ReactNode,\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>;\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 = (props: RadioProps) => {\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, ref, ...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 ? `${props.id}-error` : 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\nexport default Radio;\n"],"names":["Radio","props","foundTheme","useTheme","theme","__assign","defaultTheme","children","hasError","ref","rest","__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":"uYAiCO,IAAMA,EAAQ,SAACC,GACpB,IAAMC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGsDD,EAAKM,SAALN,EAAKO,SAALP,eAAnB,IAAEQ,EAAiBR,EAAKQ,IAAdC,EAAIC,EAAKV,EAArD,CAAA,WAAA,WAAA,eAAA,QACN,OACEW,EAAAC,cAACC,EAAa,CAACV,MAAOA,GACpBQ,EAAAC,cAACE,EAAW,CAAAC,UACCf,EAAMO,YAAcP,EAAMgB,eAAgB,EACrDC,UAAWjB,EAAMiB,UAASC,SAChBlB,EAAMmB,UAAW,EAAKC,UACrBpB,EAAMqB,WAAY,GAE7BV,EAAAC,cAACU,EAAWlB,EAAA,CAAA,EACNK,GACJY,SAAUrB,EAAMqB,WAAY,EAC5BE,KAAK,QACLf,IAAKA,EAAG,mBAEJR,EAAMwB,IAAQxB,EAAMgB,aAAe,GAAAS,OAAGzB,EAAMwB,GAAE,eAAWE,KAG/Df,EAAAC,cAACe,EAAc,MACdxB,EAAMyB,UAAUC,uBAAyB,KACxClB,gBAACmB,EAAY,KACXnB,EAAAC,cAACmB,EAAK,OAGVpB,EAAAC,cAACoB,EAAa,KAAEhC,EAAMM,UAAYN,EAAMiC,UAEvCjC,EAAMgB,cACPL,EAAAC,cAACsB,EAAS,CACRC,UAAU,MACVX,GAAIxB,EAAMwB,GAAK,UAAGxB,EAAMwB,GAAE,eAAWE,GAEpC1B,EAAMgB,cAKjB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Radio/index.tsx"],"sourcesContent":["import React, {\n  type InputHTMLAttributes,\n  type Ref,\n  type ReactNode,\n} from \"react\";\n\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>;\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 = (props: RadioProps) => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, hasError, errorMessage, ref, ...rest } = props;\n  return (\n    <>\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 ? `${props.id}-error` : undefined\n          }\n        />\n        <SelectedBorder />\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    </>\n  );\n};\n\nexport default Radio;\n"],"names":["Radio","props","children","hasError","ref","rest","__rest","React","createElement","Fragment","StyledLabel","$hasError","errorMessage","className","$checked","checked","$disabled","disabled","StyledInput","__assign","type","id","concat","undefined","SelectedBorder","CheckWrapper","Check","VerticalAlign","value","ErrorText","marginTop"],"mappings":"sRA+BO,IAAMA,EAAQ,SAACC,GAEuCA,EAAKC,SAALD,EAAKE,SAALF,eAAnB,IAAEG,EAAiBH,EAAKG,IAAdC,EAAIC,EAAKL,EAArD,CAAA,WAAA,WAAA,eAAA,QACN,OACEM,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAACE,EAAW,CAAAC,UACCV,EAAME,YAAcF,EAAMW,eAAgB,EACrDC,UAAWZ,EAAMY,UAASC,SAChBb,EAAMc,UAAW,EAAKC,UACrBf,EAAMgB,WAAY,GAE7BV,EAAAC,cAACU,EAAWC,EAAA,CAAA,EACNd,GACJY,SAAUhB,EAAMgB,WAAY,EAC5BG,KAAK,QACLhB,IAAKA,EAAG,mBAEJH,EAAMoB,IAAQpB,EAAMW,aAAe,GAAAU,OAAGrB,EAAMoB,GAAE,eAAWE,KAG/DhB,EAAAC,cAACgB,EAAc,MACfjB,EAAAC,cAACiB,EAAY,KACXlB,EAAAC,cAACkB,SAGHnB,EAAAC,cAACmB,EAAa,KAAE1B,EAAMC,UAAYD,EAAM2B,UAEvC3B,EAAMW,cACPL,EAAAC,cAACqB,EAAS,CACRC,UAAU,MACVT,GAAIpB,EAAMoB,GAAK,UAAGpB,EAAMoB,GAAE,eAAWE,GAEpCtB,EAAMW,cAKjB"}

package/lib/src/components/Radio/styles.d.ts

@@ -1,21 +1,12 @@
-import { type ThemeType } from "../../types";
-export declare const CheckWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: ThemeType;
-}>> & string;
-export declare const Check: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: ThemeType;
-}>> & string;
+export declare const CheckWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Check: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     $hasError: boolean;
     $disabled: boolean;
     $checked: boolean;
-    theme: ThemeType;
-}>> & string;
-export declare const VerticalAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-    theme: ThemeType;
 }>> & string;
+export declare const VerticalAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const SelectedBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
     disabled: boolean;
-    theme: ThemeType;
 }>> & string;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as e}from"styled-components";var i,t,r,l,a,s,c,d,b,h="1.5rem",p="0.75rem",g=o.div(i||(i=n(["\n  display: inline-block;\n  height: ",";\n  width: ",";\n  position: absolute;\n  top: calc(50% - ("," / 2));\n  left: ",";\n"],["\n  display: inline-block;\n  height: ",";\n  width: ",";\n  position: absolute;\n  top: calc(50% - ("," / 2));\n  left: ",";\n"])),h,h,h,function(n){return n.theme.spacing.xs}),u=o.span(t||(t=n(["\n  display: block;\n  position: relative;\n  border: 2px solid ",";\n  pointer-events: none;\n  border-radius: 100%;\n  height: ",";\n  width: ",';\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: "";\n    border-radius: 100%;\n    pointer-events: none;\n    height: ',";\n    width: ",";\n    top: calc(50% - ("," / 2));\n    left: calc(50% - ("," / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n"],["\n  display: block;\n  position: relative;\n  border: 2px solid ",";\n  pointer-events: none;\n  border-radius: 100%;\n  height: ",";\n  width: ",';\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: "";\n    border-radius: 100%;\n    pointer-events: none;\n    height: ',";\n    width: ",";\n    top: calc(50% - ("," / 2));\n    left: calc(50% - ("," / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n"])),function(n){return n.theme.colors.selectionBorder},h,h,p,p,p,p),f=o.label(l||(l=n(["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ",";\n  font-size: ",";\n  font-family: ",";\n\n  background-color: ",";\n  width: 100%;\n  position: relative;\n\n  cursor: ",";\n  display: inline-block;\n\n  color: ",";\n  padding: ",";\n  vertical-align: middle;\n\n  ","\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"],["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ",";\n  font-size: ",";\n  font-family: ",";\n\n  background-color: ",";\n  width: 100%;\n  position: relative;\n\n  cursor: ",";\n  display: inline-block;\n\n  color: ",";\n  padding: ",";\n  vertical-align: middle;\n\n  ","\n  // increase font size for desktop\n  @media (min-width: ",") {\n    font-size: ",";\n  }\n"])),function(n){return n.theme.typography.lineHeight},function(n){return n.theme.typography.fontSizeBase},function(n){return n.theme.typography.fontFamilyBase},function(n){return n.theme.colors.backgroundLight},function(n){return n.$disabled?"not-allowed":"pointer"},function(n){var o=n.theme;return n.$disabled?o.colors.disabled:o.colors.textDark},function(n){var o=n.theme;return"calc( (".concat("3em"," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.m," calc( (").concat("3em"," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.xl)},function(o){var i=o.theme,t=o.$disabled,l=o.$checked,a=o.$hasError;return i.utilities.useDefaultFromControls?null:e(r||(r=n(["\n          min-height: 2rem;\n\n          "," "," {\n            border: solid 2px\n              ",";\n            &:before {\n              background-color: ",";\n            }\n          }\n\n          &:hover "," "," {\n            border: solid 2px\n              ",";\n          }\n        "],["\n          min-height: 2rem;\n\n          "," "," {\n            border: solid 2px\n              ",";\n            &:before {\n              background-color: ",";\n            }\n          }\n\n          &:hover "," "," {\n            border: solid 2px\n              ",";\n          }\n        "])),g,u,t?i.colors.disabled:a?i.colors.danger:l?i.colors.check:i.colors.inputBorder,l?i.colors.check:"rgba(255, 255, 255, 0)",g,u,t?i.colors.disabled:i.colors.check)},function(n){return n.theme.breakpoint.desktopLarge},function(n){return n.theme.fontSizes.ml}),m=o.span(a||(a=n(["\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: ",";\n  min-height: 2em;\n  z-index: 1;\n"],["\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: ",";\n  min-height: 2em;\n  z-index: 1;\n"])),function(n){return n.theme.colors.backgroundLight}),x=o.div(s||(s=n(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n"],["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n"]))),k=o.input(b||(b=n(["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: ",";\n\n  ","\n"],["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: ",";\n\n  ","\n"])),function(n){return n.theme.spacing.xxs},function(o){var i=o.theme,t=o.disabled;return i.utilities.useDefaultFromControls?e(c||(c=n(["\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ",";\n        "],["\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ",";\n        "])),i.spacing.s):e(d||(d=n(["\n          position: absolute;\n          left: ",";\n          opacity: 0;\n\n          &:focus ~ "," {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ",";\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ "," ","::before {\n            background: ",";\n          }\n        "],["\n          position: absolute;\n          left: ",";\n          opacity: 0;\n\n          &:focus ~ "," {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ",";\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ "," ","::before {\n            background: ",";\n          }\n        "])),i.spacing.xxs,x,i.colors.inputBorder,g,u,t?i.colors.disabled:i.colors.check)});export{u as Check,g as CheckWrapper,x as SelectedBorder,k as StyledInput,f as StyledLabel,m as VerticalAlign};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import r from"styled-components";var e,i,o,a,t,d,s=r.div(e||(e=n(["\n  display: inline-block;\n  height: var(--_radio-size, 1.5rem);\n  width: var(--_radio-size, 1.5rem);\n  position: absolute;\n  top: calc(50% - (var(--_radio-size, 1.5rem) / 2));\n  left: var(--spacing-xs, 1rem);\n"],["\n  display: inline-block;\n  height: var(--_radio-size, 1.5rem);\n  width: var(--_radio-size, 1.5rem);\n  position: absolute;\n  top: calc(50% - (var(--_radio-size, 1.5rem) / 2));\n  left: var(--spacing-xs, 1rem);\n"]))),l=r.span(i||(i=n(['\n  display: block;\n  position: relative;\n  border: 2px solid var(--clr-selection-border, #666);\n  pointer-events: none;\n  border-radius: 100%;\n  height: var(--_radio-size, 1.5rem);\n  width: var(--_radio-size, 1.5rem);\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: "";\n    border-radius: 100%;\n    pointer-events: none;\n    height: var(--_radio-inner-size, 0.75rem);\n    width: var(--_radio-inner-size, 0.75rem);\n    top: calc(50% - (var(--_radio-inner-size, 0.75rem) / 2));\n    left: calc(50% - (var(--_radio-inner-size, 0.75rem) / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n'],['\n  display: block;\n  position: relative;\n  border: 2px solid var(--clr-selection-border, #666);\n  pointer-events: none;\n  border-radius: 100%;\n  height: var(--_radio-size, 1.5rem);\n  width: var(--_radio-size, 1.5rem);\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: "";\n    border-radius: 100%;\n    pointer-events: none;\n    height: var(--_radio-inner-size, 0.75rem);\n    width: var(--_radio-inner-size, 0.75rem);\n    top: calc(50% - (var(--_radio-inner-size, 0.75rem) / 2));\n    left: calc(50% - (var(--_radio-inner-size, 0.75rem) / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n']))),c=r.label(o||(o=n(['\n  --_radio-size: 1.5rem;\n  --_radio-inner-size: 0.75rem;\n  --_button-height: 3em;\n\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: var(--typ-line-height, 1.5em);\n  font-size: var(--font-size-base, 16px);\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n\n  background-color: var(--clr-background-light, #fff);\n  width: 100%;\n  position: relative;\n\n  cursor: ',";\n  display: inline-block;\n\n  color: ",";\n  padding: calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-m, 2rem)\n    calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-xl, 4rem);\n  vertical-align: middle;\n\n  min-height: 2rem;\n\n  "," "," {\n    border: solid 2px\n      ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n\n  &:hover "," "," {\n    border: solid 2px\n      ",";\n  }\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n"],['\n  --_radio-size: 1.5rem;\n  --_radio-inner-size: 0.75rem;\n  --_button-height: 3em;\n\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: var(--typ-line-height, 1.5em);\n  font-size: var(--font-size-base, 16px);\n  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);\n\n  background-color: var(--clr-background-light, #fff);\n  width: 100%;\n  position: relative;\n\n  cursor: ',";\n  display: inline-block;\n\n  color: ",";\n  padding: calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-m, 2rem)\n    calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-xl, 4rem);\n  vertical-align: middle;\n\n  min-height: 2rem;\n\n  "," "," {\n    border: solid 2px\n      ",";\n\n    &:before {\n      background-color: ",";\n    }\n  }\n\n  &:hover "," "," {\n    border: solid 2px\n      ",";\n  }\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n"])),function(n){return n.$disabled?"not-allowed":"pointer"},function(n){return n.$disabled?"var(--clr-disabled, #e6e6e6)":"var(--clr-text-dark, #000)"},s,l,function(n){var r=n.$disabled,e=n.$hasError,i=n.$checked;return r?"var(--clr-disabled, #e6e6e6)":e?"var(--clr-danger, #f00)":i?"var(--clr-check, #d5007d)":"var(--clr-input-border, #2e2d2c)"},function(n){return n.$checked?"var(--clr-check, #d5007d)":"rgba(255, 255, 255, 0)"},s,l,function(n){return n.$disabled?"var(--clr-disabled, #e6e6e6;)":"var(--clr-check, #d5007d)"}),b=r.span(a||(a=n(["\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: var(--clr-background-light, #fff);\n  min-height: 2em;\n  z-index: 1;\n"],["\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: var(--clr-background-light, #fff);\n  min-height: 2em;\n  z-index: 1;\n"]))),h=r.div(t||(t=n(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n"],["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n"]))),p=r.input(d||(d=n(["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: var(--spacing-xxs, 1rem);\n\n  position: absolute;\n  left: var(--spacing-xxs, 1rem);\n  opacity: 0;\n\n  &:focus ~ "," {\n    outline: none !important;\n    box-shadow: inset 0 0 0 2px var(--clr-input-border, #2e2c2d);\n    box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n  }\n\n  &:checked ~ "," ","::before {\n    background: ",";\n  }\n"],["\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: var(--spacing-xxs, 1rem);\n\n  position: absolute;\n  left: var(--spacing-xxs, 1rem);\n  opacity: 0;\n\n  &:focus ~ "," {\n    outline: none !important;\n    box-shadow: inset 0 0 0 2px var(--clr-input-border, #2e2c2d);\n    box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n  }\n\n  &:checked ~ "," ","::before {\n    background: ",";\n  }\n"])),h,s,l,function(n){return n.disabled?"var(--clr-disabled, #e6e6e6)":"var(--clr-check, #d5007d)"});export{l as Check,s as CheckWrapper,h as SelectedBorder,p as StyledInput,c as StyledLabel,b as VerticalAlign};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/Radio/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nconst RADIO_SIZE = \"1.5rem\";\nconst RADIO_INNER_SIZE = \"0.75rem\";\nconst BUTTON_HEIGHT = \"3em\";\n\nexport const CheckWrapper = styled.div<{\n  theme: ThemeType;\n}>`\n  display: inline-block;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  position: absolute;\n  top: calc(50% - (${RADIO_SIZE} / 2));\n  left: ${({\n    theme: {\n      spacing: { xs },\n    },\n  }) => xs};\n`;\n\nexport const Check = styled.span<{\n  theme: ThemeType;\n}>`\n  display: block;\n  position: relative;\n  border: 2px solid ${({ theme }) => theme.colors.selectionBorder};\n  pointer-events: none;\n  border-radius: 100%;\n  height: ${RADIO_SIZE};\n  width: ${RADIO_SIZE};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: \"\";\n    border-radius: 100%;\n    pointer-events: none;\n    height: ${RADIO_INNER_SIZE};\n    width: ${RADIO_INNER_SIZE};\n    top: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    left: calc(50% - (${RADIO_INNER_SIZE} / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $hasError: boolean;\n  $disabled: boolean;\n  $checked: boolean;\n  theme: ThemeType;\n}>`\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: ${({ theme }) => theme.typography.lineHeight};\n  font-size: ${({ theme }) => theme.typography.fontSizeBase};\n  font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  width: 100%;\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: inline-block;\n\n  color: ${({ theme, $disabled }) =>\n    $disabled ? theme.colors.disabled : theme.colors.textDark};\n  padding: ${({ theme }) =>\n    `calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.m} calc( (${BUTTON_HEIGHT} - ( ${theme.utilities.inputBorderWidth} * 2) - ${theme.typography.lineHeight} ) / 2) ${theme.spacing.xl}`};\n  vertical-align: middle;\n\n  ${({ theme, $disabled: isDisabled, $checked, $hasError }) =>\n    theme.utilities.useDefaultFromControls\n      ? null\n      : css`\n          min-height: 2rem;\n\n          ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled\n                ? theme.colors.disabled\n                : $hasError\n                  ? theme.colors.danger\n                  : $checked\n                    ? theme.colors.check\n                    : theme.colors.inputBorder};\n            &:before {\n              background-color: ${$checked\n                ? theme.colors.check\n                : `rgba(255, 255, 255, 0)`};\n            }\n          }\n\n          &:hover ${CheckWrapper} ${Check} {\n            border: solid 2px\n              ${isDisabled ? theme.colors.disabled : theme.colors.check};\n          }\n        `}\n  // increase font size for desktop\n  @media (min-width: ${({ theme }) => theme.breakpoint.desktopLarge}) {\n    font-size: ${({ theme }) => theme.fontSizes.ml};\n  }\n`;\n\nexport const VerticalAlign = styled.span<{\n  theme: ThemeType;\n}>`\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: ${({ theme }) => theme.colors.backgroundLight};\n  min-height: 2em;\n  z-index: 1;\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n`;\n\nexport const StyledInput = styled.input<{\n  disabled: boolean;\n  theme: ThemeType;\n}>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: ${({\n    theme: {\n      spacing: { xxs },\n    },\n  }) => xxs};\n\n  ${({ theme, disabled }) =>\n    theme.utilities.useDefaultFromControls\n      ? css`\n          position: absolute;\n          display: inline-block;\n          transform: translate(-50%, -50%);\n          top: 50%;\n          margin: 0;\n          padding: 0;\n          left: ${theme.spacing.s};\n        `\n      : css`\n          position: absolute;\n          left: ${theme.spacing.xxs};\n          opacity: 0;\n\n          &:focus ~ ${SelectedBorder} {\n            outline: none !important;\n            box-shadow: inset 0 0 0 2px ${theme.colors.inputBorder};\n            box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n          }\n\n          &:checked ~ ${CheckWrapper} ${Check}::before {\n            background: ${disabled\n              ? theme.colors.disabled\n              : theme.colors.check};\n          }\n        `}\n`;\n"],"names":["RADIO_SIZE","RADIO_INNER_SIZE","CheckWrapper","styled","div","templateObject_1","__makeTemplateObject","_a","theme","spacing","xs","Check","span","templateObject_2","colors","selectionBorder","StyledLabel","label","templateObject_4","typography","lineHeight","fontSizeBase","fontFamilyBase","backgroundLight","$disabled","disabled","textDark","concat","utilities","inputBorderWidth","m","xl","isDisabled","$checked","$hasError","useDefaultFromControls","css","templateObject_3","danger","check","inputBorder","breakpoint","desktopLarge","fontSizes","ml","VerticalAlign","templateObject_5","SelectedBorder","templateObject_6","StyledInput","input","templateObject_9","xxs","templateObject_7","s","templateObject_8"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/Radio/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const CheckWrapper = styled.div`\n  display: inline-block;\n  height: var(--_radio-size, 1.5rem);\n  width: var(--_radio-size, 1.5rem);\n  position: absolute;\n  top: calc(50% - (var(--_radio-size, 1.5rem) / 2));\n  left: var(--spacing-xs, 1rem);\n`;\n\nexport const Check = styled.span`\n  display: block;\n  position: relative;\n  border: 2px solid var(--clr-selection-border, #666);\n  pointer-events: none;\n  border-radius: 100%;\n  height: var(--_radio-size, 1.5rem);\n  width: var(--_radio-size, 1.5rem);\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  transition:\n    border 0.25s linear,\n    box-shadow 0.25s linear;\n\n  &:before {\n    display: block;\n    position: absolute;\n    content: \"\";\n    border-radius: 100%;\n    pointer-events: none;\n    height: var(--_radio-inner-size, 0.75rem);\n    width: var(--_radio-inner-size, 0.75rem);\n    top: calc(50% - (var(--_radio-inner-size, 0.75rem) / 2));\n    left: calc(50% - (var(--_radio-inner-size, 0.75rem) / 2));\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0);\n    transition: background-color 0.25s linear;\n  }\n`;\n\nexport const StyledLabel = styled.label<{\n  $hasError: boolean;\n  $disabled: boolean;\n  $checked: boolean;\n}>`\n  --_radio-size: 1.5rem;\n  --_radio-inner-size: 0.75rem;\n  --_button-height: 3em;\n\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  line-height: var(--typ-line-height, 1.5em);\n  font-size: var(--font-size-base, 16px);\n  font-family: var(--typ-font-family-base, \"Poppins\", Arial, sans-serif);\n\n  background-color: var(--clr-background-light, #fff);\n  width: 100%;\n  position: relative;\n\n  cursor: ${({ $disabled }) => ($disabled ? \"not-allowed\" : \"pointer\")};\n  display: inline-block;\n\n  color: ${({ $disabled }) =>\n    $disabled ? \"var(--clr-disabled, #e6e6e6)\" : \"var(--clr-text-dark, #000)\"};\n  padding: calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-m, 2rem)\n    calc(\n      (\n          var(--_button-height, 3em) -\n            (var(--size-border-width, 1px) * 2) - var(--typ-line-height, 1.5em)\n        ) /\n        2\n    )\n    var(--spacing-xl, 4rem);\n  vertical-align: middle;\n\n  min-height: 2rem;\n\n  ${CheckWrapper} ${Check} {\n    border: solid 2px\n      ${({ $disabled, $hasError, $checked }) =>\n        $disabled\n          ? \"var(--clr-disabled, #e6e6e6)\"\n          : $hasError\n            ? \"var(--clr-danger, #f00)\"\n            : $checked\n              ? \"var(--clr-check, #d5007d)\"\n              : \"var(--clr-input-border, #2e2d2c)\"};\n\n    &:before {\n      background-color: ${({ $checked }) =>\n        $checked ? \"var(--clr-check, #d5007d)\" : `rgba(255, 255, 255, 0)`};\n    }\n  }\n\n  &:hover ${CheckWrapper} ${Check} {\n    border: solid 2px\n      ${({ $disabled }) =>\n        $disabled\n          ? \"var(--clr-disabled, #e6e6e6;)\"\n          : \"var(--clr-check, #d5007d)\"};\n  }\n\n  // increase font size for desktop\n  @media (min-width: 1200px) {\n    font-size: var(--font-size-ml, 1.125rem);\n  }\n`;\n\nexport const VerticalAlign = styled.span`\n  display: inline;\n  vertical-align: middle;\n  line-height: 100%;\n  background-color: var(--clr-background-light, #fff);\n  min-height: 2em;\n  z-index: 1;\n`;\n\nexport const SelectedBorder = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0);\n  z-index: 0;\n`;\n\nexport const StyledInput = styled.input<{\n  disabled: boolean;\n}>`\n  *,\n  *:after,\n  *:before {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n  }\n  margin-right: var(--spacing-xxs, 1rem);\n\n  position: absolute;\n  left: var(--spacing-xxs, 1rem);\n  opacity: 0;\n\n  &:focus ~ ${SelectedBorder} {\n    outline: none !important;\n    box-shadow: inset 0 0 0 2px var(--clr-input-border, #2e2c2d);\n    box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;\n  }\n\n  &:checked ~ ${CheckWrapper} ${Check}::before {\n    background: ${({ disabled }) =>\n      disabled ? \"var(--clr-disabled, #e6e6e6)\" : \"var(--clr-check, #d5007d)\"};\n  }\n`;\n"],"names":["CheckWrapper","styled","div","templateObject_1","__makeTemplateObject","Check","span","templateObject_2","StyledLabel","label","templateObject_3","_a","$disabled","$hasError","$checked","VerticalAlign","templateObject_4","SelectedBorder","templateObject_5","StyledInput","input","templateObject_6","disabled"],"mappings":"iHAEO,gBAAMA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,4NAAA,CAAA,+NASzBC,EAAQJ,EAAOK,KAAIC,IAAAA,EAAAH,EAAA,CAAA,w0BAAA,CAAA,20BAiCnBI,EAAcP,EAAOQ,MAAKC,IAAAA,EAAAN,EAAA,CAAA,2cAAA,2CAAA,qdAAA,IAAA,oCAAA,gDAAA,8BAAA,IAAA,oCAAA,uIAAA,CAIrC,2cAmBoE,2CAIO,qdAqB7D,IAAS,oCASyB,gDAIuB,8BAIjD,IAAS,oCAKM,yIA/C3B,SAACO,GAAkB,OAAPA,EAAAC,UAAoB,cAAgB,SAA7B,EAGpB,SAACD,GACR,OADmBA,EAAAC,UACP,+BAAiC,4BAA7C,EAqBAZ,EAAgBK,EAEZ,SAACM,GAAE,IAAAC,cAAWC,EAASF,EAAAE,UAAEC,EAAQH,EAAAG,SACjC,OAAAF,EACI,+BACAC,EACE,0BACAC,EACE,4BACA,kCANR,EASkB,SAACH,GACnB,OAD6BA,EAAAG,SAClB,4BAA8B,wBAAzC,EAIId,EAAgBK,EAEpB,SAACM,GACD,OADYA,EAAAC,UAER,gCACA,2BAFJ,GAWKG,EAAgBd,EAAOK,KAAIU,IAAAA,EAAAZ,EAAA,CAAA,sKAAA,CAAA,yKAS3Ba,EAAiBhB,EAAOC,IAAGgB,IAAAA,EAAAd,EAAA,CAAA,iJAAA,CAAA,oJAU3Be,EAAclB,EAAOmB,MAAKC,IAAAA,EAAAjB,EAAA,CAAA,kRAAA,yLAAA,IAAA,+BAAA,YAAA,CAErC,kRAc0B,yLAMA,IAAS,+BAEwC,cAR/Da,EAMEjB,EAAgBK,EACd,SAACM,GACb,OADuBA,EAAAW,SACZ,+BAAiC,2BAA5C"}

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

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as n,ThemeProvider as r}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{Radio as l}from"../Radio/index.js";import{StyledFieldSet as m,StyledLegend as a,OptionWrapper as s}from"./styles.js";function u(u){var i=n(),c=e(e({},o),i),d=u.legend,p=u.attributes,f=u.onChange,v=u.selectedValue,h=void 0===v?"":v,E=u.name;return t.createElement(r,{theme:c},t.createElement(m,null,t.createElement(a,null,d),t.createElement(s,null,p.map(function(e){return t.createElement(l,{key:e.value,checked:h===e.value,onChange:f,name:E,value:e.value},e.option)}))))}export{u as RadioConsent,u as default};
+import e from"react";import{Radio as t}from"../Radio/index.js";import{StyledFieldSet as n,StyledLegend as a,OptionWrapper as l}from"./styles.js";function r(r){var o=r.legend,u=r.attributes,m=r.onChange,c=r.selectedValue,i=void 0===c?"":c,d=r.name;return e.createElement(n,null,e.createElement(a,null,o),e.createElement(l,null,u.map(function(n){return e.createElement(t,{key:n.value,checked:i===n.value,onChange:m,name:d,value:n.value},n.option)})))}export{r as RadioConsent,r as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/RadioConsent/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme, ThemeProvider } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport StyledRadio from \"../Radio\";\nimport { StyledFieldSet, StyledLegend, OptionWrapper } from \"./styles\";\n\ntype Attribute = {\n  value: string;\n  option: string;\n};\n\nexport type RadioConsentProps = {\n  /** because each radio has its own label this is the consent group label text */\n  legend: string;\n  /** array of option for radio constent group where option is the option name and value is the option value  */\n  attributes: Attribute[];\n  /** on change handler callback passed change event */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** set the value of selected option */\n  selectedValue?: string;\n  /** name of field this is what groups all the options together */\n  name: string;\n};\n\n/**\n *\n * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.\n *\n * This is always a controlled component that will only change state with the selectedValue prop\n */\nexport function RadioConsent(props: RadioConsentProps) {\n  const foundTheme = useTheme();\n  const theme = {\n    ...defaultTheme,\n    ...foundTheme,\n  };\n  const { legend, attributes, onChange, selectedValue = \"\", name } = props;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <StyledFieldSet>\n        <StyledLegend>{legend}</StyledLegend>\n        <OptionWrapper>\n          {attributes.map((item: Attribute) => (\n            <StyledRadio\n              key={item.value}\n              checked={selectedValue === item.value}\n              onChange={onChange}\n              name={name}\n              value={item.value}\n            >\n              {item.option}\n            </StyledRadio>\n          ))}\n        </OptionWrapper>\n      </StyledFieldSet>\n    </ThemeProvider>\n  );\n}\n\nexport default RadioConsent;\n"],"names":["RadioConsent","props","foundTheme","useTheme","theme","__assign","defaultTheme","legend","attributes","onChange","_a","selectedValue","name","React","createElement","ThemeProvider","StyledFieldSet","StyledLegend","OptionWrapper","map","item","StyledRadio","key","value","checked","option"],"mappings":"sUA+BM,SAAUA,EAAaC,GAC3B,IAAMC,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAEGK,EAA2DN,EAAKM,OAAxDC,EAAmDP,EAAKO,WAA5CC,EAAuCR,EAAKQ,SAAlCC,EAA6BT,EAAKU,cAAlCA,OAAa,IAAAD,EAAG,GAAEA,EAAEE,EAASX,EAAKW,KAExE,OACEC,EAAAC,cAACC,EAAa,CAACX,MAAOA,GACpBS,EAAAC,cAACE,EAAc,KACbH,EAAAC,cAACG,EAAY,KAAEV,GACfM,EAAAC,cAACI,EAAa,KACXV,EAAWW,IAAI,SAACC,GAAoB,OACnCP,EAAAC,cAACO,EAAW,CACVC,IAAKF,EAAKG,MACVC,QAASb,IAAkBS,EAAKG,MAChCd,SAAUA,EACVG,KAAMA,EACNW,MAAOH,EAAKG,OAEXH,EAAKK,OAR2B,KAe/C"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/RadioConsent/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport StyledRadio from \"../Radio\";\nimport { StyledFieldSet, StyledLegend, OptionWrapper } from \"./styles\";\n\ntype Attribute = {\n  value: string;\n  option: string;\n};\n\nexport type RadioConsentProps = {\n  /** because each radio has its own label this is the consent group label text */\n  legend: string;\n  /** array of option for radio constent group where option is the option name and value is the option value  */\n  attributes: Attribute[];\n  /** on change handler callback passed change event */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** set the value of selected option */\n  selectedValue?: string;\n  /** name of field this is what groups all the options together */\n  name: string;\n};\n\n/**\n *\n * RadioConsent is a component for showing a bunch of yes/no radios predominantly used for notification selections where a unselected state is usefull for analytics.\n *\n * This is always a controlled component that will only change state with the selectedValue prop\n */\nexport function RadioConsent(props: RadioConsentProps) {\n  const { legend, attributes, onChange, selectedValue = \"\", name } = props;\n\n  return (\n    <StyledFieldSet>\n      <StyledLegend>{legend}</StyledLegend>\n      <OptionWrapper>\n        {attributes.map((item: Attribute) => (\n          <StyledRadio\n            key={item.value}\n            checked={selectedValue === item.value}\n            onChange={onChange}\n            name={name}\n            value={item.value}\n          >\n            {item.option}\n          </StyledRadio>\n        ))}\n      </OptionWrapper>\n    </StyledFieldSet>\n  );\n}\n\nexport default RadioConsent;\n"],"names":["RadioConsent","props","legend","attributes","onChange","_a","selectedValue","name","React","StyledFieldSet","createElement","StyledLegend","OptionWrapper","map","item","StyledRadio","key","value","checked","option"],"mappings":"iJA6BM,SAAUA,EAAaC,GACnB,IAAAC,EAA2DD,EAAKC,OAAxDC,EAAmDF,EAAKE,WAA5CC,EAAuCH,EAAKG,SAAlCC,EAA6BJ,EAAKK,cAAlCA,OAAa,IAAAD,EAAG,GAAEA,EAAEE,EAASN,EAAKM,KAExE,OACEC,gBAACC,EAAc,KACbD,EAAAE,cAACC,EAAY,KAAET,GACfM,EAAAE,cAACE,EAAa,KACXT,EAAWU,IAAI,SAACC,GAAoB,OACnCN,EAAAE,cAACK,EAAW,CACVC,IAAKF,EAAKG,MACVC,QAASZ,IAAkBQ,EAAKG,MAChCb,SAAUA,EACVG,KAAMA,EACNU,MAAOH,EAAKG,OAEXH,EAAKK,OAR2B,IAc7C"}

package/lib/src/components/RadioConsent/styles.d.ts

@@ -1,10 +1,3 @@
-import { type ThemeType } from "../../types";
-export declare const StyledLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {
-    theme: ThemeType;
-}>> & string;
-export declare const StyledFieldSet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {
-    theme: ThemeType;
-}>> & string;
-export declare const OptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: ThemeType;
-}>> & string;
+export declare const StyledLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+export declare const StyledFieldSet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
+export declare const OptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;