npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.4.2 → 3.0.0-dev.5.0 - Mend

@pega/cosmos-react-core 3.0.0-dev.4.2 → 3.0.0-dev.5.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 (1987) hide show

package/lib/components/Badges/Alert.js CHANGED Viewed

@@ -18,7 +18,7 @@ export const StyledAlert = styled.div(props => {
 StyledAlert.defaultProps = defaultThemeProp;
 const Alert = forwardRef((props, ref) => {
     const { variant, ...restProps } = props;
-    return _jsx(StyledAlert, { ...restProps, variant: variant, ref: ref }, void 0);
+    return _jsx(StyledAlert, { ...restProps, variant: variant, ref: ref });
 });
 export default Alert;
 //# sourceMappingURL=Alert.js.map

package/lib/components/Badges/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAa,KAAK,CAAC,EAAE;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IACpD,OAAO,GAAG,CAAA;kBACM,UAAU;8BACE,WAAW;;;;;GAKtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAwB,EAAE,EAAE;IAC/D,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,KAAC,WAAW,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,~~WAAI~~,CAAC;AACpE,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface AlertProps extends NoChildrenProp {\n /** Determines the color to render the Badge as. This color is derived from the Theme. */\n variant: 'urgent' \| 'success';\n}\n\nexport const StyledAlert = styled.div<AlertProps>(props => {\n const alerts = props.theme.components.badges.alert;\n const { background } = alerts[props.variant];\n const { 'border-color': borderColor } = alerts.base;\n return css`\n background: ${background};\n border: 0.0625rem solid ${borderColor};\n border-radius: 100%;\n display: inline-block;\n height: 0.625rem;\n width: 0.625rem;\n `;\n});\n\nStyledAlert.defaultProps = defaultThemeProp;\n\nconst Alert: FC<ForwardProps & AlertProps> = forwardRef(\n (props: PropsWithoutRef<AlertProps>, ref: Ref<HTMLDivElement>) => {\n const { variant, ...restProps } = props;\n return <StyledAlert {...restProps} variant={variant} ref={ref} />;\n }\n);\n\nexport default Alert;\n"]}
1	+ {"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAa,KAAK,CAAC,EAAE;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IACpD,OAAO,GAAG,CAAA;kBACM,UAAU;8BACE,WAAW;;;;;GAKtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAwB,EAAE,EAAE;IAC/D,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,KAAC,WAAW,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AACpE,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface AlertProps extends NoChildrenProp {\n /** Determines the color to render the Badge as. This color is derived from the Theme. */\n variant: 'urgent' \| 'success';\n}\n\nexport const StyledAlert = styled.div<AlertProps>(props => {\n const alerts = props.theme.components.badges.alert;\n const { background } = alerts[props.variant];\n const { 'border-color': borderColor } = alerts.base;\n return css`\n background: ${background};\n border: 0.0625rem solid ${borderColor};\n border-radius: 100%;\n display: inline-block;\n height: 0.625rem;\n width: 0.625rem;\n `;\n});\n\nStyledAlert.defaultProps = defaultThemeProp;\n\nconst Alert: FC<ForwardProps & AlertProps> = forwardRef(\n (props: PropsWithoutRef<AlertProps>, ref: Ref<HTMLDivElement>) => {\n const { variant, ...restProps } = props;\n return <StyledAlert {...restProps} variant={variant} ref={ref} />;\n }\n);\n\nexport default Alert;\n"]}

package/lib/components/Badges/Count.js CHANGED Viewed

@@ -36,7 +36,7 @@ export const StyledCount = styled.span(props => {
 StyledCount.defaultProps = defaultThemeProp;
 const Count = forwardRef((props, ref) => {
     const { variant = 'default', children, ...restProps } = props;
-    return Number.isInteger(children) ? (_jsx(StyledCount, { variant: variant, ...restProps, ref: ref, children: children > 99 ? '99+' : `${children}` }, void 0)) : null;
+    return Number.isInteger(children) ? (_jsx(StyledCount, { variant: variant, ...restProps, ref: ref, children: children > 99 ? '99+' : `${children}` })) : null;
 });
 export default Count;
 //# sourceMappingURL=Count.js.map

package/lib/components/Badges/Count.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAajD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAEpC,KAAK,CAAC,EAAE;IACR,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAC9B,KAAK,CAAC,OAAO,KAAK,SAAS;QACzB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;QAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAEhG,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAEzF,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAErC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;kBACM,iBAAiB;kCACD,YAAY;aACjC,UAAU;;iBAEN,QAAQ,CAAC,GAAG;;;;MAIvB,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;QAC3B,GAAG,CAAA;mBACY,OAAO;KACrB;MACC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;QAC7B,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAyB,EAAE,EAAE;IAChE,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,KAAM,SAAS,EAAE,GAAG,EAAE,GAAG,YAClD,QAAmB,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,~~WACtC~~,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { ForwardProps, PropsWithDefaults } from '../../types';\nimport { calculateFontSize } from '../../styles';\n\nexport interface CountProps {\n /** Determines the color to render the Badge as. This color is derived from the Theme.\n * @default \"default\"\n /\n variant?: 'default' \| 'interactive' \| 'inverted' \| 'urgent';\n /* The count to be displayed within the Badge. /\n children: number \| null;\n}\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(props => {\n const { foreground, background } =\n props.variant === 'default'\n ? props.theme.components.badges.count.base\n : props.theme.components.badges.count[props.variant];\n\n const invertedBackground = tryCatch(() => transparentize(0.5, mix(0.2, background, '#ffffff')));\n\n const displayBackground = props.variant === 'inverted' ? invertedBackground : background;\n\n const borderRadius = props.theme.base['border-radius'];\n const { spacing } = props.theme.base;\n\n const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n return css`\n background: ${displayBackground};\n border-radius: calc(1.125 ${borderRadius});\n color: ${foreground};\n display: inline-block;\n font-size: ${fontSize.xxs};\n font-weight: bold;\n line-height: normal;\n text-align: center;\n ${props.children.length > 1 &&\n css`\n padding: 0 ${spacing};\n `}\n ${props.children.length === 1 &&\n css`\n width: 1.125rem;\n `}\n `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst Count: FC<ForwardProps & CountProps> = forwardRef(\n (props: PropsWithoutRef<CountProps>, ref: Ref<HTMLSpanElement>) => {\n const { variant = 'default', children, ...restProps } = props;\n return Number.isInteger(children) ? (\n <StyledCount variant={variant} {...restProps} ref={ref}>\n {(children as number) > 99 ? '99+' : `${children}`}\n </StyledCount>\n ) : null;\n }\n);\n\nexport default Count;\n"]}
1	+ {"version":3,"file":"Count.js","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAajD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAEpC,KAAK,CAAC,EAAE;IACR,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAC9B,KAAK,CAAC,OAAO,KAAK,SAAS;QACzB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;QAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAEhG,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAEzF,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAErC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;kBACM,iBAAiB;kCACD,YAAY;aACjC,UAAU;;iBAEN,QAAQ,CAAC,GAAG;;;;MAIvB,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;QAC3B,GAAG,CAAA;mBACY,OAAO;KACrB;MACC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;QAC7B,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,UAAU,CACrD,CAAC,KAAkC,EAAE,GAAyB,EAAE,EAAE;IAChE,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAClC,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,KAAM,SAAS,EAAE,GAAG,EAAE,GAAG,YAClD,QAAmB,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,GACtC,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { FC, PropsWithoutRef, Ref, forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { ForwardProps, PropsWithDefaults } from '../../types';\nimport { calculateFontSize } from '../../styles';\n\nexport interface CountProps {\n /** Determines the color to render the Badge as. This color is derived from the Theme.\n * @default \"default\"\n /\n variant?: 'default' \| 'interactive' \| 'inverted' \| 'urgent';\n /* The count to be displayed within the Badge. /\n children: number \| null;\n}\n\ntype CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;\n\nexport const StyledCount = styled.span<\n Pick<CountPropsWithDefaults, 'variant'> & { children: string }\n>(props => {\n const { foreground, background } =\n props.variant === 'default'\n ? props.theme.components.badges.count.base\n : props.theme.components.badges.count[props.variant];\n\n const invertedBackground = tryCatch(() => transparentize(0.5, mix(0.2, background, '#ffffff')));\n\n const displayBackground = props.variant === 'inverted' ? invertedBackground : background;\n\n const borderRadius = props.theme.base['border-radius'];\n const { spacing } = props.theme.base;\n\n const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n return css`\n background: ${displayBackground};\n border-radius: calc(1.125 ${borderRadius});\n color: ${foreground};\n display: inline-block;\n font-size: ${fontSize.xxs};\n font-weight: bold;\n line-height: normal;\n text-align: center;\n ${props.children.length > 1 &&\n css`\n padding: 0 ${spacing};\n `}\n ${props.children.length === 1 &&\n css`\n width: 1.125rem;\n `}\n `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst Count: FC<ForwardProps & CountProps> = forwardRef(\n (props: PropsWithoutRef<CountProps>, ref: Ref<HTMLSpanElement>) => {\n const { variant = 'default', children, ...restProps } = props;\n return Number.isInteger(children) ? (\n <StyledCount variant={variant} {...restProps} ref={ref}>\n {(children as number) > 99 ? '99+' : `${children}`}\n </StyledCount>\n ) : null;\n }\n);\n\nexport default Count;\n"]}

package/lib/components/Badges/Selection.d.ts CHANGED Viewed

@@ -1,17 +1,14 @@
 import { FC, MouseEvent, KeyboardEvent } from 'react';
 import { ForwardProps } from '../../types';
-import { FormControlProps } from '../FormControl';
 export interface SelectableProps {
     /** An id that is used by the onSelect and onRemove functions if they are provided. */
     id: string;
+    /** The content of the Badge. */
+    children: string;
     /** Takes an ID that represents the Badge. This function is called when the Badge is clicked. */
     onSelect?: (id: string) => void;
     /** Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. */
     onRemove?: (id: string) => void;
-    /** The content of the Badge. */
-    children: string;
-    /** Makes the input non editable and non clickable. The browser defaults to false. */
-    readOnly?: FormControlProps['readOnly'];
     /** Event handler called when the Badge is clicked. */
     onClick?: (event: MouseEvent) => void;
     /** Event handler fired on every keyup event. */

package/lib/components/Badges/Selection.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;~~AAM3C~~,~~OAAO,EAAE,gBAAgB,EAAE,~~MAAM,~~gBAAgB,CAAC;AAIlD,MAAM,~~WAAW,eAAe;IAC9B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,~~gGAAgG~~;~~IAChG~~,QAAQ,~~CAAC,~~EAAE,~~CAAC,EAAE,EAAE,~~MAAM,~~KAAK,IAAI,~~CAAC;~~IAChC~~,~~iHAAiH~~;~~IACjH~~,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,~~gCAAgC~~;~~IAChC~~,QAAQ,~~EAAE,MAAM,~~CAAC~~;IACjB~~,~~qFAAqF;IACrF~~,~~QAAQ,~~CAAC,EAAE,~~gBAAgB~~,~~CAAC~~,~~UAAU~~,~~CAAC~~,CAAC;~~IACxC~~,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,yGAsD3B,CAAC;AAEH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,~~CA6ClD~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"Selection.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAoC,aAAa,EAAE,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAS3C,MAAM,WAAW,eAAe;IAC9B,sFAAsF;IACtF,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,iHAAiH;IACjH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,yGAsD3B,CAAC;AAEH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAyDlD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Badges/Selection.js CHANGED Viewed

@@ -61,10 +61,9 @@ export const StyledSelectable = styled.div(props => {
     }
   `;
 });
-const Selectable = forwardRef((props, ref) => {
+const Selectable = forwardRef(({ id, children, onSelect, onRemove, onClick, onKeyUp, ...restProps }, ref) => {
     const consolidatedRef = useConsolidatedRef(ref);
     const t = useI18n();
-    const { id, onSelect, onRemove, children, onClick, onKeyUp, ...restProps } = props;
     const handleClick = (e) => {
         onClick?.(e);
         onSelect?.(id);
@@ -83,7 +82,7 @@ const Selectable = forwardRef((props, ref) => {
             onRemove?.(id);
         }
     };
-    return (_jsxs(BareButton, { role: 'button', tabIndex: '0', as: StyledSelectable, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [children, _jsx(BareButton, { tabIndex: '-1', onClick: handleCloseClick, "aria-label": `${t('remove')}`, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(BareButton, { role: 'button', tabIndex: '0', as: StyledSelectable, ref: consolidatedRef, onClick: handleClick, onKeyUp: handleKeyUp, ...restProps, children: [children, onRemove && (_jsx(BareButton, { tabIndex: '-1', onClick: handleCloseClick, "aria-label": `${t('remove')}`, children: _jsx(Icon, { name: 'times' }) }))] }));
 });
 export default Selectable;
 //# sourceMappingURL=Selection.js.map

package/lib/components/Badges/Selection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,UAAU,EAAuC,MAAM,OAAO,CAAC;AACxF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;~~AAG1D~~,YAAY,CAAC,SAAS,CAAC,CAAC;~~AAmBxB~~,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;IACjF,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAC1C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAErC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAC3E,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IACpE,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAElE,MAAM,MAAM,GAAG,KAAK,CAAC;IACrB,OAAO,GAAG,CAAA;kBACM,iBAAiB;;0BAET,MAAM,MAAM,YAAY;aACrC,UAAU;;;;;cAKT,MAAM;iBACH,OAAO;;;;;eAKT,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;0CACT,WAAW;;QAE7C,gBAAgB;iBACP,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;0CAKX,UAAU;;;;eAIrC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;yCACV,cAAc,0BAA0B,UAAU;;;QAGnF,gBAAgB;iBACP,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;MAI/C,UAAU;6BACa,OAAO;;;;GAIjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,UAAU,GAAuC,UAAU,CAC/D,~~CAAC~~,~~KAAuC~~,EAAE,~~GAA2B~~,~~EAAE~~,~~EAAE;IACvE~~,~~MAAM~~,~~eAAe~~,~~GAAG~~,~~kBAAkB~~,~~CAAC~~,~~GAAG~~,~~CAAC~~,~~CAAC;IAChD~~,~~MAAM,CAAC,~~GAAG,~~OAAO~~,~~EAAE~~,~~CAAC;IACpB~~,~~MAAM~~,~~EAAE~~,EAAE,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~OAAO~~,~~EAAE~~,~~OAAO~~,~~EAAE,~~GAAG,~~SAAS~~,EAAE,~~GAAG,KAAK,~~CAAC;~~IAEnF~~,MAAM,WAAW,GAAG,CAAC,CAA6B,EAAE,EAAE;QACpD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACb,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;QACzC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAgB,EAAE,EAAE;QACvC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACb,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;SAChB;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC/C,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,EACZ,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,KAChB,SAAS,aAEZ,QAAQ,~~EACT~~,KAAC,UAAU,IAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,gBAAgB,gBAAc,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,YAC/E,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,~~WAAG~~,~~WACV~~,~~YACF~~,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils/utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\~~nimport { FormControlProps } from '../FormControl';\~~n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps {\n /** An id that is used by the onSelect and onRemove functions if they are provided. /\n id: string;\n /* Takes an ID that represents the Badge. This function is called when the Badge is clicked. /\n onSelect?: (id: string) => void;\n /* Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. /\n onRemove?: (id: string) => void;\n /* The content of the Badge. /\n children: string;\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Event handler called when the Badge is clicked. /\n onClick?: (event: MouseEvent) => void;\n /* Event handler fired on every keyup event. /\n onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.div(props => {\n const { foreground, background } = props.theme.components.badges.selectable.base;\n const { dark } = props.theme.base.palette;\n const borderRadius = props.theme.base['border-radius'];\n const { spacing } = props.theme.base;\n\n const displayBackground = tryCatch(() => mix(0.15, background, '#ffffff'));\n const hoverBorder = tryCatch(() => mix(0.3, background, '#ffffff'));\n const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n const height = 1.125;\n return css`\n background: ${displayBackground};\n border: 0 solid transparent;\n border-radius: calc(${height} ${borderRadius});\n color: ${foreground};\n cursor: default;\n display: inline-flex;\n align-items: center;\n font-size: 0.75rem;\n height: ${height}rem;\n padding: 0 ${spacing};\n min-width: max-content;\n line-height: 1;\n\n &:hover {\n color: ${props.theme.base.palette.interactive};\n box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n ${StyledBareButton} {\n color: ${props.theme.base.palette.interactive};\n }\n }\n\n &:active {\n box-shadow: inset 0 0 0 0.0625rem ${background};\n }\n\n &:focus {\n color: ${props.theme.base.palette.interactive};\n box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n outline: none;\n\n ${StyledBareButton} {\n color: ${props.theme.base.palette.interactive};\n }\n }\n\n ${StyledIcon} {\n margin-inline-start: ${spacing};\n height: 1em;\n width: 1em;\n }\n `;\n});\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n (~~props~~: PropsWithoutRef<SelectableProps>, ref: Ref<HTMLButtonElement>) => {\n const consolidatedRef = useConsolidatedRef(ref);\n const t = useI18n();\n ~~const { id, onSelect, onRemove, children, onClick, onKeyUp, ...restProps } = props;\n~~\n const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n onClick?.(e);\n onSelect?.(id);\n };\n\n const handleCloseClick = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onRemove?.(id);\n };\n\n const handleKeyUp = (e: KeyboardEvent) => {\n onKeyUp?.(e);\n if (e.key === 'Enter') {\n onSelect?.(id);\n }\n\n if (e.key === 'Backspace' \|\| e.key === 'Delete') {\n onRemove?.(id);\n }\n };\n\n return (\n <BareButton\n role='button'\n tabIndex='0'\n as={StyledSelectable}\n ref={consolidatedRef}\n onClick={handleClick}\n onKeyUp={handleKeyUp}\n {...restProps}\n >\n {children}\n <BareButton tabIndex='-1' onClick={handleCloseClick} aria-label={`${t('remove')}`}>\n <Icon name='times' />\n </BareButton>\n </BareButton>\n );\n }\n);\n\nexport default Selectable;\n"]}
1	+ {"version":3,"file":"Selection.js","sourceRoot":"","sources":["../../../src/components/Badges/Selection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, MouseEvent, forwardRef, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils/utils';\nimport BareButton, { StyledBareButton } from '../Button/BareButton';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\n\nregisterIcon(timesIcon);\n\nexport interface SelectableProps {\n /** An id that is used by the onSelect and onRemove functions if they are provided. /\n id: string;\n /* The content of the Badge. /\n children: string;\n /* Takes an ID that represents the Badge. This function is called when the Badge is clicked. /\n onSelect?: (id: string) => void;\n /* Takes an ID that represents the Badge. This function is called when the Badge is closed by clicking the X. /\n onRemove?: (id: string) => void;\n /* Event handler called when the Badge is clicked. /\n onClick?: (event: MouseEvent) => void;\n /* Event handler fired on every keyup event. /\n onKeyUp?: (event: KeyboardEvent) => void;\n}\n\nexport const StyledSelectable = styled.div(props => {\n const { foreground, background } = props.theme.components.badges.selectable.base;\n const { dark } = props.theme.base.palette;\n const borderRadius = props.theme.base['border-radius'];\n const { spacing } = props.theme.base;\n\n const displayBackground = tryCatch(() => mix(0.15, background, '#ffffff'));\n const hoverBorder = tryCatch(() => mix(0.3, background, '#ffffff'));\n const boxShadowColor = tryCatch(() => transparentize(0.45, dark));\n\n const height = 1.125;\n return css`\n background: ${displayBackground};\n border: 0 solid transparent;\n border-radius: calc(${height} ${borderRadius});\n color: ${foreground};\n cursor: default;\n display: inline-flex;\n align-items: center;\n font-size: 0.75rem;\n height: ${height}rem;\n padding: 0 ${spacing};\n min-width: max-content;\n line-height: 1;\n\n &:hover {\n color: ${props.theme.base.palette.interactive};\n box-shadow: inset 0 0 0 0.0625rem ${hoverBorder};\n\n ${StyledBareButton} {\n color: ${props.theme.base.palette.interactive};\n }\n }\n\n &:active {\n box-shadow: inset 0 0 0 0.0625rem ${background};\n }\n\n &:focus {\n color: ${props.theme.base.palette.interactive};\n box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n outline: none;\n\n ${StyledBareButton} {\n color: ${props.theme.base.palette.interactive};\n }\n }\n\n ${StyledIcon} {\n margin-inline-start: ${spacing};\n height: 1em;\n width: 1em;\n }\n `;\n});\n\nconst Selectable: FC<SelectableProps & ForwardProps> = forwardRef(\n (\n {\n id,\n children,\n onSelect,\n onRemove,\n onClick,\n onKeyUp,\n ...restProps\n }: PropsWithoutRef<SelectableProps>,\n ref: Ref<HTMLButtonElement>\n ) => {\n const consolidatedRef = useConsolidatedRef(ref);\n const t = useI18n();\n\n const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n onClick?.(e);\n onSelect?.(id);\n };\n\n const handleCloseClick = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onRemove?.(id);\n };\n\n const handleKeyUp = (e: KeyboardEvent) => {\n onKeyUp?.(e);\n if (e.key === 'Enter') {\n onSelect?.(id);\n }\n\n if (e.key === 'Backspace' \|\| e.key === 'Delete') {\n onRemove?.(id);\n }\n };\n\n return (\n <BareButton\n role='button'\n tabIndex='0'\n as={StyledSelectable}\n ref={consolidatedRef}\n onClick={handleClick}\n onKeyUp={handleKeyUp}\n {...restProps}\n >\n {children}\n {onRemove && (\n <BareButton tabIndex='-1' onClick={handleCloseClick} aria-label={`${t('remove')}`}>\n <Icon name='times' />\n </BareButton>\n )}\n </BareButton>\n );\n }\n);\n\nexport default Selectable;\n"]}

package/lib/components/Badges/Status.js CHANGED Viewed

@@ -27,7 +27,7 @@ export const StyledStatus = styled.span(props => {
 });
 StyledStatus.defaultProps = defaultThemeProp;
 const Status = forwardRef(({ variant, children, ...restProps }, ref) => {
-    return (_jsx(StyledStatus, { ...restProps, variant: variant, ref: ref, children: children }, void 0));
+    return (_jsx(StyledStatus, { ...restProps, variant: variant, ref: ref, children: children }));
 });
 Status.defaultProps = {
     variant: 'info'

package/lib/components/Badges/Status.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmC,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAmC,UAAU,CACvD,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAgC,EACjE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,YAAY,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YACpD,QAAQ,~~WACI~~,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, ReactText, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\n\nexport interface StatusProps {\n /** Determines the color to render the Badge as. This color is derived from the Theme. /\n variant: 'success' \| 'urgent' \| 'warn' \| 'pending' \| 'info';\n /* The content of the Badge, transformed to uppercase. /\n children: ReactText;\n}\n\nexport const StyledStatus = styled.span<StatusProps>(props => {\n const { spacing } = props.theme.base;\n const borderRadius = props.theme.base['border-radius'];\n const { status } = props.theme.components.badges;\n\n const { background, foreground } = status[props.variant];\n const shadow = tryCatch(() => rgba(foreground, 0.1));\n const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n return css`\n background-color: ${background};\n border-radius: calc(0.25 ${borderRadius});\n color: ${foreground};\n box-shadow: inset 0 0 0 0.0625rem ${shadow};\n display: inline-block;\n font-size: ${fontSize.xxs};\n font-weight: bold;\n line-height: calc(${spacing} * 2.5);\n padding: 0 ${spacing};\n text-transform: uppercase;\n `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nconst Status: FC<StatusProps & ForwardProps> = forwardRef(\n (\n { variant, children, ...restProps }: PropsWithoutRef<StatusProps>,\n ref: Ref<HTMLSpanElement>\n ) => {\n return (\n <StyledStatus {...restProps} variant={variant} ref={ref}>\n {children}\n </StyledStatus>\n );\n }\n);\n\nStatus.defaultProps = {\n variant: 'info'\n};\n\nexport default Status;\n"]}
1	+ {"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmC,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAc,KAAK,CAAC,EAAE;IAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;wBACY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;wBAEL,OAAO;iBACd,OAAO;;GAErB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAmC,UAAU,CACvD,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAgC,EACjE,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,YAAY,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,YACpD,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, ReactText, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\n\nexport interface StatusProps {\n /** Determines the color to render the Badge as. This color is derived from the Theme. /\n variant: 'success' \| 'urgent' \| 'warn' \| 'pending' \| 'info';\n /* The content of the Badge, transformed to uppercase. /\n children: ReactText;\n}\n\nexport const StyledStatus = styled.span<StatusProps>(props => {\n const { spacing } = props.theme.base;\n const borderRadius = props.theme.base['border-radius'];\n const { status } = props.theme.components.badges;\n\n const { background, foreground } = status[props.variant];\n const shadow = tryCatch(() => rgba(foreground, 0.1));\n const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n return css`\n background-color: ${background};\n border-radius: calc(0.25 ${borderRadius});\n color: ${foreground};\n box-shadow: inset 0 0 0 0.0625rem ${shadow};\n display: inline-block;\n font-size: ${fontSize.xxs};\n font-weight: bold;\n line-height: calc(${spacing} * 2.5);\n padding: 0 ${spacing};\n text-transform: uppercase;\n `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nconst Status: FC<StatusProps & ForwardProps> = forwardRef(\n (\n { variant, children, ...restProps }: PropsWithoutRef<StatusProps>,\n ref: Ref<HTMLSpanElement>\n ) => {\n return (\n <StyledStatus {...restProps} variant={variant} ref={ref}>\n {children}\n </StyledStatus>\n );\n }\n);\n\nStatus.defaultProps = {\n variant: 'info'\n};\n\nexport default Status;\n"]}

package/lib/components/Badges/Tag.js CHANGED Viewed

@@ -36,7 +36,7 @@ export const StyledTag = styled.span(props => {
 });
 StyledTag.defaultProps = defaultThemeProp;
 const Tag = forwardRef(({ children, ...restProps }, ref) => {
-    return (_jsx(StyledTag, { ...restProps, tabIndex: 0, ref: ref, children: children }, void 0));
+    return (_jsx(StyledTag, { ...restProps, tabIndex: 0, ref: ref, children: children }));
 });
 export default Tag;
 //# sourceMappingURL=Tag.js.map

package/lib/components/Badges/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ7C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC;IAErE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,CACtE,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAEhD,OAAO,GAAG,CAAA;8BACkB,WAAW;iCACR,YAAY;aAChC,UAAU;;;iBAGN,OAAO;;;sBAGF,UAAU;;;;sBAIV,UAAU;oBACZ,SAAS;;;;;gCAKG,WAAW;;;GAGxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAgC,UAAU,CACjD,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAA6B,EAAE,GAAyB,EAAE,EAAE;IACnF,OAAO,CACL,KAAC,SAAS,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,YAC5C,QAAQ,~~WACC~~,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { ForwardProps } from '../../types';\n\nexport interface TagProps {\n /** The content of the Badge. /\n children: string;\n}\n\nexport const StyledTag = styled.span(props => {\n const borderRadius = props.theme.base['border-radius'];\n const { spacing } = props.theme.base;\n const { foreground, background } = props.theme.components.badges.tag;\n\n const borderColor = tryCatch(() =>\n mix(0.85, props.theme.base.palette['primary-background'], background)\n );\n const boxShadow = props.theme.base.shadow.focus;\n\n return css`\n border: 0.0625rem solid ${borderColor};\n border-radius: calc(0.25 ${borderRadius});\n color: ${foreground};\n display: inline-block;\n font-size: 0.75rem;\n padding: 0 ${spacing};\n\n &:hover {\n border-color: ${background};\n }\n\n &:focus {\n border-color: ${background};\n box-shadow: ${boxShadow};\n outline: none;\n }\n\n &:active {\n border: 0.0625rem solid ${borderColor};\n box-shadow: none;\n }\n `;\n});\n\nStyledTag.defaultProps = defaultThemeProp;\n\nconst Tag: FC<TagProps & ForwardProps> = forwardRef(\n ({ children, ...restProps }: PropsWithoutRef<TagProps>, ref: Ref<HTMLSpanElement>) => {\n return (\n <StyledTag {...restProps} tabIndex={0} ref={ref}>\n {children}\n </StyledTag>\n );\n }\n);\n\nexport default Tag;\n"]}
1	+ {"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Badges/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ7C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAC3C,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC;IAErE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,CACtE,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAEhD,OAAO,GAAG,CAAA;8BACkB,WAAW;iCACR,YAAY;aAChC,UAAU;;;iBAGN,OAAO;;;sBAGF,UAAU;;;;sBAIV,UAAU;oBACZ,SAAS;;;;;gCAKG,WAAW;;;GAGxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,GAAG,GAAgC,UAAU,CACjD,CAAC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAA6B,EAAE,GAAyB,EAAE,EAAE;IACnF,OAAO,CACL,KAAC,SAAS,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,YAC5C,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { ForwardProps } from '../../types';\n\nexport interface TagProps {\n /** The content of the Badge. /\n children: string;\n}\n\nexport const StyledTag = styled.span(props => {\n const borderRadius = props.theme.base['border-radius'];\n const { spacing } = props.theme.base;\n const { foreground, background } = props.theme.components.badges.tag;\n\n const borderColor = tryCatch(() =>\n mix(0.85, props.theme.base.palette['primary-background'], background)\n );\n const boxShadow = props.theme.base.shadow.focus;\n\n return css`\n border: 0.0625rem solid ${borderColor};\n border-radius: calc(0.25 ${borderRadius});\n color: ${foreground};\n display: inline-block;\n font-size: 0.75rem;\n padding: 0 ${spacing};\n\n &:hover {\n border-color: ${background};\n }\n\n &:focus {\n border-color: ${background};\n box-shadow: ${boxShadow};\n outline: none;\n }\n\n &:active {\n border: 0.0625rem solid ${borderColor};\n box-shadow: none;\n }\n `;\n});\n\nStyledTag.defaultProps = defaultThemeProp;\n\nconst Tag: FC<TagProps & ForwardProps> = forwardRef(\n ({ children, ...restProps }: PropsWithoutRef<TagProps>, ref: Ref<HTMLSpanElement>) => {\n return (\n <StyledTag {...restProps} tabIndex={0} ref={ref}>\n {children}\n </StyledTag>\n );\n }\n);\n\nexport default Tag;\n"]}

package/lib/components/Banner/Banner.js CHANGED Viewed

@@ -107,13 +107,13 @@ const Banner = forwardRef(({ variant, heading, headingTag = 'h2', messages, onDi
         bannerIcon = 'warn';
     }
     const t = useI18n();
-    return (_jsxs(Flex, { ...restProps, container: true, as: StyledBanner, role: role, "aria-live": ariaLive, id: id, ref: ref, children: [_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { shrink: 0 }, as: StyledBannerStatus, variant: variant, children: _jsx(Icon, { name: bannerIcon }, void 0) }, void 0), _jsxs(Flex, { container: singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }, item: { grow: 1 }, as: StyledBannerContent, hasDismiss: hasDismiss, children: [heading && (_jsx(Text, { variant: 'h4', as: headingTag, children: heading }, void 0)), _jsx(StyledBannerMessages, { inline: inline, children: messages.map((msg, index) => (
+    return (_jsxs(Flex, { ...restProps, container: true, as: StyledBanner, role: role, "aria-live": ariaLive, id: id, ref: ref, children: [_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { shrink: 0 }, as: StyledBannerStatus, variant: variant, children: _jsx(Icon, { name: bannerIcon }) }), _jsxs(Flex, { container: singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }, item: { grow: 1 }, as: StyledBannerContent, hasDismiss: hasDismiss, children: [heading && (_jsx(Text, { variant: 'h4', as: headingTag, children: heading })), _jsx(StyledBannerMessages, { inline: inline, children: messages.map((msg, index) => (
                         // eslint-disable-next-line react/no-array-index-key
-                        _jsx(StyledBannerMessage, { inline: inline, children: msg }, `${msg}+${index}`))) }, void 0), action] }, void 0), onDismiss && (_jsx(Flex, { container: {
+                        _jsx(StyledBannerMessage, { inline: inline, children: msg }, `${msg}+${index}`))) }), action] }), onDismiss && (_jsx(Flex, { container: {
                     direction: 'column',
                     justify: singleLine ? 'center' : undefined,
                     pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]
-                }, as: StyledBannerDismissColumn, children: _jsx(StyledBannerDismissButton, { variant: 'simple', icon: true, onClick: () => onDismiss(id), "aria-label": t('banner_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0) }, void 0))] }, void 0));
+                }, as: StyledBannerDismissColumn, children: _jsx(StyledBannerDismissButton, { variant: 'simple', icon: true, onClick: () => onDismiss(id), "aria-label": t('banner_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) }) }))] }));
 });
 export default Banner;
 //# sourceMappingURL=Banner.js.map

package/lib/components/Banner/Banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,UAAU,EAAwB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,YAAY,CAAC,SAAS,CAAC,CAAC;AAuBxB,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAsB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACvF,OAAO,GAAG,CAAA;;MAEN,MAAM;QACR,GAAG,CAAA;;2BAEoB,KAAK,CAAC,IAAI,CAAC,OAAO;KACxC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA0B,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IAC/F,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;8BACd,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;iBAE9C,GAAG,YAAY,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;oBAClD,GAAG,YAAY,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;MAGnE,UAAU;QACV,GAAG,CAAA;;0CAEiC,KAAK,CAAC,IAAI,CAAC,OAAO;;OAGxD;GACD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAsB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IACtF,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;MAC7C,MAAM;QACR,GAAG,CAAA;;2BAEoB,KAAK,CAAC,IAAI,CAAC,OAAO;KACxC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;iBACK,GAAG,YAAY,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;oBAClD,GAAG,YAAY,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;8BAC3C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;GAE5D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAE1D,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAA+B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5D,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,WAAW,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC;QAC5D,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;QAC1C,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,CACtB,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,GAAG,CAAA;wBACY,EAAE;;aAEb,KAAK;iBACD,KAAK,YAAY,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;oBACpD,KAAK,YAAY,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;GAExE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU;qBAC7B,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;GACxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAkD,UAAU,CACtE,CACE,EACE,OAAO,EACP,OAAO,EACP,UAAU,GAAG,IAAI,EACjB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,EAAE,EACF,GAAG,SAAS,EACiB,EAC/B,GAAuB,EACvB,EAAE;IACF,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC;IACtC,MAAM,UAAU,GAAG,CAAC,CAAC,SAAS,CAAC;IAE/B,IAAI,UAAU,GAAG,YAAY,CAAC;IAC9B,IAAI,IAAI,GAAuB,OAAO,CAAC;IACvC,IAAI,QAAQ,GAAG,WAAW,CAAC;IAE3B,IAAI,OAAO,KAAK,MAAM,EAAE;QACtB,UAAU,GAAG,YAAY,CAAC;QAC1B,QAAQ,GAAG,QAAQ,CAAC;QACpB,IAAI,GAAG,SAAS,CAAC;KAClB;SAAM,IAAI,OAAO,KAAK,SAAS,EAAE;QAChC,UAAU,GAAG,OAAO,CAAC;QACrB,QAAQ,GAAG,QAAQ,CAAC;QACpB,IAAI,GAAG,SAAS,CAAC;KAClB;SAAM,IAAI,OAAO,KAAK,SAAS,EAAE;QAChC,UAAU,GAAG,MAAM,CAAC;KACrB;IAED,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,QACT,EAAE,EAAE,YAAY,EAChB,IAAI,EAAE,IAAI,eACC,QAAQ,EACnB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,aAER,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,EACtB,OAAO,EAAE,OAAO,YAEhB,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,WAAI,WACrB,EAEP,MAAC,IAAI,IACH,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAClF,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,mBAAmB,EACvB,UAAU,EAAE,UAAU,aAErB,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,UAAU,YAC9B,OAAO,WACH,CACR,EAED,KAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,YACjC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC;wBAC5B,oDAAoD;wBACpD,KAAC,mBAAmB,IAAyB,MAAM,EAAE,MAAM,YACxD,GAAG,IADoB,GAAG,GAAG,IAAI,KAAK,EAAE,CAErB,CACvB,CAAC,WACmB,EAEtB,MAAM,YACF,EAEN,SAAS,IAAI,CACZ,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;oBAC1C,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;iBACzC,EACD,EAAE,EAAE,yBAAyB,YAE7B,KAAC,yBAAyB,IACxB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,gBAChB,CAAC,CAAC,kCAAkC,CAAC,YAEjD,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACK,WACvB,CACR,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport Button from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nregisterIcon(timesIcon);\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n /** Controls the styling of the Banner. /\n variant: 'urgent' \| 'success' \| 'warning' \| 'info';\n /* Heading text for the Banner. /\n heading?: string;\n /\n The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n * @default \"h2\"\n /\n headingTag?: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n /* Pass one or more descriptive messages to inform the user. /\n messages: string[];\n /* ID for the Banner. Used both as onDismiss callback arg and DOM id. /\n id: string;\n /* Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. /\n action?: ReactNode;\n /* Callback when user explicitly dismisses the Banner. /\n onDismiss?: (id: string) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBannerMessages = styled.ul<{ inline: boolean }>(({ theme, inline }) => {\n return css`\n list-style-position: inside;\n ${inline &&\n css`\n display: inline-block;\n margin-inline-end: ${theme.base.spacing};\n `}\n `;\n});\n\nStyledBannerMessages.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ hasDismiss: boolean }>(({ theme, hasDismiss }) => {\n const { end } = useDirection();\n return css`\n position: relative;\n padding: calc(1.5 ${theme.base.spacing});\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-inline-start: none;\n border-top-${end}-radius: ${theme.components.card['border-radius']};\n border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n\n ${\n hasDismiss &&\n css`\n border-inline-end: none;\n padding-inline-end: calc(0.75 * ${theme.base.spacing});\n border-radius: 0;\n `\n }\n `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.li<{ inline: boolean }>(({ inline, theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n ${inline &&\n css`\n display: inline-block;\n margin-inline-end: ${theme.base.spacing};\n `}\n `;\n});\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissColumn = styled.div(({ theme }) => {\n const { end } = useDirection();\n return css`\n border-top-${end}-radius: ${theme.components.card['border-radius']};\n border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-inline-start: none;\n `;\n});\n\nStyledBannerDismissColumn.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissButton = styled(Button)``;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n const { background: bg } = theme.components.banner[variant];\n const color = tryCatch(() =>\n getContrast(bg, theme.base.palette['primary-background']) >= 3\n ? theme.base.palette['primary-background']\n : readableColor(bg)\n );\n\n const { start } = useDirection();\n\n return css`\n background-color: ${bg};\n width: 3.125rem;\n color: ${color};\n border-top-${start}-radius: ${theme.components.card['border-radius']};\n border-bottom-${start}-radius: ${theme.components.card['border-radius']};\n font-size: 1.25rem;\n `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div(({ theme }) => {\n return css`\n background: ${theme.components.card.background};\n border-radius: ${theme.components.card['border-radius']};\n `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n (\n {\n variant,\n heading,\n headingTag = 'h2',\n messages,\n onDismiss,\n action,\n id,\n ...restProps\n }: PropsWithoutRef<BannerProps>,\n ref: BannerProps['ref']\n ) => {\n const inline = messages.length === 1;\n const singleLine = inline && !heading;\n const hasDismiss = !!onDismiss;\n\n let bannerIcon = 'warn-solid';\n let role: string \| undefined = 'alert';\n let ariaLive = 'assertive';\n\n if (variant === 'info') {\n bannerIcon = 'bulb-solid';\n ariaLive = 'polite';\n role = undefined;\n } else if (variant === 'success') {\n bannerIcon = 'check';\n ariaLive = 'polite';\n role = undefined;\n } else if (variant === 'warning') {\n bannerIcon = 'warn';\n }\n\n const t = useI18n();\n\n return (\n <Flex\n {...restProps}\n container\n as={StyledBanner}\n role={role}\n aria-live={ariaLive}\n id={id}\n ref={ref}\n >\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n item={{ shrink: 0 }}\n as={StyledBannerStatus}\n variant={variant}\n >\n <Icon name={bannerIcon} />\n </Flex>\n\n <Flex\n container={singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }}\n item={{ grow: 1 }}\n as={StyledBannerContent}\n hasDismiss={hasDismiss}\n >\n {heading && (\n <Text variant='h4' as={headingTag}>\n {heading}\n </Text>\n )}\n\n <StyledBannerMessages inline={inline}>\n {messages.map((msg, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <StyledBannerMessage key={`${msg}+${index}`} inline={inline}>\n {msg}\n </StyledBannerMessage>\n ))}\n </StyledBannerMessages>\n\n {action}\n </Flex>\n\n {onDismiss && (\n <Flex\n container={{\n direction: 'column',\n justify: singleLine ? 'center' : undefined,\n pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]\n }}\n as={StyledBannerDismissColumn}\n >\n <StyledBannerDismissButton\n variant='simple'\n icon\n onClick={() => onDismiss(id)}\n aria-label={t('banner_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </StyledBannerDismissButton>\n </Flex>\n )}\n </Flex>\n );\n }\n);\n\nexport default Banner;\n"]}
1	+ {"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport Button from '../Button';\nimport { tryCatch } from '../../utils';\nimport { useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nregisterIcon(timesIcon);\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n /** Controls the styling of the Banner. /\n variant: 'urgent' \| 'success' \| 'warning' \| 'info';\n /* Heading text for the Banner. /\n heading?: string;\n /\n The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n * @default \"h2\"\n /\n headingTag?: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n /* Pass one or more descriptive messages to inform the user. /\n messages: string[];\n /* ID for the Banner. Used both as onDismiss callback arg and DOM id. /\n id: string;\n /* Link or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler. /\n action?: ReactNode;\n /* Callback when user explicitly dismisses the Banner. /\n onDismiss?: (id: string) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBannerMessages = styled.ul<{ inline: boolean }>(({ theme, inline }) => {\n return css`\n list-style-position: inside;\n ${inline &&\n css`\n display: inline-block;\n margin-inline-end: ${theme.base.spacing};\n `}\n `;\n});\n\nStyledBannerMessages.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div<{ hasDismiss: boolean }>(({ theme, hasDismiss }) => {\n const { end } = useDirection();\n return css`\n position: relative;\n padding: calc(1.5 ${theme.base.spacing});\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-inline-start: none;\n border-top-${end}-radius: ${theme.components.card['border-radius']};\n border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n\n ${\n hasDismiss &&\n css`\n border-inline-end: none;\n padding-inline-end: calc(0.75 * ${theme.base.spacing});\n border-radius: 0;\n `\n }\n `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.li<{ inline: boolean }>(({ inline, theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n ${inline &&\n css`\n display: inline-block;\n margin-inline-end: ${theme.base.spacing};\n `}\n `;\n});\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissColumn = styled.div(({ theme }) => {\n const { end } = useDirection();\n return css`\n border-top-${end}-radius: ${theme.components.card['border-radius']};\n border-bottom-${end}-radius: ${theme.components.card['border-radius']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-inline-start: none;\n `;\n});\n\nStyledBannerDismissColumn.defaultProps = defaultThemeProp;\n\nexport const StyledBannerDismissButton = styled(Button)``;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n const { background: bg } = theme.components.banner[variant];\n const color = tryCatch(() =>\n getContrast(bg, theme.base.palette['primary-background']) >= 3\n ? theme.base.palette['primary-background']\n : readableColor(bg)\n );\n\n const { start } = useDirection();\n\n return css`\n background-color: ${bg};\n width: 3.125rem;\n color: ${color};\n border-top-${start}-radius: ${theme.components.card['border-radius']};\n border-bottom-${start}-radius: ${theme.components.card['border-radius']};\n font-size: 1.25rem;\n `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div(({ theme }) => {\n return css`\n background: ${theme.components.card.background};\n border-radius: ${theme.components.card['border-radius']};\n `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n (\n {\n variant,\n heading,\n headingTag = 'h2',\n messages,\n onDismiss,\n action,\n id,\n ...restProps\n }: PropsWithoutRef<BannerProps>,\n ref: BannerProps['ref']\n ) => {\n const inline = messages.length === 1;\n const singleLine = inline && !heading;\n const hasDismiss = !!onDismiss;\n\n let bannerIcon = 'warn-solid';\n let role: string \| undefined = 'alert';\n let ariaLive = 'assertive';\n\n if (variant === 'info') {\n bannerIcon = 'bulb-solid';\n ariaLive = 'polite';\n role = undefined;\n } else if (variant === 'success') {\n bannerIcon = 'check';\n ariaLive = 'polite';\n role = undefined;\n } else if (variant === 'warning') {\n bannerIcon = 'warn';\n }\n\n const t = useI18n();\n\n return (\n <Flex\n {...restProps}\n container\n as={StyledBanner}\n role={role}\n aria-live={ariaLive}\n id={id}\n ref={ref}\n >\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n item={{ shrink: 0 }}\n as={StyledBannerStatus}\n variant={variant}\n >\n <Icon name={bannerIcon} />\n </Flex>\n\n <Flex\n container={singleLine ? { alignItems: 'center' } : { direction: 'column', gap: 1 }}\n item={{ grow: 1 }}\n as={StyledBannerContent}\n hasDismiss={hasDismiss}\n >\n {heading && (\n <Text variant='h4' as={headingTag}>\n {heading}\n </Text>\n )}\n\n <StyledBannerMessages inline={inline}>\n {messages.map((msg, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <StyledBannerMessage key={`${msg}+${index}`} inline={inline}>\n {msg}\n </StyledBannerMessage>\n ))}\n </StyledBannerMessages>\n\n {action}\n </Flex>\n\n {onDismiss && (\n <Flex\n container={{\n direction: 'column',\n justify: singleLine ? 'center' : undefined,\n pad: [singleLine ? 0.5 : 1, 0.5, 0.5, 0]\n }}\n as={StyledBannerDismissColumn}\n >\n <StyledBannerDismissButton\n variant='simple'\n icon\n onClick={() => onDismiss(id)}\n aria-label={t('banner_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </StyledBannerDismissButton>\n </Flex>\n )}\n </Flex>\n );\n }\n);\n\nexport default Banner;\n"]}

package/lib/components/Boolean/BooleanDisplay.js CHANGED Viewed

@@ -18,7 +18,7 @@ const BooleanDisplay = forwardRef(({ value, trueLabel, falseLabel, ...restProps
     const displayText = value
         ? trueLabel || t('boolean_display_true_label')
         : falseLabel || t('boolean_display_false_label');
-    return (_jsx(StyledBooleanDisplay, { ref: ref, ...restProps, children: value !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: iconName }, void 0), displayText] }, void 0)) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0)) }, void 0));
+    return (_jsx(StyledBooleanDisplay, { ref: ref, ...restProps, children: value !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: iconName }), displayText] })) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" })) }));
 });
 export default BooleanDisplay;
 //# sourceMappingURL=BooleanDisplay.js.map

