npm - @cruk/cruk-react-components - Versions diffs - 6.0.3 → 6.1.0 - Mend

@cruk/cruk-react-components 6.0.3 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (356) hide show

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

	@@ -1 +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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"}
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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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n ProgressBarWrapper,\n CircularWrapper,\n CircleSvg,\n EmptyCircle,\n FullCircle,\n CircularValue,\n LineProgressBarWrapper,\n LineProgressBar,\n ScreenReaderOnly,\n} from \"./styles\";\n\nconst DEFAULT_CIRCLE_SIZE = \"90px\";\n\nexport type ProgressBarProps = {\n /** percentage value of the progressbar /\n percentage: number;\n /* percentage value of a secondary (highter) amount of the progressbar /\n secondaryPercentage?: number;\n /* flag which converts line bar to donut chart /\n isCircular?: boolean;\n /* contents inside the donut chart /\n circleContents?: ReactNode;\n /* diameter of the donut chart /\n circleSize?: string;\n /* foreground colour of chart bar /\n barColor?: string;\n /* foreground colour of chart secondary bar /\n secondaryBarColor?: string;\n children?: ReactNode;\n};\n\n/\n Provide up-to-date feedback on the progress of a workflow or action with\nsimple yet flexible progress bars.\n/\nexport function ProgressBar({\n percentage = 0,\n isCircular,\n circleContents,\n circleSize,\n barColor,\n secondaryBarColor,\n secondaryPercentage,\n children,\n}: ProgressBarProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const percentageNumber = !Number.isNaN(percentage) ? percentage : 0;\n const percentageLimited = percentageNumber > 100 ? 100 : percentageNumber;\n const percentString = `${percentageNumber}%`;\n\n const secondaryPercentageNumber =\n secondaryPercentage && !Number.isNaN(secondaryPercentage)\n ? secondaryPercentage\n : 0;\n\n const secondaryPercentageLimited =\n secondaryPercentageNumber > 100 ? 100 : secondaryPercentageNumber;\n\n const descriptivePercentageString = `${\n typeof circleContents === \"string\" ? circleContents : \"\"\n } ${percentString}% Complete`;\n const textOrPercentString = circleContents \|\| percentString;\n\n const strokeWidth = 6;\n const d = 128;\n const r = d / 2 - strokeWidth;\n const c = 2 Math.PI * r;\n\n return (\n <ThemeProvider theme={theme}>\n <ProgressBarWrapper>\n {isCircular ? (\n <CircularWrapper $circleSize={circleSize \|\| DEFAULT_CIRCLE_SIZE}>\n <CircleSvg viewBox={`0 0 ${d} ${d}`}>\n <EmptyCircle\n cx={r + strokeWidth}\n cy={r + strokeWidth}\n r={r}\n strokeWidth={strokeWidth}\n />\n <FullCircle\n $isSecondary\n $barColor={secondaryBarColor}\n cx={r + strokeWidth}\n cy={r + strokeWidth}\n r={r}\n strokeWidth={strokeWidth}\n strokeDasharray={c}\n strokeDashoffset={c * (1 - secondaryPercentageLimited / 100)}\n $strokeDashoffsetInit={c}\n />\n\n <FullCircle\n $barColor={barColor}\n cx={r + strokeWidth}\n cy={r + strokeWidth}\n r={r}\n strokeWidth={strokeWidth}\n strokeDasharray={c}\n strokeDashoffset={c * (1 - percentageLimited / 100)}\n $strokeDashoffsetInit={c}\n />\n </CircleSvg>\n <CircularValue>{textOrPercentString}</CircularValue>\n </CircularWrapper>\n ) : (\n <LineProgressBarWrapper\n $percentage={percentageLimited}\n $secondaryPercentage={secondaryPercentageLimited}\n >\n <LineProgressBar\n $isSecondary\n $percentage={secondaryPercentageLimited}\n $barColor={secondaryBarColor}\n />\n\n <LineProgressBar\n $percentage={percentageLimited}\n $barColor={barColor}\n />\n <ScreenReaderOnly>{descriptivePercentageString}</ScreenReaderOnly>\n </LineProgressBarWrapper>\n )}\n {children}\n </ProgressBarWrapper>\n </ThemeProvider>\n );\n}\n\nexport default ProgressBar;\n"],"names":["ProgressBar","_a","_b","percentage","isCircular","circleContents","circleSize","barColor","secondaryBarColor","secondaryPercentage","children","foundTheme","useTheme","theme","__assign","defaultTheme","percentageNumber","Number","isNaN","percentageLimited","percentString","concat","secondaryPercentageNumber","secondaryPercentageLimited","descriptivePercentageString","textOrPercentString","r","d","c","Math","PI","React","createElement","ThemeProvider","ProgressBarWrapper","CircularWrapper","$circleSize","CircleSvg","viewBox","EmptyCircle","cx","cy","strokeWidth","FullCircle","$isSecondary","$barColor","strokeDasharray","strokeDashoffset","$strokeDashoffsetInit","CircularValue","LineProgressBarWrapper","$percentage","LineProgressBar","ScreenReaderOnly"],"mappings":"0ZAyCM,SAAUA,EAAYC,OAC1BC,~~EAAcD~~,EAAAE,~~WAAdA~~,OAAU,IAAAD,EAAG,EAACA,EACdE,EAAUH,EAAAG,WACVC,EAAcJ,EAAAI,eACdC,EAAUL,EAAAK,WACVC,EAAQN,EAAAM,SACRC,EAAiBP,EAAAO,kBACjBC,EAAmBR,EAAAQ,oBACnBC,EAAQT,EAAAS,SAEFC,EAAaC,IACbC,~~EACDC~~,EAAAA,EAAA,CAAA,~~EAAAC~~,GACAJ,GAECK,EAAoBC,OAAOC,MAAMf,GAA2B,EAAbA,EAC/CgB,EAAoBH,EAAmB,IAAM,IAAMA,EACnDI,EAAgB,~~GAAGC~~,~~OAAAL~~,OAEnBM,EACJb,IAAwBQ,OAAOC,MAAMT,GACjCA,EACA,EAEAc,EACJD,EAA4B,IAAM,IAAMA,EAEpCE,EAA8B,GAAAH,OACR,iBAAnBhB,EAA8BA,EAAiB,~~GACpD~~,KAAAgB,~~OAAAD~~,gBACEK,EAAsBpB,GAAkBe,EAIxCM,EAAIC,GACJC,EAAI,EAAIC,KAAKC,GAAKJ,EAExB,OACEK,~~EAACC~~,~~cAAAC~~,~~EAAc~~,~~CAAApB~~,MAAOA,GACpBkB,EAAAC,cAACE,EAAkB,KAChB9B,EACC2B,gBAACI,EAAe,CAAAC,YAAc9B,GAjEZ,QAkEhByB,~~EAACC~~,~~cAAAK~~,GAAUC,QAAS,cATpB,IAS4B,KAAAjB,OAT5B,MAUEU,~~EAACC~~,~~cAAAO~~,GACCC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAfM,IAiBRX,EAAAC,cAACW,~~EAEY~~,CAAAC,cAAA,EAAAC,~~UAAArC~~,EACXgC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAvBM,EAwBNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIL,EAA6B,KAAIyB,sBACrCpB,IAGzBG,EAAAC,cAACW,~~EACY~~,CAAAE,~~UAAAtC~~,EACXiC,GAAId,GACJe,GAAIf,GACJA,EAAGA,EACHgB,YAlCM,EAmCNI,gBAAiBlB,EACjBmB,iBAAkBnB,GAAK,EAAIT,EAAoB,~~KACxB6B~~,~~sBAAApB~~,KAG3BG,EAAAC,cAACiB,EAAa,KAAExB,IAGlBM,~~EAACC~~,~~cAAAkB~~,~~EACc~~,CAAAC,~~YAAAhC~~,uBACSI,GAEtBQ,EAAAC,cAACoB,EAAe,CAAAR,cAAA,EAAAO,YAED5B,EAA0BsB,UAC5BrC,IAGbuB,EAAAC,cAACoB,EAAe,CAAAD,YACDhC,EAAiB0B,UACnBtC,IAEbwB,EAAAC,cAACqB,EAAgB,KAAE7B,IAGtBd,GAIT"}
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"}

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