package/lib/components/Boolean/BooleanDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BooleanDisplay.js","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiB3C,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;MACN,UAAU;2BACW,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAwC,EACpF,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC3C,MAAM,WAAW,GAAG,KAAK;QACvB,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,4BAA4B,CAAC;QAC9C,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,6BAA6B,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,8BACE,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,~~WAAI~~,EACvB,WAAW,~~YACX~~,CACJ,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,~~qCAAsB~~,CAC/C,~~WACoB~~,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Icon, { StyledIcon } from '../Icon';\n\nexport interface BooleanDisplayProps extends BaseProps, NoChildrenProp {\n /** Boolean value /\n value?: boolean;\n /* The text to be displayed when value is true.\n * @default \"Yes\"\n /\n trueLabel?: string;\n /* The text to be displayed when value is false.\n * @default \"No\"\n /\n falseLabel?: string;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement>;\n}\n\nconst StyledBooleanDisplay = styled.span(({ theme }) => {\n return css`\n ${StyledIcon} {\n margin-inline-end: ${theme.base.spacing};\n }\n `;\n});\n\nStyledBooleanDisplay.defaultProps = defaultThemeProp;\n\nconst BooleanDisplay: FunctionComponent<BooleanDisplayProps & ForwardProps> = forwardRef(\n (\n { value, trueLabel, falseLabel, ...restProps }: PropsWithoutRef<BooleanDisplayProps>,\n ref: BooleanDisplayProps['ref']\n ) => {\n const t = useI18n();\n\n const iconName = value ? 'check' : 'times';\n const displayText = value\n ? trueLabel \|\| t('boolean_display_true_label')\n : falseLabel \|\| t('boolean_display_false_label');\n\n return (\n <StyledBooleanDisplay ref={ref} {...restProps}>\n {value !== undefined ? (\n <>\n <Icon name={iconName} />\n {displayText}\n </>\n ) : (\n <span aria-hidden='true'>––</span>\n )}\n </StyledBooleanDisplay>\n );\n }\n);\n\nexport default BooleanDisplay;\n"]}
1	+ {"version":3,"file":"BooleanDisplay.js","sourceRoot":"","sources":["../../../src/components/Boolean/BooleanDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiB3C,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;MACN,UAAU;2BACW,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAwC,EACpF,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC3C,MAAM,WAAW,GAAG,KAAK;QACvB,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,4BAA4B,CAAC;QAC9C,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,6BAA6B,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,8BACE,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,EACvB,WAAW,IACX,CACJ,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,GACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Icon, { StyledIcon } from '../Icon';\n\nexport interface BooleanDisplayProps extends BaseProps, NoChildrenProp {\n /** Boolean value /\n value?: boolean;\n /* The text to be displayed when value is true.\n * @default \"Yes\"\n /\n trueLabel?: string;\n /* The text to be displayed when value is false.\n * @default \"No\"\n /\n falseLabel?: string;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement>;\n}\n\nconst StyledBooleanDisplay = styled.span(({ theme }) => {\n return css`\n ${StyledIcon} {\n margin-inline-end: ${theme.base.spacing};\n }\n `;\n});\n\nStyledBooleanDisplay.defaultProps = defaultThemeProp;\n\nconst BooleanDisplay: FunctionComponent<BooleanDisplayProps & ForwardProps> = forwardRef(\n (\n { value, trueLabel, falseLabel, ...restProps }: PropsWithoutRef<BooleanDisplayProps>,\n ref: BooleanDisplayProps['ref']\n ) => {\n const t = useI18n();\n\n const iconName = value ? 'check' : 'times';\n const displayText = value\n ? trueLabel \|\| t('boolean_display_true_label')\n : falseLabel \|\| t('boolean_display_false_label');\n\n return (\n <StyledBooleanDisplay ref={ref} {...restProps}>\n {value !== undefined ? (\n <>\n <Icon name={iconName} />\n {displayText}\n </>\n ) : (\n <span aria-hidden='true'>––</span>\n )}\n </StyledBooleanDisplay>\n );\n }\n);\n\nexport default BooleanDisplay;\n"]}

package/lib/components/Breadcrumbs/Breadcrumbs.js CHANGED Viewed

@@ -72,7 +72,7 @@ const Breadcrumbs = forwardRef(({ path, ...restProps }, ref) => {
         }
     }, [breadcrumbsEl, numMenuItems]);
     const { end } = useDirection();
-    return (_jsxs(Flex, { ...restProps, container: { gap: 1, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: numMenuItems === path.length - 1, ref: breadcrumbRef, children: [numMenuItems > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Links', iconOnly: true, variant: 'link', icon: 'folder-hierarchy-solid', menu: { items: path.slice(0, numMenuItems).reverse() } }, void 0), _jsx(Icon, { name: `caret-${end}` }, void 0)] }, void 0)), path.slice(numMenuItems).map((crumb, index) => {
+    return (_jsxs(Flex, { ...restProps, container: { gap: 1, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: numMenuItems === path.length - 1, ref: breadcrumbRef, children: [numMenuItems > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Links', iconOnly: true, variant: 'link', icon: 'folder-hierarchy-solid', menu: { items: path.slice(0, numMenuItems).reverse() } }), _jsx(Icon, { name: `caret-${end}` })] })), path.slice(numMenuItems).map((crumb, index) => {
                 const { id, primary, visual, ...restCrumbProps } = crumb;
                 let Comp;
                 if (crumb.href)
@@ -83,8 +83,8 @@ const Breadcrumbs = forwardRef(({ path, ...restProps }, ref) => {
                     Comp = (_jsxs(Text, { ...restCrumbProps, children: [visual, " ", primary] }, id));
                 if (index === path.slice(numMenuItems).length - 1)
                     return Comp;
-                return (_jsxs(Fragment, { children: [Comp, _jsx(Icon, { name: `caret-${end}` }, void 0)] }, id));
-            })] }, void 0));
+                return (_jsxs(Fragment, { children: [Comp, _jsx(Icon, { name: `caret-${end}` })] }, id));
+            })] }));
 });
 export default Breadcrumbs;
 //# sourceMappingURL=Breadcrumbs.js.map

package/lib/components/Breadcrumbs/Breadcrumbs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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~~WACtD~~,EACF,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,~~WAAI~~,~~YAC7B~~,CACJ,EACA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7C,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;gBACzD,IAAI,IAAI,CAAC;gBACT,IAAI,KAAK,CAAC,IAAI;oBACZ,IAAI,GAAG,CACL,MAAC,IAAI,IAAU,IAAI,EAAE,KAAK,CAAC,IAAI,KAAM,cAAc,aAChD,MAAM,OAAG,OAAO,KADR,EAAE,CAEN,CACR,CAAC;qBACC,IAAI,KAAK,CAAC,OAAO;oBACpB,IAAI,GAAG,CACL,MAAC,MAAM,IAAU,OAAO,EAAC,MAAM,KAAK,cAAc,aAC/C,MAAM,OAAG,OAAO,KADN,EAAE,CAEN,CACV,CAAC;;oBAEF,IAAI,GAAG,CACL,MAAC,IAAI,OAAc,cAAc,aAC9B,MAAM,OAAG,OAAO,KADR,EAAE,CAEN,CACR,CAAC;gBAEJ,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,CAAC;oBAAE,OAAO,IAAI,CAAC;gBAE/D,OAAO,CACL,MAAC,QAAQ,eACN,IAAI,EACL,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,~~WAAI~~,KAFjB,EAAE,CAGN,CACZ,CAAC;YACJ,CAAC,CAAC,~~YACG~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n forwardRef,\n Fragment,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { debounce } from '../../utils';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. /\n path: MenuItemProps[];\n /* Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n ({ oneItemRemaining }) => css`\n white-space: nowrap;\n overflow: visible;\n visibility: hidden;\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n }\n\n ${oneItemRemaining &&\n css`\n & > :last-child {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n `}\n `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n const [numMenuItems, setNumMenuItems] = useState(0);\n const minInlineWidth = useRef(0);\n\n const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minInlineWidth.current) {\n setNumMenuItems(curr => {\n if (curr === 0) return curr;\n return curr - 1;\n });\n }\n }, 100);\n\n const resizeObserver = new ResizeObserver(debouncedResize);\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n setNumMenuItems(curr => {\n if (curr === path.length - 1) return curr;\n return curr + 1;\n });\n } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n },\n { root: breadcrumbsEl, threshold: 1 }\n );\n\n useEffect(() => {\n if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n resizeObserver.observe(breadcrumbsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [breadcrumbsEl, numMenuItems]);\n\n const { end } = useDirection();\n\n return (\n <Flex\n {...restProps}\n container={{ gap: 1, alignItems: 'center' }}\n as={StyledBreadcrumbs}\n oneItemRemaining={numMenuItems === path.length - 1}\n ref={breadcrumbRef}\n >\n {numMenuItems > 0 && (\n <>\n <MenuButton\n text='Links'\n iconOnly\n variant='link'\n icon='folder-hierarchy-solid'\n menu={{ items: path.slice(0, numMenuItems).reverse() }}\n />\n <Icon name={`caret-${end}`} />\n </>\n )}\n {path.slice(numMenuItems).map((crumb, index) => {\n const { id, primary, visual, ...restCrumbProps } = crumb;\n let Comp;\n if (crumb.href)\n Comp = (\n <Link key={id} href={crumb.href} {...restCrumbProps}>\n {visual} {primary}\n </Link>\n );\n else if (crumb.onClick)\n Comp = (\n <Button key={id} variant='link' {...restCrumbProps}>\n {visual} {primary}\n </Button>\n );\n else\n Comp = (\n <Text key={id} {...restCrumbProps}>\n {visual} {primary}\n </Text>\n );\n\n if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n return (\n <Fragment key={id}>\n {Comp}\n <Icon name={`caret-${end}`} />\n </Fragment>\n );\n })}\n </Flex>\n );\n }\n);\n\nexport default Breadcrumbs;\n"]}
1	+ {"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n Fragment,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { debounce } from '../../utils';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. /\n path: MenuItemProps[];\n /* Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n ({ oneItemRemaining }) => css`\n white-space: nowrap;\n overflow: visible;\n visibility: hidden;\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n }\n\n ${oneItemRemaining &&\n css`\n & > :last-child {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n `}\n `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n const [numMenuItems, setNumMenuItems] = useState(0);\n const minInlineWidth = useRef(0);\n\n const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minInlineWidth.current) {\n setNumMenuItems(curr => {\n if (curr === 0) return curr;\n return curr - 1;\n });\n }\n }, 100);\n\n const resizeObserver = new ResizeObserver(debouncedResize);\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n setNumMenuItems(curr => {\n if (curr === path.length - 1) return curr;\n return curr + 1;\n });\n } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n },\n { root: breadcrumbsEl, threshold: 1 }\n );\n\n useEffect(() => {\n if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n resizeObserver.observe(breadcrumbsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [breadcrumbsEl, numMenuItems]);\n\n const { end } = useDirection();\n\n return (\n <Flex\n {...restProps}\n container={{ gap: 1, alignItems: 'center' }}\n as={StyledBreadcrumbs}\n oneItemRemaining={numMenuItems === path.length - 1}\n ref={breadcrumbRef}\n >\n {numMenuItems > 0 && (\n <>\n <MenuButton\n text='Links'\n iconOnly\n variant='link'\n icon='folder-hierarchy-solid'\n menu={{ items: path.slice(0, numMenuItems).reverse() }}\n />\n <Icon name={`caret-${end}`} />\n </>\n )}\n {path.slice(numMenuItems).map((crumb, index) => {\n const { id, primary, visual, ...restCrumbProps } = crumb;\n let Comp;\n if (crumb.href)\n Comp = (\n <Link key={id} href={crumb.href} {...restCrumbProps}>\n {visual} {primary}\n </Link>\n );\n else if (crumb.onClick)\n Comp = (\n <Button key={id} variant='link' {...restCrumbProps}>\n {visual} {primary}\n </Button>\n );\n else\n Comp = (\n <Text key={id} {...restCrumbProps}>\n {visual} {primary}\n </Text>\n );\n\n if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n return (\n <Fragment key={id}>\n {Comp}\n <Icon name={`caret-${end}`} />\n </Fragment>\n );\n })}\n </Flex>\n );\n }\n);\n\nexport default Breadcrumbs;\n"]}

package/lib/components/Button/BareButton.js CHANGED Viewed

@@ -34,7 +34,7 @@ const BareButton = forwardRef(({ type = 'button', disabled = false, href, ...res
                 buttonRef.current?.focus();
             }
             return restProps.onMouseUp?.(e);
-        } }, void 0));
+        } }));
 });
 export default BareButton;
 //# sourceMappingURL=BareButton.js.map

package/lib/components/Button/BareButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,MAAM,EAMN,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAuBjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;2BAQlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,GAAG,SAAS,EACoC,EAClD,GAA2B,EAC3B,EAAE;IACF,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7B,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAC,CAAoD,EAAE,EAAE;YACnE,SAAS,CAAC,WAA6C,EAAE,CAAC,CAAC,CAAC,CAAC;YAC9D,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,CAAC,CAAoD,EAAE,EAAE;YAClE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC;YACvF,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;YAEnC,IAAI,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;gBAC/D,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;aAC5B;YAED,OAAQ,SAAS,CAAC,SAA2C,EAAE,CAAC,CAAC,CAAC,CAAC;QACrE,CAAC,~~WACD~~,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n forwardRef,\n useRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n MouseEvent,\n MouseEventHandler,\n useEffect\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n /** Text or content for the Button. /\n children: ButtonProps['children'];\n /\n Determines if the Button will be disabled.\n * @default false\n /\n disabled?: ButtonProps['disabled'];\n /* A location to navigate to. Passing an href will render a Link styled as a Button. /\n href?: ButtonProps['href'];\n /\n Controls the behavior of a Button within a Form.\n * @default \"button\"\n /\n type?: ButtonProps['type'];\n /* Ref forwarded to the wrapping element. */\n ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n user-select: none;\n\n & + & {\n margin-inline-start: ${props => props.theme.base.spacing};\n }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: FunctionComponent<BareButtonProps & ForwardProps> = forwardRef(\n (\n {\n type = 'button',\n disabled = false,\n href,\n ...restProps\n }: PropsWithoutRef<BareButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n ) => {\n const mouseDownEvent = useRef<MouseEvent>();\n const buttonRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n return () => {\n mouseDownEvent.current = undefined;\n };\n }, []);\n\n return (\n <StyledBareButton\n ref={buttonRef}\n as={href ? ('a' as any) : undefined}\n type={href ? undefined : type}\n disabled={disabled}\n {...restProps}\n href={href}\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler \| undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n }}\n onMouseUp={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler \| undefined)?.(e);\n }}\n />\n );\n }\n);\n\nexport default BareButton;\n"]}
1	+ {"version":3,"file":"BareButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,MAAM,EAMN,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAuBjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;2BAQlB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE3D,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,GAAG,SAAS,EACoC,EAClD,GAA2B,EAC3B,EAAE;IACF,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7B,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAC,CAAoD,EAAE,EAAE;YACnE,SAAS,CAAC,WAA6C,EAAE,CAAC,CAAC,CAAC,CAAC;YAC9D,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,CAAC,CAAoD,EAAE,EAAE;YAClE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC;YACvF,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;YAEnC,IAAI,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;gBAC/D,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;aAC5B;YAED,OAAQ,SAAS,CAAC,SAA2C,EAAE,CAAC,CAAC,CAAC,CAAC;QACrE,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n forwardRef,\n useRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n MouseEvent,\n MouseEventHandler,\n useEffect\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport { ButtonProps } from './Button';\n\nexport interface BareButtonProps extends BaseProps {\n /** Text or content for the Button. /\n children: ButtonProps['children'];\n /\n Determines if the Button will be disabled.\n * @default false\n /\n disabled?: ButtonProps['disabled'];\n /* A location to navigate to. Passing an href will render a Link styled as a Button. /\n href?: ButtonProps['href'];\n /\n Controls the behavior of a Button within a Form.\n * @default \"button\"\n /\n type?: ButtonProps['type'];\n /* Ref forwarded to the wrapping element. */\n ref?: ButtonProps['ref'];\n}\n\nexport const StyledBareButton = styled.button`\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n user-select: none;\n\n & + & {\n margin-inline-start: ${props => props.theme.base.spacing};\n }\n`;\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nconst BareButton: FunctionComponent<BareButtonProps & ForwardProps> = forwardRef(\n (\n {\n type = 'button',\n disabled = false,\n href,\n ...restProps\n }: PropsWithoutRef<BareButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n ) => {\n const mouseDownEvent = useRef<MouseEvent>();\n const buttonRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n return () => {\n mouseDownEvent.current = undefined;\n };\n }, []);\n\n return (\n <StyledBareButton\n ref={buttonRef}\n as={href ? ('a' as any) : undefined}\n type={href ? undefined : type}\n disabled={disabled}\n {...restProps}\n href={href}\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler \| undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n }}\n onMouseUp={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler \| undefined)?.(e);\n }}\n />\n );\n }\n);\n\nexport default BareButton;\n"]}