@@ -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 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};
 //# sourceMappingURL=styles.js.map

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

	@@ -1 +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":"0IAGA,kCAAMA,EAAa,OAkCbC,EAA0B,WAAM,OAAAC,EAASC,IAAAA,EAAAC,EAAA,CAAA,gMAAA,CAAA,kMAe9C,EAEKC,EAAwB,WAAM,OAAAH,EAASI,IAAAA,EAAAF,EAAA,CAAA,sLAAA,CAAA,wLAa5C,EAEYG,EAAqBC,EAAOC,IAAGC,IAAAA,EAAAN,EAAA,CAAA,mBAAA,OAAA,CAAA,mBAClB,SAAVJ,GAGHW,EAAyBH,EAAOC,~~IAI3CG~~,IAAAA,EAAAR,EAAA,CAAA,sCAAA,+CAAA,6DAAA,MAAA,~~CAAA~~,sCAEoB,+CAMO,6DAOxB,QAbOJ,~~GAEU~~,SAACa,GAIf,OAF6BA,EAAAC,MAAAC,OAAAC,qBAE7B,~~IAGJ~~,SAACH,OAAEI,EAAWJ,EAAAI,YAAEC,EAAoBL,EAAAK,qBACpC,OAAiB,MAAhBD,GAAgD,MAAzBC,IACxBC,EAAGC,IAAAA,EAAAhB,EAAA,CAAA,sBAAA,gCAAA,CAAA,sBACiC,kCAArBC,EAFf,~~IAMSgB~~,EAAkBb,EAAOC,~~IAKpCa~~,IAAAA,EAAAlB,EAAA,CAAA,kDAAA,0BAAA,kGAAA,kTAAA,YAAA,WAAA,~~CAAA~~,kDAGoB,0BAIU,kGAGW,kTAsB+B,YAMnE,aAnCKJ,~~GACU~~,SAACa,GAAE,IAAAU,cAAWC,EAAYX,EAAAW,aAAEV,EAAKD,EAAAC,MACnD,OAAES,GAAeC,EACbV,EAAMC,OAAOU,qBACbX,EAAMC,OAAOW,WAFjB,~~IAKO~~,SAACb,GAAoB,OAAPA,EAAAI,WAAO,~~IAgBR~~,SAACJ,OACnBU,EAASV,EAAAU,UACTC,EAAYX,EAAAW,aAEVG,~~EAA6Cd~~,EAAAC,MAAAC,~~OAAnCW~~,EAAWC,EAAAD,YAAED,EAAoBE,EAAAF,qBAEzC,OAACF,GAAaC,EAAeC,EAAuBC,CAApD,~~IAEJ~~,SAACb,GACD,OAAgB,MADFA,EAAAI,aAEdE,EAAGS,IAAAA,EAAAxB,EAAA,CAAA,wBAAA,mCAAA,CAAA,wBACmC,qCAAvBH,EAFf,~~IAOO4B~~,EAAmBrB,EAAOsB,KAAIC,IAAAA,EAAA3B,EAAA,CAAA,0JAAA,CAAA,6JAW9B4B,EAAkBxB,EAAOC,~~IAGpCwB~~,IAAAA,EAAA7B,EAAA,CAAA,qCAAA,gBAAA,oEAAA,~~CAAA~~,qCAEyC,gBACC,~~uEADjC~~,SAACS,GAAoB,OAAPA,EAAAqB,WAAO,~~IACpB~~,SAACrB,GAAoB,OAAPA,EAAAqB,WAAO,~~IAMpBC~~,EAAY3B,EAAO4B,IAAGC,IAAAA,EAAAjC,EAAA,CAAA,qIAAA,CAAA,wIAStBkC,EAAc9B,EAAO+B,OAAMC,IAAAA,EAAApC,EAAA,CAAA,eAAA,OAAA,CAEtC,eACmD,~~UAAzC~~,SAACS,GAAc,OAAPA,EAAAC,MAAa2B,YAAYC,QAAlB,~~IAGdC~~,EAAanC,EAAO+B,~~OAM/BK~~,IAAAA,EAAAxC,EAAA,CAAA,eAAA,mBAAA,sBAAA,~~CAAA~~,eAQ0E,mBAOF,~~yBAd9D~~,SAACS,OACTW,EAAYX,EAAAW,aACZD,EAASV,EAAAU,UAEPI,~~EAAuDd~~,EAAAC,MAAAC,~~OAA7C8B~~,EAAgBlB,EAAAkB,iBAAEC,EAAyBnB,EAAAmB,0BAGvD,OAAAvB,GAAaC,EAAesB,EAA4BD,CAAxD,~~IACW~~,SAAChC,GAAE,IAAAW,iBAAcuB,EAAgBlC,EAAAkC,iBAAEC,EAAqBnC,EAAAmC,sBACjE,OAAAxB,EA3K+B,SAACX,OACpCmC,EAAqBnC,EAAAmC,sBACrBD,EAAgBlC,EAAAkC,iBACuB,OAAA7C,EAAS+C,IAAAA,EAAA7C,EAAA,CAAA,qCAAA,8CAAA,aAAA,CAAA,qCAEH,8CAGL,eAHhB4C,EAGAD,EALe,CAyK/BG,CAA6B,CAC3BH,iBAAgBA,EAChBC,sBAAqBA,IA7LL,SAACnC,OAC3BmC,EAAqBnC,EAAAmC,sBACrBD,EAAgBlC,EAAAkC,iBACuB,OAAA7C,EAASiD,IAAAA,EAAA/C,EAAA,CAAA,qCAAA,6CAAA,8CAAA,aAAA,CAAA,qCAEH,6CAGL,8CAGA,eANhB4C,EAGAD,EAGAA,EARe,CA4L/BK,CAAoB,CAAEL,mBAAkBC,sBAAqBA,GALjE,~~IASOK~~,EAAgB7C,EAAOC,IAAG6C,IAAAA,EAAAlD,EAAA,CAAA,6MAAA,qBAAA,uDAAA,OAAA,CAErC,6MAeO,qBAKA,uDAOO,~~UAhBD~~,SAACS,GAIR,OAFYA,EAAAC,MAAAyC,UAAAC,CAEZ,~~IACS~~,SAAC3C,GAIV,OAFYA,EAAAC,MAAAyC,UAAAC,CAEZ,~~IAGG~~,SAAC3C,GAIJ,OAFgBA,EAAAC,MAAAC,OAAA0C,QAEhB"}
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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"}

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

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

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

	@@ -1 +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,~~EACDC~~,EAAAA,EAAA,CAAA,~~EAAAC~~,GACAJ,GAGsDD,~~EAA3CM~~,~~SAA2CN~~,EAAKO,SAALP,~~eAAjB~~,~~IAAAQ~~,EAAiBR,~~EAAdQ~~,~~IAAKC~~,EAAIC,EAAKV,EAArD,~~CAAkD~~,WAAA,WAAA,eAAA,~~QACxD~~,OACEW,~~EAACC~~,~~cAAAC~~,~~EAAc~~,~~CAAAV~~,MAAOA,GACpBQ,EAAAC,cAACE,EAAW,CAAAC,UACCf,EAAMO,YAAcP,EAAMgB,eAAgB,EACrDC,UAAWjB,EAAMiB,~~UACPC~~,~~SAAAlB~~,EAAMmB,UAAW,~~EAChBC~~,~~UAAApB~~,EAAMqB,WAAY,GAE7BV,EAAAC,cAACU,~~EACKlB~~,EAAA,CAAA,~~EAAAK~~,GACJY,SAAUrB,EAAMqB,WAAY,EAC5BE,KAAK,QACLf,IAAKA,~~EAEH~~,~~mBAAER~~,EAAMwB,IAAQxB,EAAMgB,aAAe,~~GAAGS~~,~~OAAAzB~~,EAAMwB,GAAE,eAAWE,KAG/Df,EAAAC,cAACe,~~EAAiB~~,~~MACjBxB~~,EAAMyB,UAAUC,uBAAyB,KACxClB,gBAACmB,EAAY,KACXnB,~~EAACC~~,~~cAAAmB~~,~~EAAQ~~,~~OAGbpB~~,~~EAACC~~,~~cAAAoB~~,~~EAAe~~,~~KAAAhC~~,EAAMM,UAAYN,EAAMiC,UAEvCjC,EAAMgB,cACPL,~~EAACC~~,~~cAAAsB~~,~~EACC~~,~~CAAAC~~,UAAU,MACVX,GAAIxB,EAAMwB,GAAK,UAAGxB,EAAMwB,GAAE,eAAWE,GAEpC1B,EAAMgB,cAKjB"}
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"}

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