package/lib/components/Button/BareRoleButton.js CHANGED Viewed

@@ -14,7 +14,7 @@ const BareRoleButton = forwardRef(({ children, onClick, onKeyDown, ...restProps
                 e.target.closest("button, a, [role='button'], [role='link']") !== e.currentTarget)
                 return;
             return onClick?.(e);
-        }, ref: ref, children: children }, void 0));
+        }, ref: ref, children: children }));
 });
 export default BareRoleButton;
 //# sourceMappingURL=BareRoleButton.js.map

package/lib/components/Button/BareRoleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BareRoleButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgE,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAuB,EACnE,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,oBAAoB,OACf,SAAS,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;gBACvE,CAAC,CAAC,aAAgC,CAAC,KAAK,EAAE,CAAC;aAC7C;YAED,OAAO,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC,EACD,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE;YACzC,IACE,CAAC,CAAC,MAAM,YAAY,OAAO;gBAC3B,mEAAmE;gBACnE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,2CAA2C,CAAC,KAAK,CAAC,CAAC,aAAa;gBAEjF,OAAO;YAET,OAAO,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,EACD,GAAG,EAAE,GAAG,YAEP,QAAQ,~~WACY~~,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, MouseEvent, KeyboardEvent, ReactNode, FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface BareRoleButtonProps extends BaseProps {\n children: ReactNode;\n onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBareRoleButton = styled.div``;\n\nconst BareRoleButton: FunctionComponent<BareRoleButtonProps & ForwardProps> = forwardRef(\n (\n { children, onClick, onKeyDown, ...restProps }: BareRoleButtonProps,\n ref: BareRoleButtonProps['ref']\n ) => {\n return (\n <StyledBareRoleButton\n {...restProps}\n tabIndex={0}\n role='button'\n onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n if ((e.key === ' ' \|\| e.key === 'Enter') && e.target === e.currentTarget) {\n (e.currentTarget as HTMLDivElement).click();\n }\n\n return onKeyDown?.(e);\n }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (\n e.target instanceof Element &&\n // Ignore clicks on other interactive elements within this element.\n e.target.closest(\"button, a, [role='button'], [role='link']\") !== e.currentTarget\n )\n return;\n\n return onClick?.(e);\n }}\n ref={ref}\n >\n {children}\n </StyledBareRoleButton>\n );\n }\n);\n\nexport default BareRoleButton;\n"]}
1	+ {"version":3,"file":"BareRoleButton.js","sourceRoot":"","sources":["../../../src/components/Button/BareRoleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAgE,MAAM,OAAO,CAAC;AACjG,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAuB,EACnE,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,oBAAoB,OACf,SAAS,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;gBACvE,CAAC,CAAC,aAAgC,CAAC,KAAK,EAAE,CAAC;aAC7C;YAED,OAAO,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC,EACD,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE;YACzC,IACE,CAAC,CAAC,MAAM,YAAY,OAAO;gBAC3B,mEAAmE;gBACnE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,2CAA2C,CAAC,KAAK,CAAC,CAAC,aAAa;gBAEjF,OAAO;YAET,OAAO,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,EACD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACY,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, Ref, MouseEvent, KeyboardEvent, ReactNode, FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface BareRoleButtonProps extends BaseProps {\n children: ReactNode;\n onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBareRoleButton = styled.div``;\n\nconst BareRoleButton: FunctionComponent<BareRoleButtonProps & ForwardProps> = forwardRef(\n (\n { children, onClick, onKeyDown, ...restProps }: BareRoleButtonProps,\n ref: BareRoleButtonProps['ref']\n ) => {\n return (\n <StyledBareRoleButton\n {...restProps}\n tabIndex={0}\n role='button'\n onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n if ((e.key === ' ' \|\| e.key === 'Enter') && e.target === e.currentTarget) {\n (e.currentTarget as HTMLDivElement).click();\n }\n\n return onKeyDown?.(e);\n }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (\n e.target instanceof Element &&\n // Ignore clicks on other interactive elements within this element.\n e.target.closest(\"button, a, [role='button'], [role='link']\") !== e.currentTarget\n )\n return;\n\n return onClick?.(e);\n }}\n ref={ref}\n >\n {children}\n </StyledBareRoleButton>\n );\n }\n);\n\nexport default BareRoleButton;\n"]}

package/lib/components/Button/Button.js CHANGED Viewed

@@ -215,7 +215,7 @@ const Button = forwardRef(({ variant = 'secondary', type = 'button', disabled =
                         buttonRef.current?.focus();
                     }
                     return restProps.onMouseUp?.(e);
-                }, children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }, void 0), children] }, void 0), buttonEl && label && (_jsx(Tooltip, { target: buttonEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: label }, void 0))] }, void 0));
+                }, children: [showProgress && _jsx(Progress, { variant: 'ring', placement: 'local' }), children] }), buttonEl && label && (_jsx(Tooltip, { target: buttonEl, showDelay: 'none', hideDelay: 'none', describeTarget: false, children: label }))] }));
 });
 export default Button;
 //# sourceMappingURL=Button.js.map