@@ -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"],["\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"])),(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)})),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 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"],["\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"])),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)}),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};
 //# sourceMappingURL=styles.js.map

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

	@@ -1 +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`;\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","VerticalAlign","templateObject_5","SelectedBorder","templateObject_6","StyledInput","input","templateObject_9","xxs","templateObject_7","s","templateObject_8"],"mappings":"2HAGA,sBAAMA,EAAa,SACbC,EAAmB,UAGZC,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yCAAA,eAAA,gDAAA,oBAAA,OAAA,CAEpC,yCAEoB,eACD,gDAEU,oBAKrB,SAREN,EACDA,EAEUA,~~GACX~~,SAACO,GAIH,OAFWA,EAAAC,MAAAC,QAAAC,EAEX,~~IAGKC~~,EAAQR,EAAOS,KAAIC,IAAAA,EAAAP,EAAA,CAAA,mEAAA,iEAAA,eAAA,+RAAA,iBAAA,2BAAA,kCAAA,oIAAA,CAE9B,mEAG+D,iEAG3C,eACD,+RAgBS,iBACD,2BACU,kCACC,~~uIAvBlB~~,SAACC,GAAc,OAAPA,EAAAC,MAAaM,OAAOC,eAAb,~~GAGzBf~~,EACDA,EAgBGC,EACDA,EACUA,EACCA,GAOXe,EAAcb,EAAOc,~~MAKhCC~~,IAAAA,EAAAZ,EAAA,CAAA,iHAAA,mBAAA,qBAAA,4BAAA,yDAAA,2CAAA,iBAAA,qCAAA,MAAA,~~CAAA~~,iHAOyD,mBACA,qBACI,4BAEE,yDAIK,2CAIT,iBAEyM,qCA6B7P,~~SA3CQ~~,SAACC,GAAc,OAAPA,EAAAC,MAAaW,WAAWC,UAAjB,~~IACjB~~,SAACb,GAAc,OAAPA,EAAAC,MAAaW,WAAWE,YAAjB,~~IACb~~,SAACd,GAAc,OAAPA,EAAAC,MAAaW,WAAWG,cAAjB,~~IAEV~~,SAACf,GAAc,OAAPA,EAAAC,MAAaM,OAAOS,eAAb,~~IAIzB~~,SAAChB,GAAkB,OAAPA,EAAAiB,UAAoB,cAAgB,SAA7B,~~IAGpB~~,SAACjB,OAAEC,EAAKD,EAAAC,MACf,OAD0BD,EAAAiB,UACdhB,EAAMM,OAAOW,SAAWjB,EAAMM,OAAOY,QAAjD,~~IACS~~,SAACnB,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBA9EkB,MA8EK,SAAAmB,OAAQnB,EAAMoB,UAAUC,iBAAgB,YAAAF,OAAWnB,EAAMW,WAAWC,8BAAqBZ,EAAMC,QAAQqB,~~EAAY~~,YAAAH,~~OA9ExH~~,sBA8E6InB,EAAMoB,UAAUC,oCAA2BrB,EAAMW,WAAWC,~~WAAqB~~,YAAAO,~~OAAAnB~~,EAAMC,QAAQsB,GAA9P,~~IAGA~~,SAACxB,OAAEC,EAAKD,EAAAC,MAAawB,EAAUzB,EAAAiB,UAAES,EAAQ1B,EAAA0B,SAAEC,EAAS3B,EAAA2B,UACpD,OAAA1B,EAAMoB,UAAUO,uBACZ,KACAC,EAAGC,IAAAA,EAAA/B,EAAA,CAAA,8CAAA,IAAA,oDAAA,8DAAA,sDAAA,IAAA,oDAAA,4BAAA,CAAA,8CAGa,IAAS,oDAQa,8DAIJ,sDAIV,IAAS,oDAE8B,8BAlB3DJ,EAAgBS,EAEZqB,EACExB,EAAMM,OAAOW,SACbS,EACE1B,EAAMM,OAAOwB,OACbL,EACEzB,EAAMM,OAAOyB,MACb/B,EAAMM,OAAO0B,YAEDP,EAChBzB,EAAMM,OAAOyB,MACb,yBAIErC,EAAgBS,EAEpBqB,EAAaxB,EAAMM,OAAOW,SAAWjB,EAAMM,OAAOyB,MAvB9D,~~IA4BSE~~,EAAgBtC,EAAOS,KAAI8B,IAAAA,EAAApC,EAAA,CAAA,8FAAA,0CAAA,CAEtC,8FAI+D,~~6CAA3C~~,SAACC,GAAc,OAAPA,EAAAC,MAAaM,OAAOS,eAAb,~~IAKxBoB~~,EAAiBxC,EAAOC,IAAGwC,IAAAA,EAAAtC,EAAA,CAAA,iJAAA,CAAA,oJAU3BuC,EAAc1C,EAAO2C,~~MAGhCC~~,IAAAA,EAAAzC,EAAA,CAAA,8JAAA,UAAA,MAAA,~~CAAA~~,8JAYS,UA6BF,~~SAjCS~~,SAACC,GAIX,OAFYA,EAAAC,MAAAC,QAAAuC,GAEZ,~~IAEJ~~,SAACzC,OAAEC,EAAKD,EAAAC,MAAEiB,EAAQlB,EAAAkB,SAClB,OAAAjB,EAAMoB,UAAUO,uBACZC,EAAGa,IAAAA,EAAA3C,EAAA,CAAA,qMAAA,eAAA,CAAA,qMAOsB,iBAAfE,EAAMC,QAAQyC,GAExBd,EAAGe,IAAAA,EAAA7C,EAAA,CAAA,oDAAA,mDAAA,sFAAA,8GAAA,IAAA,uCAAA,4BAAA,CAAA,oDAEwB,mDAGC,sFAE8B,8GAI9B,IAAS,uCAGX,8BAZhBE,EAAMC,QAAQuC,IAGVL,EAEoBnC,EAAMM,OAAO0B,YAI/BtC,EAAgBS,EACdc,EACVjB,EAAMM,OAAOW,SACbjB,EAAMM,OAAOyB,MAxBzB"}
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`;\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","VerticalAlign","templateObject_5","SelectedBorder","templateObject_6","StyledInput","input","templateObject_9","xxs","templateObject_7","s","templateObject_8"],"mappings":"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"}

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

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

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

@@ -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 l}from"../../themes/cruk.js";import{StyledFieldSet as m,StyledLegend as o,StyledRadio as a}from"./styles.js";function u(u){var s=n(),i=e(e({},l),s),c=u.legend,f=u.attributes,p=u.onChange,d=u.selectedValue,h=void 0===d?"":d,v=u.name;return t.createElement(r,{theme:i},t.createElement(m,null,t.createElement(o,null,c),f.map((function(e){return t.createElement(a,{$numberOfAttributes:f.length||0,key:e.value,checked:h===e.value,onChange:p,name:v,value:e.value},e.option)}))))}export{u as RadioConsent,u as default};
+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 l}from"../../themes/cruk.js";import{StyledFieldSet as m,StyledLegend as o,StyledRadio as a}from"./styles.js";function u(u){var s=n(),i=e(e({},l),s),c=u.legend,f=u.attributes,p=u.onChange,d=u.selectedValue,h=void 0===d?"":d,v=u.name;return t.createElement(r,{theme:i},t.createElement(m,null,t.createElement(o,null,c),f.map(function(e){return t.createElement(a,{$numberOfAttributes:f.length||0,key:e.value,checked:h===e.value,onChange:p,name:v,value:e.value},e.option)})))}export{u as RadioConsent,u as default};
 //# sourceMappingURL=index.js.map

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

	@@ -1 +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\";\n\nimport { StyledFieldSet, StyledLegend, StyledRadio } 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 {attributes.map((item: Attribute) => (\n <StyledRadio\n $numberOfAttributes={attributes.length \|\| 0}\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 </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","map","item","StyledRadio","$numberOfAttributes","length","key","value","checked","option"],"mappings":"0RA+BM,SAAUA,EAAaC,GAC3B,IAAMC,EAAaC,IACbC,~~EACDC~~,EAAAA,EAAA,CAAA,~~EAAAC~~,GACAJ,GAEGK,EAA2DN,EAAKM,OAAxDC,EAAmDP,~~EAAzCO~~,~~WAAEC~~,EAAuCR,EAAKQ,SAAlCC,EAA6BT,EAAKU,cAAlCA,~~OAAgB~~,IAAAD,~~EAAA~~,GAAEA,EAAEE,EAASX,EAAKW,KAExE,OACEC,~~EAACC~~,~~cAAAC~~,~~EAAc~~,~~CAAAX~~,MAAOA,GACpBS,EAAAC,cAACE,EAAc,KACbH,~~EAACC~~,~~cAAAG~~,~~EAAc~~,~~KAAAV~~,GACdC,EAAWU,~~KAAI~~,SAACC,GAAoB,OACnCN,EAAAC,cAACM,EAAW,CAAAC,oBACWb,EAAWc,QAAU,EAC1CC,IAAKJ,EAAKK,MACVC,QAASd,IAAkBQ,EAAKK,MAChCf,SAAUA,EACVG,KAAMA,EACNY,MAAOL,EAAKK,OAEXL,EAAKO,OAET,~~KAIT~~"}
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\";\n\nimport { StyledFieldSet, StyledLegend, StyledRadio } 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 {attributes.map((item: Attribute) => (\n <StyledRadio\n $numberOfAttributes={attributes.length \|\| 0}\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 </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","map","item","StyledRadio","$numberOfAttributes","length","key","value","checked","option"],"mappings":"0RA+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,GACdC,EAAWU,IAAI,SAACC,GAAoB,OACnCN,EAAAC,cAACM,EAAW,CAAAC,oBACWb,EAAWc,QAAU,EAC1CC,IAAKJ,EAAKK,MACVC,QAASd,IAAkBQ,EAAKK,MAChCf,SAAUA,EACVG,KAAMA,EACNY,MAAOL,EAAKK,OAEXL,EAAKO,OAET,IAIT"}

package/lib/src/components/RadioConsent/styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{Radio as e}from"../Radio/index.js";var i,o,r,a=t(e)(i||(i=n(["\n  display: block;\n  float: left;\n  text-align: left;\n  margin-left: ",";\n  max-width: ",";\n  width: ",";\n"],["\n  display: block;\n  float: left;\n  text-align: left;\n  margin-left: ",";\n  max-width: ",";\n  width: ",";\n"])),(function(n){return n.theme.spacing.s}),"5em",(function(n){var t=n.$numberOfAttributes,e=n.theme;return"calc(((100% - ".concat("20%",") / ").concat(t,") - ").concat(e.spacing.s,")")})),l=t.legend(o||(o=n(["\n  width: ",";\n  display: block;\n  float: left;\n  font-family: ",";\n"],["\n  width: ",";\n  display: block;\n  float: left;\n  font-family: ",";\n"])),"20%",(function(n){return n.theme.typography.fontFamilyBase})),d=t.fieldset(r||(r=n(["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: block;\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 "," 0;\n  width: 100%;\n"],["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: block;\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 "," 0;\n  width: 100%;\n"])),(function(n){return n.theme.spacing.s}));export{d as StyledFieldSet,l as StyledLegend,a as StyledRadio};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{Radio as e}from"../Radio/index.js";var i,o,r,a=t(e)(i||(i=n(["\n  display: block;\n  float: left;\n  text-align: left;\n  margin-left: ",";\n  max-width: ",";\n  width: ",";\n"],["\n  display: block;\n  float: left;\n  text-align: left;\n  margin-left: ",";\n  max-width: ",";\n  width: ",";\n"])),function(n){return n.theme.spacing.s},"5em",function(n){var t=n.$numberOfAttributes,e=n.theme;return"calc(((100% - ".concat("20%",") / ").concat(t,") - ").concat(e.spacing.s,")")}),l=t.legend(o||(o=n(["\n  width: ",";\n  display: block;\n  float: left;\n  font-family: ",";\n"],["\n  width: ",";\n  display: block;\n  float: left;\n  font-family: ",";\n"])),"20%",function(n){return n.theme.typography.fontFamilyBase}),d=t.fieldset(r||(r=n(["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: block;\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 "," 0;\n  width: 100%;\n"],["\n  box-sizing: border-box;\n  *,\n  *:after,\n  *:before {\n    box-sizing: border-box;\n  }\n  display: block;\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0 0 "," 0;\n  width: 100%;\n"])),function(n){return n.theme.spacing.s});export{d as StyledFieldSet,l as StyledLegend,a as StyledRadio};
 //# sourceMappingURL=styles.js.map

package/lib/src/components/RadioConsent/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sources":["../../../../src/components/RadioConsent/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport RadioInput from \"../Radio\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst LEGEND_WIDTH = \"20%\";\nconst MAX_WIDTH = \"5em\";\n\ntype StyleRadioWidthProp = { $numberOfAttributes: number; theme: ThemeType };\n\nexport const StyledRadio = styled(RadioInput)<StyleRadioWidthProp>`\n display: block;\n float: left;\n text-align: left;\n margin-left: ${({ theme }) => theme.spacing.s};\n max-width: ${MAX_WIDTH};\n width: ${({ $numberOfAttributes, theme }) =>\n `calc(((100% - ${LEGEND_WIDTH}) / ${$numberOfAttributes}) - ${theme.spacing.s})`};\n`;\n\nexport const StyledLegend = styled.legend<{\n theme: ThemeType;\n}>`\n width: ${LEGEND_WIDTH};\n display: block;\n float: left;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n`;\n\nexport const StyledFieldSet = styled.fieldset<{\n theme: ThemeType;\n}>`\n box-sizing: border-box;\n ,\n :after,\n *:before {\n box-sizing: border-box;\n }\n display: block;\n position: relative;\n border: none;\n padding: 0;\n margin: 0 0 ${({ theme }) => theme.spacing.s} 0;\n width: 100%;\n`;\n"],"names":["StyledRadio","styled","RadioInput","templateObject_1","__makeTemplateObject","_a","theme","spacing","s","$numberOfAttributes","concat","StyledLegend","legend","templateObject_2","typography","fontFamilyBase","StyledFieldSet","fieldset","templateObject_3"],"mappings":"2JAMA,UAKaA,EAAcC,EAAOC,EAAPD,CAAkBE,IAAAA,EAAAC,EAAA,CAAA,4EAAA,mBAAA,eAAA,OAAA,CAAqB,4EAInB,mBACvB,eAE4D,~~UAHnE~~,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd,~~GARd~~,~~OAUP~~,SAACH,OAAEI,EAAmBJ,EAAAI,oBAAEH,EAAKD,EAAAC,MACpC,MAAA,iBAAAI,OAZiB,MAYY,QAAAA,OAAOD,EAAmB,QAAAC,OAAOJ,EAAMC,QAAQC,~~EAAI~~,~~IAAhF~~,~~IAGSG~~,EAAeV,EAAOW,OAAMC,IAAAA,EAAAT,EAAA,CAAA,cAAA,wDAAA,OAAA,CAEvC,cACqB,wDAGwC,SArB1C,~~OAqBJ~~,SAACC,GAAc,OAAPA,EAAAC,MAAaQ,WAAWC,cAAjB,~~IAGnBC~~,EAAiBf,EAAOgB,SAAQC,IAAAA,EAAAd,EAAA,CAAA,0LAAA,yBAAA,CAE3C,0LAW4C,~~4BAA9B~~,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd"}
1	+ {"version":3,"file":"styles.js","sources":["../../../../src/components/RadioConsent/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport RadioInput from \"../Radio\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst LEGEND_WIDTH = \"20%\";\nconst MAX_WIDTH = \"5em\";\n\ntype StyleRadioWidthProp = { $numberOfAttributes: number; theme: ThemeType };\n\nexport const StyledRadio = styled(RadioInput)<StyleRadioWidthProp>`\n display: block;\n float: left;\n text-align: left;\n margin-left: ${({ theme }) => theme.spacing.s};\n max-width: ${MAX_WIDTH};\n width: ${({ $numberOfAttributes, theme }) =>\n `calc(((100% - ${LEGEND_WIDTH}) / ${$numberOfAttributes}) - ${theme.spacing.s})`};\n`;\n\nexport const StyledLegend = styled.legend<{\n theme: ThemeType;\n}>`\n width: ${LEGEND_WIDTH};\n display: block;\n float: left;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n`;\n\nexport const StyledFieldSet = styled.fieldset<{\n theme: ThemeType;\n}>`\n box-sizing: border-box;\n ,\n :after,\n *:before {\n box-sizing: border-box;\n }\n display: block;\n position: relative;\n border: none;\n padding: 0;\n margin: 0 0 ${({ theme }) => theme.spacing.s} 0;\n width: 100%;\n`;\n"],"names":["StyledRadio","styled","RadioInput","templateObject_1","__makeTemplateObject","_a","theme","spacing","s","$numberOfAttributes","concat","StyledLegend","legend","templateObject_2","typography","fontFamilyBase","StyledFieldSet","fieldset","templateObject_3"],"mappings":"2JAMA,UAKaA,EAAcC,EAAOC,EAAPD,CAAkBE,IAAAA,EAAAC,EAAA,CAAA,4EAAA,mBAAA,eAAA,OAAA,CAAqB,4EAInB,mBACvB,eAE4D,SAHnE,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd,EARd,MAUP,SAACH,OAAEI,EAAmBJ,EAAAI,oBAAEH,EAAKD,EAAAC,MACpC,MAAA,iBAAAI,OAZiB,MAYY,QAAAA,OAAOD,EAAmB,QAAAC,OAAOJ,EAAMC,QAAQC,EAAC,IAA7E,GAGSG,EAAeV,EAAOW,OAAMC,IAAAA,EAAAT,EAAA,CAAA,cAAA,wDAAA,OAAA,CAEvC,cACqB,wDAGwC,SArB1C,MAqBJ,SAACC,GAAc,OAAPA,EAAAC,MAAaQ,WAAWC,cAAjB,GAGnBC,EAAiBf,EAAOgB,SAAQC,IAAAA,EAAAd,EAAA,CAAA,0LAAA,yBAAA,CAE3C,0LAW4C,2BAA9B,SAACC,GAAc,OAAPA,EAAAC,MAAaC,QAAQC,CAAd"}

package/lib/{components → src/components}/Select/Selelct.stories.d.ts RENAMED Viewed

@@ -1,9 +1,9 @@
 import React from "react";