package/lib/components/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useRef,\n useEffect,\n forwardRef,\n FunctionComponent,\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEvent,\n MouseEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. /\n children: ReactNode;\n /\n Determines if the Button will be disabled.\n * @default false\n /\n disabled?: boolean;\n /* A location to navigate to. Passing an href will render an anchor styled as a Button. /\n href?: string;\n /\n Controls the styling of the Button.\n * @default \"secondary\"\n /\n variant?: 'primary' \| 'secondary' \| 'simple' \| 'link' \| 'text';\n /\n Controls the behavior of a Button within a Form.\n * @default \"button\"\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n /\n icon?: boolean;\n /\n Used for a smaller sized button.\n * @default false\n /\n compact?: boolean;\n /\n The label text will be used inside a Tooltip.\n /\n label?: string;\n /\n The aria label text will be inserted as the aria-label on the Button.\n /\n 'aria-label'?: string;\n /\n Optionally renders an indeterminate progress indicator in a button.\n * @default false\n /\n loading?: boolean;\n /* Ref forwarded to the wrapping element. /\n ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' \| 'type' \| 'disabled' \| 'icon' \| 'loading'\n>;\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({\n variant,\n icon,\n loading,\n compact,\n theme: {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor, 'foreground-color': textColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: {\n color,\n 'secondary-color': secondaryColor,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n 'focus-shadow': focusShadow,\n touch: { padding: touchPadding }\n },\n link: { color: linkColor }\n }\n }\n }) => {\n const borderColor = variant === 'secondary' ? color : 'transparent';\n const contrastColor = tryCatch(() => readableColor(color));\n\n const hoverColors = getHoverColors(color);\n const hoverPrimaryColor = hoverColors.background;\n const hoverContrastColor = hoverColors.foreground;\n\n const secondaryHoverColor = tryCatch(() => mix(0.85, secondaryColor, color));\n\n let buttonColor = contrastColor;\n let buttonBackgroundColor = color;\n if (variant === 'secondary') {\n buttonColor = color;\n buttonBackgroundColor = secondaryColor;\n } else if (variant === 'simple') {\n if (icon) {\n buttonColor = 'currentColor';\n buttonBackgroundColor = 'transparent';\n } else {\n buttonColor = color;\n buttonBackgroundColor = backgroundColor;\n }\n } else if (variant === 'link') {\n buttonColor = linkColor;\n buttonBackgroundColor = 'transparent';\n } else if (variant === 'text') {\n buttonColor = textColor;\n buttonBackgroundColor = 'transparent';\n }\n\n return css`\n color: ${buttonColor};\n background-color: ${buttonBackgroundColor};\n display: ${variant === 'link' \|\| variant === 'text' ? 'inline' : 'inline-flex'};\n align-items: center;\n outline: none;\n text-decoration: none;\n transition: all calc(0.5 ${speed}) ${ease};\n cursor: pointer;\n\n ${variant !== 'link' && variant !== 'text'\n ? css`\n justify-content: center;\n line-height: 1;\n border: ${borderWidth} solid ${borderColor};\n position: relative;\n `\n : css`\n text-align: start;\n border: none;\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `}\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? /\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n @media (hover: hover) {\n &:hover {\n ${variant === 'primary' &&\n css`\n background-color: ${hoverPrimaryColor};\n color: ${hoverContrastColor};\n text-decoration: none;\n `}\n\n ${(variant === 'secondary' \|\| (variant === 'simple' && !icon)) &&\n css`\n background-color: ${secondaryHoverColor};\n text-decoration: none;\n `}\n\n ${variant === 'simple' &&\n icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n `}\n\n ${(variant === 'link' \|\| variant === 'text') &&\n css`\n text-decoration: underline;\n `}\n }\n }\n\n ${variant !== 'link' &&\n variant !== 'text' &&\n css`\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n ${!icon &&\n variant !== 'link' &&\n variant !== 'text' &&\n css`\n padding: ${padding};\n `}\n\n ${variant !== 'link' &&\n variant !== 'text' &&\n css`\n @media (pointer: coarse) {\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n `}\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${focusShadow};\n }\n\n ${icon &&\n variant !== 'link' &&\n variant !== 'text' &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n > svg {\n display: block;\n }\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: ${buttonBackgroundColor};\n border-radius: inherit;\n }\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(\n (\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n loading = false,\n children,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n ) => {\n const [buttonEl, setButtonEl] = useElement();\n const mouseDownEvent = useRef<MouseEvent>();\n const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n const showProgress = loading && variant !== 'link' && variant !== 'text';\n\n useEffect(() => {\n return () => {\n mouseDownEvent.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledButton\n {...restProps}\n ref={buttonRef}\n as={as \|\| (href ? 'a' : 'button')}\n forwardedAs={forwardedAs \|\| (href ? 'a' : 'button')}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n loading={showProgress}\n aria-label={ariaLabel \|\| label}\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler \| undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n }}\n onMouseUp={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler \| undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='local' />}\n {children}\n </StyledButton>\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n }\n);\n\nexport default Button;\n"]}
1	+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useRef,\n useEffect,\n forwardRef,\n FunctionComponent,\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEvent,\n MouseEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. /\n children: ReactNode;\n /\n Determines if the Button will be disabled.\n * @default false\n /\n disabled?: boolean;\n /* A location to navigate to. Passing an href will render an anchor styled as a Button. /\n href?: string;\n /\n Controls the styling of the Button.\n * @default \"secondary\"\n /\n variant?: 'primary' \| 'secondary' \| 'simple' \| 'link' \| 'text';\n /\n Controls the behavior of a Button within a Form.\n * @default \"button\"\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n /\n icon?: boolean;\n /\n Used for a smaller sized button.\n * @default false\n /\n compact?: boolean;\n /\n The label text will be used inside a Tooltip.\n /\n label?: string;\n /\n The aria label text will be inserted as the aria-label on the Button.\n /\n 'aria-label'?: string;\n /\n Optionally renders an indeterminate progress indicator in a button.\n * @default false\n /\n loading?: boolean;\n /* Ref forwarded to the wrapping element. /\n ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' \| 'type' \| 'disabled' \| 'icon' \| 'loading'\n>;\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({\n variant,\n icon,\n loading,\n compact,\n theme: {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor, 'foreground-color': textColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: {\n color,\n 'secondary-color': secondaryColor,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n 'focus-shadow': focusShadow,\n touch: { padding: touchPadding }\n },\n link: { color: linkColor }\n }\n }\n }) => {\n const borderColor = variant === 'secondary' ? color : 'transparent';\n const contrastColor = tryCatch(() => readableColor(color));\n\n const hoverColors = getHoverColors(color);\n const hoverPrimaryColor = hoverColors.background;\n const hoverContrastColor = hoverColors.foreground;\n\n const secondaryHoverColor = tryCatch(() => mix(0.85, secondaryColor, color));\n\n let buttonColor = contrastColor;\n let buttonBackgroundColor = color;\n if (variant === 'secondary') {\n buttonColor = color;\n buttonBackgroundColor = secondaryColor;\n } else if (variant === 'simple') {\n if (icon) {\n buttonColor = 'currentColor';\n buttonBackgroundColor = 'transparent';\n } else {\n buttonColor = color;\n buttonBackgroundColor = backgroundColor;\n }\n } else if (variant === 'link') {\n buttonColor = linkColor;\n buttonBackgroundColor = 'transparent';\n } else if (variant === 'text') {\n buttonColor = textColor;\n buttonBackgroundColor = 'transparent';\n }\n\n return css`\n color: ${buttonColor};\n background-color: ${buttonBackgroundColor};\n display: ${variant === 'link' \|\| variant === 'text' ? 'inline' : 'inline-flex'};\n align-items: center;\n outline: none;\n text-decoration: none;\n transition: all calc(0.5 ${speed}) ${ease};\n cursor: pointer;\n\n ${variant !== 'link' && variant !== 'text'\n ? css`\n justify-content: center;\n line-height: 1;\n border: ${borderWidth} solid ${borderColor};\n position: relative;\n `\n : css`\n text-align: start;\n border: none;\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `}\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? /\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n @media (hover: hover) {\n &:hover {\n ${variant === 'primary' &&\n css`\n background-color: ${hoverPrimaryColor};\n color: ${hoverContrastColor};\n text-decoration: none;\n `}\n\n ${(variant === 'secondary' \|\| (variant === 'simple' && !icon)) &&\n css`\n background-color: ${secondaryHoverColor};\n text-decoration: none;\n `}\n\n ${variant === 'simple' &&\n icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n `}\n\n ${(variant === 'link' \|\| variant === 'text') &&\n css`\n text-decoration: underline;\n `}\n }\n }\n\n ${variant !== 'link' &&\n variant !== 'text' &&\n css`\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n ${!icon &&\n variant !== 'link' &&\n variant !== 'text' &&\n css`\n padding: ${padding};\n `}\n\n ${variant !== 'link' &&\n variant !== 'text' &&\n css`\n @media (pointer: coarse) {\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n `}\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${focusShadow};\n }\n\n ${icon &&\n variant !== 'link' &&\n variant !== 'text' &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n > svg {\n display: block;\n }\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: ${buttonBackgroundColor};\n border-radius: inherit;\n }\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(\n (\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n loading = false,\n children,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n ) => {\n const [buttonEl, setButtonEl] = useElement();\n const mouseDownEvent = useRef<MouseEvent>();\n const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n const showProgress = loading && variant !== 'link' && variant !== 'text';\n\n useEffect(() => {\n return () => {\n mouseDownEvent.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledButton\n {...restProps}\n ref={buttonRef}\n as={as \|\| (href ? 'a' : 'button')}\n forwardedAs={forwardedAs \|\| (href ? 'a' : 'button')}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n loading={showProgress}\n aria-label={ariaLabel \|\| label}\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler \| undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n }}\n onMouseUp={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler \| undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='local' />}\n {children}\n </StyledButton>\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n }\n);\n\nexport default Button;\n"]}

package/lib/components/Card/Card.js CHANGED Viewed

@@ -57,7 +57,7 @@ const Card = forwardRef((props, ref) => {
         ...(role && { role }),
         interactive
     };
-    return (_jsx(Flex, { container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }, void 0));
+    return (_jsx(Flex, { container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }));
 });
 Card.defaultProps = defaultProps;
 export default Card;