-import { type StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react-vite";
 import Select, { type SelectProps } from ".";
 declare const _default: {
     title: string;
-    component: ({ errorMessage, hasError, required, label, hintText, hideRequiredInLabel, ref, ...props }: SelectProps) => React.JSX.Element;
+    component: ({ errorMessage, hasError, required, label, hintText, hideRequiredIndicationInLabel, ref, ...props }: SelectProps) => React.JSX.Element;
     args: {
         disabled: boolean;
         required: boolean;

package/lib/{components → src/components}/Select/index.d.ts RENAMED Viewed

@@ -8,8 +8,8 @@ export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     label: string;
     /** hind text or custom component */
     hintText?: ReactNode;
-    /** flag to stop (required) appearing in label, useful for compound form components like DateInput */
-    hideRequiredInLabel?: boolean;
+    /** flag to stop (optional) appearing in label, useful for compound form components like DateInput */
+    hideRequiredIndicationInLabel?: boolean;
     /** react DOM reference of object used scrolling to it with errors etc */
     ref?: Ref<HTMLSelectElement>;
 };
@@ -17,5 +17,5 @@ export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
  * Select components are used for collecting user provided information from a list of options.
  *
  */
-export declare const Select: ({ errorMessage, hasError, required, label, hintText, hideRequiredInLabel, ref, ...props }: SelectProps) => React.JSX.Element;
+export declare const Select: ({ errorMessage, hasError, required, label, hintText, hideRequiredIndicationInLabel, ref, ...props }: SelectProps) => React.JSX.Element;
 export default Select;

package/lib/src/components/Select/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{useTheme as t}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import{ErrorText as d}from"../ErrorText/index.js";import s from"./styles.js";var m=function(m){var n=m.errorMessage,l=m.hasError,c=m.required,f=m.label,p=m.hintText,u=m.hideRequiredInLabel,b=m.ref,h=r(m,["errorMessage","hasError","required","label","hintText","hideRequiredInLabel","ref"]),x=t(),E=e(e({},o),x);return i.createElement(a,{label:f,hintText:p,required:!u&&c||!1},i.createElement(s,e({},h,{ref:b,theme:E,required:c,"aria-invalid":l||!!n||!1,"aria-describedby":h.id&&n?"".concat(h.id,"-error"):void 0,$hasError:l||!!n||!1})),!!n&&i.createElement(d,{marginTop:"xxs",id:h.id?"".concat(h.id,"-error"):void 0},n))};export{m as Select,m as default};
+import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{useTheme as t}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import{ErrorText as d}from"../ErrorText/index.js";import n from"./styles.js";var s=function(s){var m=s.errorMessage,l=s.hasError,c=s.required,f=s.label,p=s.hintText,u=s.hideRequiredIndicationInLabel,b=s.ref,h=r(s,["errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref"]),x=t(),E=e(e({},o),x);return i.createElement(a,{label:f,hintText:p,required:!u&&c||!1},i.createElement(n,e({},h,{ref:b,theme:E,required:c,"aria-invalid":l||!!m||!1,"aria-describedby":h.id&&m?"".concat(h.id,"-error"):void 0,$hasError:l||!!m||!1})),!!m&&i.createElement(d,{marginTop:"xxs",id:h.id?"".concat(h.id,"-error"):void 0},m))};export{s as Select,s as default};
 //# sourceMappingURL=index.js.map

package/lib/src/components/Select/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n type ReactNode,\n type SelectHTMLAttributes,\n type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n /** error message text /\n errorMessage?: string;\n /* flag for error styling of component /\n hasError?: boolean;\n /* label text /\n label: string;\n /* hind text or custom component /\n hintText?: ReactNode;\n /* flag to stop (~~required~~) appearing in label, useful for compound form components like DateInput /\n ~~hideRequiredInLabel~~?: boolean;\n /* react DOM reference of object used scrolling to it with errors etc /\n ref?: Ref<HTMLSelectElement>;\n};\n\n/\n Select components are used for collecting user provided information from a list of options.\n \n /\nexport const Select = ({\n errorMessage,\n hasError,\n required,\n label,\n hintText,\n ~~hideRequiredInLabel~~,\n ref,\n ...props\n}: SelectProps) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={(!~~hideRequiredInLabel~~ && required) \|\| false}\n >\n <StyledSelect\n {...props}\n ref={ref}\n theme={theme}\n required={required}\n aria-invalid={hasError \|\| !!errorMessage \|\| false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n $hasError={hasError \|\| !!errorMessage \|\| false}\n />\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n};\n\nexport default Select;\n"],"names":["Select","_a","errorMessage","hasError","required","label","hintText","~~hideRequiredInLabel~~","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","concat","undefined","$hasError","ErrorText","marginTop"],"mappings":"wUAgCO,IAAMA,EAAS,SAACC,GACrB,IAAAC,EAAYD,EAAAC,aACZC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAQL,EAAAK,SACRC,~~EAAmBN~~,EAAAM,~~oBACnBC~~,QACGC,~~EARkBC~~,EAAAT,~~EAAA~~,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,~~sBAAA~~,QAUfU,EAAaC,IACbC,~~EACDC~~,EAAAA,EAAA,CAAA,~~EAAAC~~,GACAJ,GAGL,OACEK,gBAACC,EAAY,CACXZ,MAAOA,EACPC,SAAUA,EACVF,UAAYG,~~GAAuBH~~,IAAa,~~GAEhDY~~,~~EAACE~~,~~cAAAC~~,~~EACKL~~,EAAA,CAAA,~~EAAAL~~,~~EACJ~~,~~CAAAD~~,IAAKA,EACLK,MAAOA,EACPT,SAAUA,~~EACI~~,~~eAAAD~~,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMW,IAAQlB,EAAe,~~GAAGmB~~,~~OAAAZ~~,EAAMW,kBAAaE,~~EAE5CC~~,~~UAAApB~~,KAAcD,IAAgB,OAExCA,GACDc,gBAACQ,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,~~GAAGC~~,~~OAAAZ~~,EAAMW,kBAAaE,GAEpCpB,GAKX"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/Select/index.tsx"],"sourcesContent":["import React, {\n type ReactNode,\n type SelectHTMLAttributes,\n type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { LabelWrapper } from \"../LabelWrapper\";\nimport { ErrorText } from \"../ErrorText\";\n\nimport { StyledSelect } from \"./styles\";\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n /** error message text /\n errorMessage?: string;\n /* flag for error styling of component /\n hasError?: boolean;\n /* label text /\n label: string;\n /* hind text or custom component /\n hintText?: ReactNode;\n /* flag to stop (optional) appearing in label, useful for compound form components like DateInput /\n hideRequiredIndicationInLabel?: boolean;\n /* react DOM reference of object used scrolling to it with errors etc /\n ref?: Ref<HTMLSelectElement>;\n};\n\n/\n Select components are used for collecting user provided information from a list of options.\n \n /\nexport const Select = ({\n errorMessage,\n hasError,\n required,\n label,\n hintText,\n hideRequiredIndicationInLabel,\n ref,\n ...props\n}: SelectProps) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={(!hideRequiredIndicationInLabel && required) \|\| false}\n >\n <StyledSelect\n {...props}\n ref={ref}\n theme={theme}\n required={required}\n aria-invalid={hasError \|\| !!errorMessage \|\| false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n $hasError={hasError \|\| !!errorMessage \|\| false}\n />\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n};\n\nexport default Select;\n"],"names":["Select","_a","errorMessage","hasError","required","label","hintText","hideRequiredIndicationInLabel","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","LabelWrapper","createElement","StyledSelect","id","concat","undefined","$hasError","ErrorText","marginTop"],"mappings":"wUAgCO,IAAMA,EAAS,SAACC,GACrB,IAAAC,EAAYD,EAAAC,aACZC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAQL,EAAAK,SACRC,EAA6BN,EAAAM,8BAC7BC,QACGC,EAAKC,EAAAT,EARa,CAAA,eAAA,WAAA,WAAA,QAAA,WAAA,gCAAA,QAUfU,EAAaC,IACbC,EAAKC,EAAAA,EAAA,CAAA,EACNC,GACAJ,GAGL,OACEK,gBAACC,EAAY,CACXZ,MAAOA,EACPC,SAAUA,EACVF,UAAYG,GAAiCH,IAAa,GAE1DY,EAAAE,cAACC,EAAYL,EAAA,CAAA,EACPL,EAAK,CACTD,IAAKA,EACLK,MAAOA,EACPT,SAAUA,EAAQ,eACJD,KAAcD,IAAgB,EAAK,mBAE7CO,EAAMW,IAAQlB,EAAe,GAAAmB,OAAGZ,EAAMW,kBAAaE,EAASC,UAErDpB,KAAcD,IAAgB,OAExCA,GACDc,gBAACQ,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,GAAAC,OAAGZ,EAAMW,kBAAaE,GAEpCpB,GAKX"}

package/lib/src/components/Select/styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var e,t,c="3rem",i=o.select(t||(t=n(["\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      "," 50%,\n      "," 50%\n    ),\n    linear-gradient(\n      135deg,\n      "," 50%,\n      "," 50%\n    );\n  background-color: ",";\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: ",";\n  display: block;\n  font-size: ",";\n  min-height: ",";\n  padding: ",";\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n"],["\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      "," 50%,\n      "," 50%\n    ),\n    linear-gradient(\n      135deg,\n      "," 50%,\n      "," 50%\n    );\n  background-color: ",";\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: ",";\n  display: block;\n  font-size: ",";\n  min-height: ",";\n  padding: ",";\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n"])),(function(n){return n.theme.colors.backgroundLight}),(function(n){return n.theme.colors.selectBackground}),(function(n){return n.theme.colors.selectBackground}),(function(n){return n.theme.colors.backgroundLight}),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme,r=n.$hasError,e=n.$errorMessage;return"solid ".concat(o.utilities.inputBorderWidth," ").concat(r||e?o.colors.textError:o.colors.textInputBorder)}),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.fontSizes.m}),c,(function(n){var o=n.theme;return"calc( (".concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.m," calc( (").concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.xs)}),(function(n){return n.theme.colors.secondary}),(function(n){return n.theme.colors.disabled}),(function(n){return n.theme.colors.disabled}),(function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:r(e||(e=n(["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "],["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "])),t.colors.tertiary)}));export{i as StyledSelect,i as default};
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var e,t,c="3rem",i=o.select(t||(t=n(["\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      "," 50%,\n      "," 50%\n    ),\n    linear-gradient(\n      135deg,\n      "," 50%,\n      "," 50%\n    );\n  background-color: ",";\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: ",";\n  display: block;\n  font-size: ",";\n  min-height: ",";\n  padding: ",";\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n"],["\n  appearance: none;\n  background:\n    linear-gradient(\n      45deg,\n      "," 50%,\n      "," 50%\n    ),\n    linear-gradient(\n      135deg,\n      "," 50%,\n      "," 50%\n    );\n  background-color: ",";\n  background-position:\n    calc(100% - 16px) 50%,\n    calc(100% - 10px) 50%;\n  background-size: 6px 6px;\n  background-repeat: no-repeat;\n  border: ",";\n  color: ",";\n  display: block;\n  font-size: ",";\n  min-height: ",";\n  padding: ",";\n  width: 100%;\n  transition: border-color 150ms linear;\n  &:hover {\n    border-color: ",";\n  }\n  &:disabled {\n    border-color: ",";\n    color: ",";\n  }\n\n  ",";\n"])),function(n){return n.theme.colors.backgroundLight},function(n){return n.theme.colors.selectBackground},function(n){return n.theme.colors.selectBackground},function(n){return n.theme.colors.backgroundLight},function(n){return n.theme.colors.backgroundLight},function(n){var o=n.theme,r=n.$hasError,e=n.$errorMessage;return"solid ".concat(o.utilities.inputBorderWidth," ").concat(r||e?o.colors.textError:o.colors.textInputBorder)},function(n){return n.theme.colors.textDark},function(n){return n.theme.fontSizes.m},c,function(n){var o=n.theme;return"calc( (".concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.m," calc( (").concat(c," - ( ").concat(o.utilities.inputBorderWidth," * 2) - ").concat(o.typography.lineHeight," ) / 2) ").concat(o.spacing.xs)},function(n){return n.theme.colors.secondary},function(n){return n.theme.colors.disabled},function(n){return n.theme.colors.disabled},function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:r(e||(e=n(["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "],["\n          &:focus {\n            outline: 0;\n            border-color: ",";\n          }\n        "])),t.colors.tertiary)});export{i as StyledSelect,i as default};
 //# sourceMappingURL=styles.js.map

package/lib/src/components/Select/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sources":["../../../../src/components/Select/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\n\ntype StyledSelectProps = {\n $hasError: boolean;\n $errorMessage?: string;\n theme: ThemeType;\n};\n\nconst StyledSelect = styled.select<StyledSelectProps>`\n appearance: none;\n background:\n linear-gradient(\n 45deg,\n ${({ theme }) => theme.colors.backgroundLight} 50%,\n ${({ theme }) => theme.colors.selectBackground} 50%\n ),\n linear-gradient(\n 135deg,\n ${({ theme }) => theme.colors.selectBackground} 50%,\n ${({ theme }) => theme.colors.backgroundLight} 50%\n );\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n background-position:\n calc(100% - 16px) 50%,\n calc(100% - 10px) 50%;\n background-size: 6px 6px;\n background-repeat: no-repeat;\n border: ${({ theme, $hasError, $errorMessage }) =>\n `solid ${theme.utilities.inputBorderWidth} ${\n $hasError \|\| $errorMessage\n ? theme.colors.textError\n : theme.colors.textInputBorder\n }`};\n color: ${({ theme }) => theme.colors.textDark};\n display: block;\n font-size: ${({ theme }) => theme.fontSizes.m};\n min-height: ${BUTTON_HEIGHT};\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.xs}`};\n width: 100%;\n transition: border-color 150ms linear;\n &:hover {\n border-color: ${({ theme }) => theme.colors.secondary};\n }\n &:disabled {\n border-color: ${({ theme }) => theme.colors.disabled};\n color: ${({ theme }) => theme.colors.disabled};\n }\n\n ${({ theme }) =>\n !theme.utilities.useDefaultFocusRect\n ? css`\n &:focus {\n outline: 0;\n border-color: ${theme.colors.tertiary};\n }\n `\n : null};\n`;\n\nexport default StyledSelect;\nexport { StyledSelect };\n"],"names":["BUTTON_HEIGHT","StyledSelect","styled","select","_a","theme","colors","backgroundLight","selectBackground","$hasError","$errorMessage","concat","utilities","inputBorderWidth","textError","textInputBorder","textDark","fontSizes","m","typography","lineHeight","spacing","xs","secondary","disabled","useDefaultFocusRect","css","templateObject_1","__makeTemplateObject","tertiary"],"mappings":"2HAIA,QAAMA,EAAgB,OAQhBC,EAAeC,EAAOC,gpBAAyB,mFAKF,gBACC,4DAIA,gBACD,qCAEc,8JAW3D,eACyC,sCAEA,oBAClB,iBAEyO,+FAI7M,6CAGD,iBACP,eAWrC,~~UA5CJ~~,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,~~IACf~~,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,~~IAIf~~,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,~~IACf~~,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,~~IAED~~,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,~~IAMzB~~,SAACH,GAAE,IAAAC,UAAOI,EAASL,EAAAK,UAAEC,EAAaN,EAAAM,cAC1C,MAAA,SAAAC,OAASN,EAAMO,UAAUC,iBAAgB,KAAAF,OACvCF,GAAaC,EACTL,EAAMC,OAAOQ,UACbT,EAAMC,OAAOS,gBAHnB,~~IAKO~~,SAACX,GAAc,OAAPA,EAAAC,MAAaC,OAAOU,QAAb,~~IAEX~~,SAACZ,GAAc,OAAPA,EAAAC,MAAaY,UAAUC,CAAhB,~~GACdlB~~,~~GACH~~,SAACI,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBAAUL,EAAa,SAAAW,OAAQN,EAAMO,UAAUC,iBAAgB,YAAAF,OAAWN,EAAMc,WAAWC,8BAAqBf,EAAMgB,QAAQH,~~EAAY~~,YAAAP,~~OAAAX~~,kBAAqBK,EAAMO,UAAUC,oCAA2BR,EAAMc,WAAWC,~~WAAqB~~,YAAAT,~~OAAAN~~,EAAMgB,QAAQC,GAA9P,~~IAIgB~~,SAAClB,GAAc,OAAPA,EAAAC,MAAaC,OAAOiB,SAAb,~~IAGf~~,SAACnB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,~~IACtB~~,SAACpB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,~~IAGxB~~,SAACpB,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAACA,EAAMO,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAC,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBvB,EAAMC,OAAOuB,SAJrC"}
1	+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Select/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { type ThemeType } from \"../../types\";\n\nconst BUTTON_HEIGHT = \"3rem\";\n\ntype StyledSelectProps = {\n $hasError: boolean;\n $errorMessage?: string;\n theme: ThemeType;\n};\n\nconst StyledSelect = styled.select<StyledSelectProps>`\n appearance: none;\n background:\n linear-gradient(\n 45deg,\n ${({ theme }) => theme.colors.backgroundLight} 50%,\n ${({ theme }) => theme.colors.selectBackground} 50%\n ),\n linear-gradient(\n 135deg,\n ${({ theme }) => theme.colors.selectBackground} 50%,\n ${({ theme }) => theme.colors.backgroundLight} 50%\n );\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n background-position:\n calc(100% - 16px) 50%,\n calc(100% - 10px) 50%;\n background-size: 6px 6px;\n background-repeat: no-repeat;\n border: ${({ theme, $hasError, $errorMessage }) =>\n `solid ${theme.utilities.inputBorderWidth} ${\n $hasError \|\| $errorMessage\n ? theme.colors.textError\n : theme.colors.textInputBorder\n }`};\n color: ${({ theme }) => theme.colors.textDark};\n display: block;\n font-size: ${({ theme }) => theme.fontSizes.m};\n min-height: ${BUTTON_HEIGHT};\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.xs}`};\n width: 100%;\n transition: border-color 150ms linear;\n &:hover {\n border-color: ${({ theme }) => theme.colors.secondary};\n }\n &:disabled {\n border-color: ${({ theme }) => theme.colors.disabled};\n color: ${({ theme }) => theme.colors.disabled};\n }\n\n ${({ theme }) =>\n !theme.utilities.useDefaultFocusRect\n ? css`\n &:focus {\n outline: 0;\n border-color: ${theme.colors.tertiary};\n }\n `\n : null};\n`;\n\nexport default StyledSelect;\nexport { StyledSelect };\n"],"names":["BUTTON_HEIGHT","StyledSelect","styled","select","_a","theme","colors","backgroundLight","selectBackground","$hasError","$errorMessage","concat","utilities","inputBorderWidth","textError","textInputBorder","textDark","fontSizes","m","typography","lineHeight","spacing","xs","secondary","disabled","useDefaultFocusRect","css","templateObject_1","__makeTemplateObject","tertiary"],"mappings":"2HAIA,QAAMA,EAAgB,OAQhBC,EAAeC,EAAOC,gpBAAyB,mFAKF,gBACC,4DAIA,gBACD,qCAEc,8JAW3D,eACyC,sCAEA,oBAClB,iBAEyO,+FAI7M,6CAGD,iBACP,eAWrC,SA5CJ,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,EACf,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,EAIf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOE,gBAAb,EACf,SAACJ,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,EAED,SAACH,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,EAMzB,SAACH,GAAE,IAAAC,UAAOI,EAASL,EAAAK,UAAEC,EAAaN,EAAAM,cAC1C,MAAA,SAAAC,OAASN,EAAMO,UAAUC,iBAAgB,KAAAF,OACvCF,GAAaC,EACTL,EAAMC,OAAOQ,UACbT,EAAMC,OAAOS,gBAHnB,EAKO,SAACX,GAAc,OAAPA,EAAAC,MAAaC,OAAOU,QAAb,EAEX,SAACZ,GAAc,OAAPA,EAAAC,MAAaY,UAAUC,CAAhB,EACdlB,EACH,SAACI,GAAE,IAAAC,EAAKD,EAAAC,MACjB,MAAA,iBAAUL,EAAa,SAAAW,OAAQN,EAAMO,UAAUC,iBAAgB,YAAAF,OAAWN,EAAMc,WAAWC,8BAAqBf,EAAMgB,QAAQH,EAAC,YAAAP,OAAWX,kBAAqBK,EAAMO,UAAUC,oCAA2BR,EAAMc,WAAWC,WAAU,YAAAT,OAAWN,EAAMgB,QAAQC,GAA9P,EAIgB,SAAClB,GAAc,OAAPA,EAAAC,MAAaC,OAAOiB,SAAb,EAGf,SAACnB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,EACtB,SAACpB,GAAc,OAAPA,EAAAC,MAAaC,OAAOkB,QAAb,EAGxB,SAACpB,GAAE,IAAAC,EAAKD,EAAAC,MACR,OAACA,EAAMO,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAC,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBvB,EAAMC,OAAOuB,SAJrC"}

package/lib/src/components/Spacing/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/Spacing/index.tsx"],"sourcesContent":["import { type SpaceType, type ThemeType } from \"../../types\";\n\nexport type SpacingProps = {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInterface {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n}\n\nexport type SpacingPropsInternal = {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInternalInterface {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n}\n\nexport function spacingPropsToSpacingPropsInternal(\n props: SpacingPropsInterface,\n): SpacingPropsInternalInterface {\n const internalProps = {\n ...props,\n margin: undefined,\n marginTop: undefined,\n marginRight: undefined,\n marginBottom: undefined,\n marginLeft: undefined,\n marginVertical: undefined,\n marginHorizontal: undefined,\n padding: undefined,\n paddingTop: undefined,\n paddingRight: undefined,\n paddingBottom: undefined,\n paddingLeft: undefined,\n paddingVertical: undefined,\n paddingHorizontal: undefined,\n $margin: props.margin,\n $marginTop: props.marginTop,\n $marginRight: props.marginRight,\n $marginBottom: props.marginBottom,\n $marginLeft: props.marginLeft,\n $marginVertical: props.marginVertical,\n $marginHorizontal: props.marginHorizontal,\n $padding: props.padding,\n $paddingTop: props.paddingTop,\n $paddingRight: props.paddingRight,\n $paddingBottom: props.paddingBottom,\n $paddingLeft: props.paddingLeft,\n $paddingVertical: props.paddingVertical,\n $paddingHorizontal: props.paddingHorizontal,\n };\n return internalProps;\n}\n\nexport function spacing(props: SpacingPropsInternal, theme: ThemeType) {\n const {\n $margin,\n $marginHorizontal,\n $marginVertical,\n $marginTop,\n $marginRight,\n $marginBottom,\n $marginLeft,\n $padding,\n $paddingHorizontal,\n $paddingVertical,\n $paddingTop,\n $paddingRight,\n $paddingBottom,\n $paddingLeft,\n } = props;\n\n const ma = $margin ? theme.spacing[$margin] : null;\n const mv = $marginVertical ? theme.spacing[$marginVertical] : null;\n const mh = $marginHorizontal ? theme.spacing[$marginHorizontal] : null;\n const mt = $marginTop ? theme.spacing[$marginTop] : null;\n const mr = $marginRight ? theme.spacing[$marginRight] : null;\n const mb = $marginBottom ? theme.spacing[$marginBottom] : null;\n const ml = $marginLeft ? theme.spacing[$marginLeft] : null;\n\n const maString = ma ? `margin: ${ma} !important;` : \"\";\n const mtString = mt\n ? `margin-top: ${mt} !important;`\n : mv\n ? `margin-top: ${mv} !important;`\n : \"\";\n const mrString = mr\n ? `margin-right: ${mr} !important;`\n : mh\n ? `margin-right: ${mh} !important;`\n : \"\";\n const mbString = mb\n ? `margin-bottom: ${mb} !important;`\n : mv\n ? `margin-bottom: ${mv} !important;`\n : \"\";\n const mlString = ml\n ? `margin-left: ${ml} !important;`\n : mh\n ? `margin-left: ${mh} !important;`\n : \"\";\n\n const pa = $padding ? theme.spacing[$padding] : null;\n const pv = $paddingVertical ? theme.spacing[$paddingVertical] : null;\n const ph = $paddingHorizontal ? theme.spacing[$paddingHorizontal] : null;\n const pt = $paddingTop ? theme.spacing[$paddingTop] : null;\n const pr = $paddingRight ? theme.spacing[$paddingRight] : null;\n const pb = $paddingBottom ? theme.spacing[$paddingBottom] : null;\n const pl = $paddingLeft ? theme.spacing[$paddingLeft] : null;\n\n const paString = pa ? `padding: ${pa} !important;` : \"\";\n const ptString = pt\n ? `padding-top: ${pt} !important;`\n : pv\n ? `padding-top: ${pv} !important;`\n : \"\";\n const prString = pr\n ? `padding-right: ${pr} !important;`\n : ph\n ? `padding-right: ${ph} !important;`\n : \"\";\n const pbString = pb\n ? `padding-bottom: ${pb} !important;`\n : pv\n ? `padding-bottom: ${pv} !important;`\n : \"\";\n const plString = pl\n ? `padding-left: ${pl} !important;`\n : ph\n ? `padding-left: ${ph} !important;`\n : \"\";\n\n return `\n ${maString}\n ${mtString}\n ${mrString}\n ${mbString}\n ${mlString}\n ${paString}\n ${ptString}\n ${prString}\n ${pbString}\n ${plString}\n `;\n}\n\nexport default spacing;\n"],"names":["spacingPropsToSpacingPropsInternal","props","__assign","margin","undefined","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","$margin","$marginTop","$marginRight","$marginBottom","$marginLeft","$marginVertical","$marginHorizontal","$padding","$paddingTop","$paddingRight","$paddingBottom","$paddingLeft","$paddingVertical","$paddingHorizontal","spacing","theme","ma","mv","mh","mt","mr","mb","ml","maString","concat","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl","paString","ptString","prString","pbString","plString"],"mappings":"oEAsEM,SAAUA,EACdC,GAiCA,OA/BmBC,EAAAA,EAAA,CAAA,EACdD,GAAK,CACRE,YAAQC,EACRC,eAAWD,EACXE,iBAAaF,EACbG,kBAAcH,EACdI,gBAAYJ,EACZK,oBAAgBL,EAChBM,sBAAkBN,EAClBO,aAASP,EACTQ,gBAAYR,EACZS,kBAAcT,EACdU,mBAAeV,EACfW,iBAAaX,EACbY,qBAAiBZ,EACjBa,uBAAmBb,EACnBc,QAASjB,EAAME,OACfgB,WAAYlB,EAAMI,UAClBe,aAAcnB,EAAMK,YACpBe,cAAepB,EAAMM,aACrBe,YAAarB,EAAMO,WACnBe,gBAAiBtB,EAAMQ,eACvBe,kBAAmBvB,EAAMS,iBACzBe,SAAUxB,EAAMU,QAChBe,YAAazB,EAAMW,WACnBe,cAAe1B,EAAMY,aACrBe,eAAgB3B,EAAMa,cACtBe,aAAc5B,EAAMc,YACpBe,iBAAkB7B,EAAMe,gBACxBe,mBAAoB9B,EAAMgB,mBAG9B,~~CAEgB~~,~~SAAAe~~,EAAQ/B,EAA6BgC,GAEjD,IAAAf,EAcEjB,EAAKiB,QAbPM,EAaEvB,EAAKuB,kBAZPD,EAYEtB,kBAXFkB,EAWElB,~~EAXQkB~~,~~WACVC~~,EAUEnB,~~EAVUmB~~,~~aACZC~~,EASEpB,EAAKoB,cARPC,EAQErB,EAAKqB,YAPPG,EAOExB,~~EAPMwB~~,~~SACRM~~,EAME9B,~~EANgB8B~~,~~mBAClBD~~,EAKE7B,EAAK6B,iBAJPJ,EAIEzB,EAAKyB,YAHPC,EAGE1B,gBAFF2B,EAEE3B,iBADF4B,EACE5B,eAEEiC,EAAKhB,EAAUe,EAAMD,QAAQd,GAAW,KACxCiB,EAAKZ,EAAkBU,EAAMD,QAAQT,GAAmB,KACxDa,EAAKZ,EAAoBS,EAAMD,QAAQR,GAAqB,KAC5Da,EAAKlB,EAAac,EAAMD,QAAQb,GAAc,KAC9CmB,EAAKlB,EAAea,EAAMD,QAAQZ,GAAgB,KAClDmB,EAAKlB,EAAgBY,EAAMD,QAAQX,GAAiB,KACpDmB,EAAKlB,EAAcW,EAAMD,QAAQV,GAAe,KAEhDmB,EAAWP,EAAK,~~WAAWQ~~,~~OAAAR~~,~~EAAgB~~,~~gBAAG~~,GAC9CS,EAAWN,EACb,~~eAAeK~~,~~OAAAL~~,~~EAAgB~~,~~gBAC/BF~~,EACE,~~eAAeO~~,~~OAAAP~~,~~EAAgB~~,~~gBAC/B~~,GACAS,EAAWN,EACb,~~iBAAiBI~~,~~OAAAJ~~,~~EAAgB~~,~~gBACjCF~~,EACE,~~iBAAiBM~~,~~OAAAN~~,~~EAAgB~~,~~gBACjC~~,GACAS,EAAWN,EACb,~~kBAAkBG~~,~~OAAAH~~,~~EAAgB~~,~~gBAClCJ~~,EACE,~~kBAAkBO~~,~~OAAAP~~,~~EAAgB~~,~~gBAClC~~,GACAW,EAAWN,EACb,~~gBAAgBE~~,~~OAAAF~~,~~EAAgB~~,~~gBAChCJ~~,EACE,~~gBAAgBM~~,~~OAAAN~~,~~EAAgB~~,~~gBAChC~~,GAEAW,EAAKtB,EAAWQ,EAAMD,QAAQP,GAAY,KAC1CuB,EAAKlB,EAAmBG,EAAMD,QAAQF,GAAoB,KAC1DmB,EAAKlB,EAAqBE,EAAMD,QAAQD,GAAsB,KAC9DmB,EAAKxB,EAAcO,EAAMD,QAAQN,GAAe,KAChDyB,EAAKxB,EAAgBM,EAAMD,QAAQL,GAAiB,KACpDyB,EAAKxB,EAAiBK,EAAMD,QAAQJ,GAAkB,KACtDyB,EAAKxB,EAAeI,EAAMD,QAAQH,GAAgB,KAElDyB,EAAWP,EAAK,~~YAAYL~~,~~OAAAK~~,~~EAAgB~~,~~gBAAG~~,GAC/CQ,EAAWL,EACb,~~gBAAgBR~~,~~OAAAQ~~,~~EAAgB~~,~~gBAChCF~~,EACE,~~gBAAgBN~~,~~OAAAM~~,~~EAAgB~~,~~gBAChC~~,GACAQ,EAAWL,EACb,~~kBAAkBT~~,~~OAAAS~~,~~EAAgB~~,~~gBAClCF~~,EACE,~~kBAAkBP~~,~~OAAAO~~,~~EAAgB~~,~~gBAClC~~,GACAQ,EAAWL,EACb,~~mBAAmBV~~,~~OAAAU~~,~~EAAgB~~,~~gBACnCJ~~,EACE,~~mBAAmBN~~,~~OAAAM~~,~~EAAgB~~,~~gBACnC~~,GACAU,EAAWL,EACb,~~iBAAiBX~~,~~OAAAW~~,~~EAAgB~~,~~gBACjCJ~~,EACE,~~iBAAiBP~~,~~OAAAO~~,~~EAAgB~~,~~gBACjC~~,GAEN,MAAO,SAAAP,OACHD,~~EACA~~,UAAAC,~~OAAAC~~,mBACAC,EAAQ,UAAAF,OACRG,~~EACA~~,UAAAH,~~OAAAI~~,mBACAQ,EAAQ,UAAAZ,OACRa,~~EACA~~,UAAAb,~~OAAAc~~,mBACAC,EAAQ,UAAAf,OACRgB,EAAQ,OAEd"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/Spacing/index.tsx"],"sourcesContent":["import { type SpaceType, type ThemeType } from \"../../types\";\n\nexport type SpacingProps = {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInterface {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n}\n\nexport type SpacingPropsInternal = {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInternalInterface {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n}\n\nexport function spacingPropsToSpacingPropsInternal(\n props: SpacingPropsInterface,\n): SpacingPropsInternalInterface {\n const internalProps = {\n ...props,\n margin: undefined,\n marginTop: undefined,\n marginRight: undefined,\n marginBottom: undefined,\n marginLeft: undefined,\n marginVertical: undefined,\n marginHorizontal: undefined,\n padding: undefined,\n paddingTop: undefined,\n paddingRight: undefined,\n paddingBottom: undefined,\n paddingLeft: undefined,\n paddingVertical: undefined,\n paddingHorizontal: undefined,\n $margin: props.margin,\n $marginTop: props.marginTop,\n $marginRight: props.marginRight,\n $marginBottom: props.marginBottom,\n $marginLeft: props.marginLeft,\n $marginVertical: props.marginVertical,\n $marginHorizontal: props.marginHorizontal,\n $padding: props.padding,\n $paddingTop: props.paddingTop,\n $paddingRight: props.paddingRight,\n $paddingBottom: props.paddingBottom,\n $paddingLeft: props.paddingLeft,\n $paddingVertical: props.paddingVertical,\n $paddingHorizontal: props.paddingHorizontal,\n };\n return internalProps;\n}\n\nexport function spacing(props: SpacingPropsInternal, theme: ThemeType) {\n const {\n $margin,\n $marginHorizontal,\n $marginVertical,\n $marginTop,\n $marginRight,\n $marginBottom,\n $marginLeft,\n $padding,\n $paddingHorizontal,\n $paddingVertical,\n $paddingTop,\n $paddingRight,\n $paddingBottom,\n $paddingLeft,\n } = props;\n\n const ma = $margin ? theme.spacing[$margin] : null;\n const mv = $marginVertical ? theme.spacing[$marginVertical] : null;\n const mh = $marginHorizontal ? theme.spacing[$marginHorizontal] : null;\n const mt = $marginTop ? theme.spacing[$marginTop] : null;\n const mr = $marginRight ? theme.spacing[$marginRight] : null;\n const mb = $marginBottom ? theme.spacing[$marginBottom] : null;\n const ml = $marginLeft ? theme.spacing[$marginLeft] : null;\n\n const maString = ma ? `margin: ${ma} !important;` : \"\";\n const mtString = mt\n ? `margin-top: ${mt} !important;`\n : mv\n ? `margin-top: ${mv} !important;`\n : \"\";\n const mrString = mr\n ? `margin-right: ${mr} !important;`\n : mh\n ? `margin-right: ${mh} !important;`\n : \"\";\n const mbString = mb\n ? `margin-bottom: ${mb} !important;`\n : mv\n ? `margin-bottom: ${mv} !important;`\n : \"\";\n const mlString = ml\n ? `margin-left: ${ml} !important;`\n : mh\n ? `margin-left: ${mh} !important;`\n : \"\";\n\n const pa = $padding ? theme.spacing[$padding] : null;\n const pv = $paddingVertical ? theme.spacing[$paddingVertical] : null;\n const ph = $paddingHorizontal ? theme.spacing[$paddingHorizontal] : null;\n const pt = $paddingTop ? theme.spacing[$paddingTop] : null;\n const pr = $paddingRight ? theme.spacing[$paddingRight] : null;\n const pb = $paddingBottom ? theme.spacing[$paddingBottom] : null;\n const pl = $paddingLeft ? theme.spacing[$paddingLeft] : null;\n\n const paString = pa ? `padding: ${pa} !important;` : \"\";\n const ptString = pt\n ? `padding-top: ${pt} !important;`\n : pv\n ? `padding-top: ${pv} !important;`\n : \"\";\n const prString = pr\n ? `padding-right: ${pr} !important;`\n : ph\n ? `padding-right: ${ph} !important;`\n : \"\";\n const pbString = pb\n ? `padding-bottom: ${pb} !important;`\n : pv\n ? `padding-bottom: ${pv} !important;`\n : \"\";\n const plString = pl\n ? `padding-left: ${pl} !important;`\n : ph\n ? `padding-left: ${ph} !important;`\n : \"\";\n\n return `\n ${maString}\n ${mtString}\n ${mrString}\n ${mbString}\n ${mlString}\n ${paString}\n ${ptString}\n ${prString}\n ${pbString}\n ${plString}\n `;\n}\n\nexport default spacing;\n"],"names":["spacingPropsToSpacingPropsInternal","props","__assign","margin","undefined","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","$margin","$marginTop","$marginRight","$marginBottom","$marginLeft","$marginVertical","$marginHorizontal","$padding","$paddingTop","$paddingRight","$paddingBottom","$paddingLeft","$paddingVertical","$paddingHorizontal","spacing","theme","ma","mv","mh","mt","mr","mb","ml","maString","concat","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl","paString","ptString","prString","pbString","plString"],"mappings":"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"}