@pega/cosmos-react-core 10.0.0-build.2.0 → 10.0.0-build.2.10

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 (40) hide show
  1. package/lib/components/Button/Button.d.ts.map +1 -1
  2. package/lib/components/Button/Button.js +14 -5
  3. package/lib/components/Button/Button.js.map +1 -1
  4. package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
  5. package/lib/components/FieldGroup/FieldGroup.js +0 -15
  6. package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
  7. package/lib/components/FormControl/FormControl.d.ts.map +1 -1
  8. package/lib/components/FormControl/FormControl.js +1 -10
  9. package/lib/components/FormControl/FormControl.js.map +1 -1
  10. package/lib/components/Preview/Preview.types.d.ts +1 -0
  11. package/lib/components/Preview/Preview.types.d.ts.map +1 -1
  12. package/lib/components/Preview/Preview.types.js.map +1 -1
  13. package/lib/components/QRCode/QRCode.d.ts +6 -1
  14. package/lib/components/QRCode/QRCode.d.ts.map +1 -1
  15. package/lib/components/QRCode/QRCode.js +15 -9
  16. package/lib/components/QRCode/QRCode.js.map +1 -1
  17. package/lib/components/QRCode/index.d.ts +1 -1
  18. package/lib/components/QRCode/index.d.ts.map +1 -1
  19. package/lib/components/QRCode/index.js.map +1 -1
  20. package/lib/components/Text/Text.d.ts.map +1 -1
  21. package/lib/components/Text/Text.js +2 -0
  22. package/lib/components/Text/Text.js.map +1 -1
  23. package/lib/hooks/useI18n.d.ts +9 -0
  24. package/lib/hooks/useI18n.d.ts.map +1 -1
  25. package/lib/i18n/default.d.ts +9 -0
  26. package/lib/i18n/default.d.ts.map +1 -1
  27. package/lib/i18n/default.js +10 -0
  28. package/lib/i18n/default.js.map +1 -1
  29. package/lib/i18n/i18n.d.ts +9 -0
  30. package/lib/i18n/i18n.d.ts.map +1 -1
  31. package/lib/theme/index.d.ts +1 -0
  32. package/lib/theme/index.d.ts.map +1 -1
  33. package/lib/theme/index.js +1 -0
  34. package/lib/theme/index.js.map +1 -1
  35. package/lib/theme/theme.d.ts +150 -0
  36. package/lib/theme/theme.d.ts.map +1 -1
  37. package/lib/theme/themeDefinition.json +89 -2
  38. package/lib/theme/themeOverrides.schema.json +75 -0
  39. package/lib/theme/themes/aurigaTheme.json +140 -0
  40. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,SAAS,EAET,+BAA+B,EAC/B,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AAkBrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAgFF,eAAO,MAAM,YAAY,wQAqOxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,iUA+D3B,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA2GvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,SAAS,EAET,+BAA+B,EAC/B,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AAkBrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAgFF,eAAO,MAAM,YAAY,wQA+OxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,iUA+D3B,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA2GvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
@@ -73,7 +73,7 @@ const getOutlinedButtonStyles = (color, backgroundColor) => {
73
73
  };
74
74
  };
75
75
  export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ variant, icon, loading, compact, theme }) => {
76
- const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed } }, components: { button: { color, 'foreground-color': foregroundColor, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
76
+ const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed } }, components: { button: { color, height, 'foreground-color': foregroundColor, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
77
77
  // Base
78
78
  const base = baseStyles(theme);
79
79
  // Non-text base
@@ -102,17 +102,26 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
102
102
  > svg {
103
103
  display: block;
104
104
  }
105
- `} ${compact &&
105
+ `}
106
+
107
+ ${!icon &&
108
+ !compact &&
109
+ css `
110
+ min-height: ${height};
111
+ `}
112
+
113
+ ${compact &&
106
114
  css `
107
115
  min-height: ${hitAreaCompact};
108
116
  min-width: ${hitAreaCompact};
109
- `} @media (
110
- pointer: coarse) {
117
+ `}
118
+
119
+ @media (pointer: coarse) {
111
120
  border-radius: calc(${baseBorderRadius} * ${borderRadius});
112
121
 
113
122
  ${!compact &&
114
123
  css `
115
- min-height: ${hitAreaFinger};
124
+ min-height: ${icon ? `${hitAreaFinger}` : `max(${hitAreaFinger}, ${height})`};
116
125
  min-width: ${hitAreaFinger};
117
126
  `}
118
127
 
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n ForwardRefForwardPropsComponent,\n PropsWithDefaults,\n AsProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch, createClassName } from '../../utils';\nimport {\n getActiveColors,\n getHoverColors,\n isSolidColor,\n omitProps,\n readableColor,\n readableHue\n} 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 /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Applies visual disabled styles without disabling the button element itself.\n * @default false\n */\n 'aria-disabled'?: boolean | 'true' | 'false';\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 | HTMLAnchorElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n text-decoration: none;\n transition-property: background-color, color, border-color, box-shadow, translate;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n @media (forced-colors: none) {\n outline: none;\n }\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &[aria-disabled='true'] {\n opacity: ${disabledOpacity};\n }\n\n &:not([disabled], [aria-disabled='true']):focus-visible,\n &:enabled:not([aria-disabled='true']):focus-visible {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\n/* If the background color is not provided, the color will be used for the hover and active styles */\nconst getFilledButtonStyles = (color: string, backgroundColor?: string) => ({\n contrastColor: backgroundColor ? color : tryCatch(() => readableColor(color)),\n hoverColors: getHoverColors(backgroundColor || color),\n activeColors: getActiveColors(backgroundColor || color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n // If the background color is not solid, use the readable color for the text\n const fallbackBackground = isSolidColor(backgroundColor) ? backgroundColor : readableColor(color);\n const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));\n const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n return {\n textColor: backgroundUsable ? color : readableColor(color),\n hoverBg: hoverBackgroundColor,\n hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),\n activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n };\n};\n\nexport const StyledButton = styled.button.withConfig(omitProps('loading'))<ButtonPropsWithDefaults>(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: { speed }\n },\n components: {\n button: {\n color,\n 'foreground-color': foregroundColor,\n 'secondary-color': secondaryColor,\n 'secondary-fill-style': fillStyle,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n white-space: nowrap;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `} ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `} @media (\n pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n `;\n\n // Primary and Secondary-filled\n /* For primary button, use the foreground color as the text color. If foreground is 'auto', then calculate based on background\n For secondary button, always use the secondary color */\n const { contrastColor, hoverColors, activeColors } =\n variant !== 'primary' || foregroundColor === 'auto'\n ? getFilledButtonStyles(variant === 'primary' ? color : secondaryColor)\n : getFilledButtonStyles(foregroundColor, color);\n\n const solidButtonStyles = css`\n --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n color: ${contrastColor};\n background-color: ${variant === 'primary' ? color : secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverColors.background};\n text-decoration: none;\n }\n }\n\n &:active {\n background-color: ${activeColors.background};\n color: ${activeColors.foreground};\n text-decoration: none;\n }\n `;\n\n // Secondary-outline\n const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n const secondary = css`\n --button-background-color: ${backgroundColor};\n color: ${secondaryOutlineButtonStyles.textColor};\n background-color: ${backgroundColor};\n border-color: ${secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${secondaryOutlineButtonStyles.hoverBg};\n text-decoration: none;\n }\n }\n\n &:active {\n color: ${secondaryOutlineButtonStyles.activeFg};\n background-color: ${secondaryOutlineButtonStyles.activeBg};\n border-color: ${secondaryOutlineButtonStyles.activeFg};\n text-decoration: none;\n }\n `;\n\n // Simple\n const simpleButtonStyles = getOutlinedButtonStyles(\n fillStyle === 'outline' ? secondaryColor : color,\n backgroundColor\n );\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\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.1;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.hoverBg};\n color: ${simpleButtonStyles.hoverFg};\n border-color: ${simpleButtonStyles.hoverFg};\n text-decoration: none;\n `}\n }\n\n &:active {\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.2;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.activeBg};\n color: ${simpleButtonStyles.activeFg};\n border-color: ${simpleButtonStyles.activeFg};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n solidButtonStyles}\n ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n ${variant === 'simple' && simple}\n ${variant === 'primary' &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig(omitProps('loading'))<\n Pick<ButtonPropsWithDefaults, 'variant' | 'href'> &\n // Needed for omitProps\n Pick<ButtonProps, 'loading'>\n>(({ theme, variant, href }) => {\n const {\n base: {\n palette: { 'foreground-color': textVariantColor }\n },\n components: {\n button: { color: primaryColor, 'secondary-fill-style': fillStyle },\n link: { color: linkColor }\n }\n } = theme;\n\n let linkVariantColor = linkColor;\n if (!href && fillStyle === 'solid') {\n linkVariantColor = primaryColor;\n }\n const { background: activeLinkColor } = getActiveColors(linkVariantColor);\n const { background: activeTextColor } = getActiveColors(textVariantColor);\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const link = css`\n color: ${linkVariantColor};\n\n &:active {\n color: ${activeLinkColor};\n }\n `;\n\n const text = css`\n color: ${textVariantColor};\n\n &:active {\n color: ${activeTextColor};\n }\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: ForwardRefForwardPropsComponent<ButtonProps> = forwardRef(function Button(\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 'aria-disabled': ariaDisabled,\n loading = false,\n children,\n className,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: ButtonProps['ref']\n) {\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement | HTMLAnchorElement>();\n const mouseDownEvent = useRef<ReactMouseEvent>();\n const mouseDownPosition = useRef<DOMRect>();\n const mouseDownTimestamp = useRef<number>();\n const buttonRef = useConsolidatedRef(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n const handleClickWithElementShift = (e: MouseEvent) => {\n if (\n buttonRef.current &&\n mouseDownPosition.current &&\n mouseDownTimestamp.current &&\n isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n Date.now() - mouseDownTimestamp.current < 500\n ) {\n // Only click if the button is still the topmost element at its own position.\n // If something has rendered over the button between mousedown and mouseup,\n // elementFromPoint will return that — not the button — and we should not trigger a click.\n const { x, y, width, height } = buttonRef.current.getBoundingClientRect();\n const elementAtPoint = document.elementFromPoint(x + width / 2, y + height / 2);\n if (buttonRef.current.contains(elementAtPoint) || elementAtPoint === buttonRef.current) {\n buttonRef.current.click();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mouseup', handleClickWithElementShift);\n\n return () => {\n document.removeEventListener('mouseup', handleClickWithElementShift);\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n className={createClassName('button', className, { variant, icon, compact, loading })}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n aria-disabled={ariaDisabled}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n mouseDownTimestamp.current = Date.now();\n }}\n onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.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='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\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 { useRef, useEffect, forwardRef } from 'react';\nimport type {\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n ForwardRefForwardPropsComponent,\n PropsWithDefaults,\n AsProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch, createClassName } from '../../utils';\nimport {\n getActiveColors,\n getHoverColors,\n isSolidColor,\n omitProps,\n readableColor,\n readableHue\n} 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 /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Applies visual disabled styles without disabling the button element itself.\n * @default false\n */\n 'aria-disabled'?: boolean | 'true' | 'false';\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 | HTMLAnchorElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n text-decoration: none;\n transition-property: background-color, color, border-color, box-shadow, translate;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n @media (forced-colors: none) {\n outline: none;\n }\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &[aria-disabled='true'] {\n opacity: ${disabledOpacity};\n }\n\n &:not([disabled], [aria-disabled='true']):focus-visible,\n &:enabled:not([aria-disabled='true']):focus-visible {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\n/* If the background color is not provided, the color will be used for the hover and active styles */\nconst getFilledButtonStyles = (color: string, backgroundColor?: string) => ({\n contrastColor: backgroundColor ? color : tryCatch(() => readableColor(color)),\n hoverColors: getHoverColors(backgroundColor || color),\n activeColors: getActiveColors(backgroundColor || color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n // If the background color is not solid, use the readable color for the text\n const fallbackBackground = isSolidColor(backgroundColor) ? backgroundColor : readableColor(color);\n const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));\n const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n return {\n textColor: backgroundUsable ? color : readableColor(color),\n hoverBg: hoverBackgroundColor,\n hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),\n activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n };\n};\n\nexport const StyledButton = styled.button.withConfig(omitProps('loading'))<ButtonPropsWithDefaults>(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: { speed }\n },\n components: {\n button: {\n color,\n height,\n 'foreground-color': foregroundColor,\n 'secondary-color': secondaryColor,\n 'secondary-fill-style': fillStyle,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n white-space: nowrap;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `}\n\n ${!icon &&\n !compact &&\n css`\n min-height: ${height};\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n @media (pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${icon ? `${hitAreaFinger}` : `max(${hitAreaFinger}, ${height})`};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n `;\n\n // Primary and Secondary-filled\n /* For primary button, use the foreground color as the text color. If foreground is 'auto', then calculate based on background\n For secondary button, always use the secondary color */\n const { contrastColor, hoverColors, activeColors } =\n variant !== 'primary' || foregroundColor === 'auto'\n ? getFilledButtonStyles(variant === 'primary' ? color : secondaryColor)\n : getFilledButtonStyles(foregroundColor, color);\n\n const solidButtonStyles = css`\n --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n color: ${contrastColor};\n background-color: ${variant === 'primary' ? color : secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverColors.background};\n text-decoration: none;\n }\n }\n\n &:active {\n background-color: ${activeColors.background};\n color: ${activeColors.foreground};\n text-decoration: none;\n }\n `;\n\n // Secondary-outline\n const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n const secondary = css`\n --button-background-color: ${backgroundColor};\n color: ${secondaryOutlineButtonStyles.textColor};\n background-color: ${backgroundColor};\n border-color: ${secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${secondaryOutlineButtonStyles.hoverBg};\n text-decoration: none;\n }\n }\n\n &:active {\n color: ${secondaryOutlineButtonStyles.activeFg};\n background-color: ${secondaryOutlineButtonStyles.activeBg};\n border-color: ${secondaryOutlineButtonStyles.activeFg};\n text-decoration: none;\n }\n `;\n\n // Simple\n const simpleButtonStyles = getOutlinedButtonStyles(\n fillStyle === 'outline' ? secondaryColor : color,\n backgroundColor\n );\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\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.1;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.hoverBg};\n color: ${simpleButtonStyles.hoverFg};\n border-color: ${simpleButtonStyles.hoverFg};\n text-decoration: none;\n `}\n }\n\n &:active {\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.2;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.activeBg};\n color: ${simpleButtonStyles.activeFg};\n border-color: ${simpleButtonStyles.activeFg};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n solidButtonStyles}\n ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n ${variant === 'simple' && simple}\n ${variant === 'primary' &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig(omitProps('loading'))<\n Pick<ButtonPropsWithDefaults, 'variant' | 'href'> &\n // Needed for omitProps\n Pick<ButtonProps, 'loading'>\n>(({ theme, variant, href }) => {\n const {\n base: {\n palette: { 'foreground-color': textVariantColor }\n },\n components: {\n button: { color: primaryColor, 'secondary-fill-style': fillStyle },\n link: { color: linkColor }\n }\n } = theme;\n\n let linkVariantColor = linkColor;\n if (!href && fillStyle === 'solid') {\n linkVariantColor = primaryColor;\n }\n const { background: activeLinkColor } = getActiveColors(linkVariantColor);\n const { background: activeTextColor } = getActiveColors(textVariantColor);\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const link = css`\n color: ${linkVariantColor};\n\n &:active {\n color: ${activeLinkColor};\n }\n `;\n\n const text = css`\n color: ${textVariantColor};\n\n &:active {\n color: ${activeTextColor};\n }\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: ForwardRefForwardPropsComponent<ButtonProps> = forwardRef(function Button(\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 'aria-disabled': ariaDisabled,\n loading = false,\n children,\n className,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: ButtonProps['ref']\n) {\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement | HTMLAnchorElement>();\n const mouseDownEvent = useRef<ReactMouseEvent>();\n const mouseDownPosition = useRef<DOMRect>();\n const mouseDownTimestamp = useRef<number>();\n const buttonRef = useConsolidatedRef(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n const handleClickWithElementShift = (e: MouseEvent) => {\n if (\n buttonRef.current &&\n mouseDownPosition.current &&\n mouseDownTimestamp.current &&\n isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n Date.now() - mouseDownTimestamp.current < 500\n ) {\n // Only click if the button is still the topmost element at its own position.\n // If something has rendered over the button between mousedown and mouseup,\n // elementFromPoint will return that — not the button — and we should not trigger a click.\n const { x, y, width, height } = buttonRef.current.getBoundingClientRect();\n const elementAtPoint = document.elementFromPoint(x + width / 2, y + height / 2);\n if (buttonRef.current.contains(elementAtPoint) || elementAtPoint === buttonRef.current) {\n buttonRef.current.click();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mouseup', handleClickWithElementShift);\n\n return () => {\n document.removeEventListener('mouseup', handleClickWithElementShift);\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n className={createClassName('button', className, { variant, icon, compact, loading })}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n aria-disabled={ariaDisabled}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n mouseDownTimestamp.current = Date.now();\n }}\n onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.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='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default Button;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAM7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AA4CJ,eAAO,MAAM,oBAAoB,+NAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,6QA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,+OAiC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;YAkB/D,CAAC;AAiCH,eAAO,MAAM,iBAAiB;;;;iDAI7B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA8F/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAM7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AA4CJ,eAAO,MAAM,oBAAoB,+NAAgB,CAAC;AAElD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAAiB,CAAC;AAEtD,eAAO,MAAM,sBAAsB,6QA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,+OAkB5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;YAkB/D,CAAC;AAiCH,eAAO,MAAM,iBAAiB;;;;iDAI7B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CA8F/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
@@ -72,21 +72,6 @@ export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size':
72
72
  font-size: ${fontSizes[text.h3['font-size']]};
73
73
  font-weight: ${text.h3['font-weight']};
74
74
  }
75
-
76
- & & ${StyledFieldGroupName} {
77
- font-size: ${fontSizes[text.h4['font-size']]};
78
- font-weight: ${text.h4['font-weight']};
79
- }
80
-
81
- & & & ${StyledFieldGroupName} {
82
- font-size: ${fontSizes[text.h5['font-size']]};
83
- font-weight: ${text.h5['font-weight']};
84
- }
85
-
86
- & & & & ${StyledFieldGroupName} {
87
- font-size: ${fontSizes[text.h6['font-size']]};
88
- font-weight: ${text.h6['font-weight']};
89
- }
90
75
  `;
91
76
  });
92
77
  StyledFieldGroup.defaultProps = defaultThemeProp;
@@ -1 +1 @@
1
- {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport Banner from '../Banner';\nimport type { BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\nregisterIcon(warnSolidIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n /** The content of the Field Group. */\n children: ReactNode;\n /** A description of the field group to be displayed above the controls. */\n description?: string;\n /** A banner to be displayed above the controls. */\n banner?: BannerProps;\n /** The display and markup variant to apply to the group. */\n variant?: 'form-group';\n /** Indicates validation status for error display in the header. */\n status?: 'error';\n /** A reference to the wrapping element. */\n ref?: Ref<HTMLFieldSetElement>;\n} & (\n | {\n /** The name associated with the Field Group. */\n name: string;\n /** Provides a contextual label for the name. */\n contextualLabel?: string;\n /** Select the heading tag for header */\n headingTag?: HeadingTag;\n /** Provides additional info relevant to the field group. */\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /** An array of actions to add to the header. */\n actions?: ActionsProps['items'];\n /**\n * Controls the collapsed state of the field group.\n * Passing undefined will render the field group as non-collapsible.\n * @default false\n */\n collapsed?: boolean;\n /**\n * Called when user clicks the toggle button.\n */\n onToggleCollapsed?: () => void;\n }\n | {\n name?: undefined;\n contextualLabel?: never;\n headingTag?: never;\n additionalInfo?: never;\n actions?: never;\n collapsed?: never;\n onToggleCollapsed?: never;\n }\n );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n name: NonNullable<FieldGroupProps['name']>;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n theme: {\n base: { animation }\n }\n}) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon}:first-child {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon}:first-child {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nconst StyledErrorIcon = styled(Icon)(\n ({\n theme: {\n base: { palette }\n }\n }) => css`\n color: ${palette.urgent};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)`\n word-break: break-word;\n`;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))<\n Pick<FieldGroupProps, 'collapsed'>\n>(\n ({\n collapsed,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${!collapsed &&\n css`\n margin-block-end: calc(1.5 * ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ border?: boolean }>(({ theme, border }) => {\n const {\n base: {\n palette: { 'border-line': borderColor },\n spacing,\n 'border-radius': baseBorderRadius\n },\n components: {\n 'form-control': { 'border-width': borderWidth }\n }\n } = theme;\n if (!border) return null;\n\n return css`\n padding: ${spacing};\n border-radius: calc(${baseBorderRadius} / 2);\n border: ${borderWidth} solid ${borderColor};\n `;\n});\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n name,\n contextualLabel,\n children,\n collapsed,\n actions,\n additionalInfo\n}: FieldGroupLegendProps) => {\n return (\n <StyledFieldGroupLegend collapsed={collapsed}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n {children}\n {additionalInfo && (\n <AdditionalInfo\n heading={additionalInfo.heading}\n contextualLabel={contextualLabel || name}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nexport const StyledDescription = styled(HTML)`\n /* Prevent instruction text from contributing to modal width calculation */\n width: 0;\n min-width: 100%;\n`;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n {\n children,\n description,\n banner,\n name,\n contextualLabel,\n additionalInfo,\n actions,\n collapsed,\n headingTag,\n onToggleCollapsed,\n variant,\n status,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n) {\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n {banner && <Banner {...banner} />}\n {description && (\n <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n )}\n <div>{children}</div>\n </StyledFieldGroupContent>\n );\n\n return (\n <StyledGroupContainer border={variant === 'form-group'}>\n <StyledFieldGroup\n aria-label={contextualLabel || name}\n aria-describedby={description ? `${uid}-description` : undefined}\n as={name ? 'fieldset' : 'div'}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend\n collapsed={collapsed}\n actions={actions}\n additionalInfo={additionalInfo}\n name={name}\n contextualLabel={contextualLabel}\n >\n {typeof collapsed === 'boolean' ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed?.();\n }}\n aria-expanded={!collapsed}\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n contextualLabel || name\n ])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n\n {typeof collapsed === 'boolean' ? (\n <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n </StyledGroupContainer>\n );\n});\n\nexport default FieldGroup;\n"]}
1
+ {"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE5D,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAG/C,YAAY,CAAC,cAAc,CAAC,CAAC;AAC7B,YAAY,CAAC,aAAa,CAAC,CAAC;AA6D5B,SAAS;AACT,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EACzC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;MACN,UAAU;8BACc,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;8BAExC,UAAU;;;+BAGT,UAAU;0BACf,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;aACE,OAAO,CAAC,MAAM;GACxB,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAGpF,CAAC,EACC,SAAS,EACT,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,SAAS,EACT,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EACvE,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;QAGN,CAAC,SAAS;QACZ,GAAG,CAAA;uCAC8B,OAAO;OACvC;qCAC8B,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;UAEnE,kBAAkB;sBACN,YAAY;;;wBAGV,aAAa;;;KAGhC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACxD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;;;UAGJ,oBAAoB;qBACT,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IACzF,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,EACvC,OAAO,EACP,eAAe,EAAE,gBAAgB,EAClC,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAChD,EACF,GAAG,KAAK,CAAC;IACV,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,OAAO,GAAG,CAAA;eACG,OAAO;0BACI,gBAAgB;cAC5B,WAAW,UAAU,WAAW;GAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,aAAa;AACb,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,eAAe,EACf,QAAQ,EACR,SAAS,EACT,OAAO,EACP,cAAc,EACQ,EAAE,EAAE;IAC1B,OAAO,CACL,KAAC,sBAAsB,IAAC,SAAS,EAAE,SAAS,YAC1C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,aACrE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,iBAAiB,aACvE,QAAQ,EACR,cAAc,IAAI,CACjB,KAAC,cAAc,IACb,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,eAAe,EAAE,eAAe,IAAI,IAAI,YAEvC,cAAc,CAAC,OAAO,GACR,CAClB,IACI,EACN,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,GAAI,IACpE,GACgB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAI5C,CAAC;AAEF,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,EACE,QAAQ,EACR,WAAW,EACX,MAAM,EACN,IAAI,EACJ,eAAe,EACf,cAAc,EACd,OAAO,EACP,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,OAAO,EACP,MAAM,EACN,GAAG,SAAS,EACqB,EACnC,GAA2B;IAE3B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,MAAM,eAAe,GAAG,CACtB,MAAC,uBAAuB,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,EAAE,aACnE,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EAChC,WAAW,IAAI,CACd,KAAC,iBAAiB,IAAC,EAAE,EAAE,GAAG,GAAG,cAAc,EAAE,WAAW,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,GAAI,CACtF,EACD,wBAAM,QAAQ,GAAO,IACG,CAC3B,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,IAAC,MAAM,EAAE,OAAO,KAAK,YAAY,YACpD,MAAC,gBAAgB,kBACH,eAAe,IAAI,IAAI,sBACjB,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,SAAS,EAChE,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,KACzB,SAAS,EACb,GAAG,EAAE,GAAG,aAEP,IAAI,IAAI,CACP,KAAC,gBAAgB,IACf,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,EACV,eAAe,EAAE,eAAe,YAE/B,OAAO,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAChC,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,EAAE,CAAC;wBACxB,CAAC,mBACc,CAAC,SAAS,gBACb,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,EAAE;4BACzD,eAAe,IAAI,IAAI;yBACxB,CAAC,YAEF,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAC/D,WAAW,EAAC,MAAM,aAElB,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC1B,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC,CAAC,CAAC,IAAI,EACjE,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,YAAG,IAAI,GAAQ,CACzC,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,cAAE,IAAI,GAAwB,CACpD,IACI,GACY,CACtB,CAAC,CAAC,CAAC,CACF,8BACG,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC,CAAC,CAAC,IAAI,EACjE,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,YAAG,IAAI,GAAQ,CACzC,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,cAAE,IAAI,GAAwB,CACpD,IACA,CACJ,GACgB,CACpB,EAEA,OAAO,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAChC,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,eAAe,GAAkB,CACzE,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,IACgB,GACE,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport Banner from '../Banner';\nimport type { BannerProps } from '../Banner';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\nregisterIcon(warnSolidIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n /** The content of the Field Group. */\n children: ReactNode;\n /** A description of the field group to be displayed above the controls. */\n description?: string;\n /** A banner to be displayed above the controls. */\n banner?: BannerProps;\n /** The display and markup variant to apply to the group. */\n variant?: 'form-group';\n /** Indicates validation status for error display in the header. */\n status?: 'error';\n /** A reference to the wrapping element. */\n ref?: Ref<HTMLFieldSetElement>;\n} & (\n | {\n /** The name associated with the Field Group. */\n name: string;\n /** Provides a contextual label for the name. */\n contextualLabel?: string;\n /** Select the heading tag for header */\n headingTag?: HeadingTag;\n /** Provides additional info relevant to the field group. */\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /** An array of actions to add to the header. */\n actions?: ActionsProps['items'];\n /**\n * Controls the collapsed state of the field group.\n * Passing undefined will render the field group as non-collapsible.\n * @default false\n */\n collapsed?: boolean;\n /**\n * Called when user clicks the toggle button.\n */\n onToggleCollapsed?: () => void;\n }\n | {\n name?: undefined;\n contextualLabel?: never;\n headingTag?: never;\n additionalInfo?: never;\n actions?: never;\n collapsed?: never;\n onToggleCollapsed?: never;\n }\n );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n name: NonNullable<FieldGroupProps['name']>;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n contextualLabel?: FieldGroupProps['contextualLabel'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n theme: {\n base: { animation }\n }\n}) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon}:first-child {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon}:first-child {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nconst StyledErrorIcon = styled(Icon)(\n ({\n theme: {\n base: { palette }\n }\n }) => css`\n color: ${palette.urgent};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldHeader = styled(Flex)`\n word-break: break-word;\n`;\n\nexport const StyledFieldGroupContent = styled(Grid)``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig(omitProps('collapsed'))<\n Pick<FieldGroupProps, 'collapsed'>\n>(\n ({\n collapsed,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${!collapsed &&\n css`\n margin-block-end: calc(1.5 * ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ border?: boolean }>(({ theme, border }) => {\n const {\n base: {\n palette: { 'border-line': borderColor },\n spacing,\n 'border-radius': baseBorderRadius\n },\n components: {\n 'form-control': { 'border-width': borderWidth }\n }\n } = theme;\n if (!border) return null;\n\n return css`\n padding: ${spacing};\n border-radius: calc(${baseBorderRadius} / 2);\n border: ${borderWidth} solid ${borderColor};\n `;\n});\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n name,\n contextualLabel,\n children,\n collapsed,\n actions,\n additionalInfo\n}: FieldGroupLegendProps) => {\n return (\n <StyledFieldGroupLegend collapsed={collapsed}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledFieldHeader}>\n {children}\n {additionalInfo && (\n <AdditionalInfo\n heading={additionalInfo.heading}\n contextualLabel={contextualLabel || name}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} contextualLabel={contextualLabel} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nexport const StyledDescription = styled(HTML)`\n /* Prevent instruction text from contributing to modal width calculation */\n width: 0;\n min-width: 100%;\n`;\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n {\n children,\n description,\n banner,\n name,\n contextualLabel,\n additionalInfo,\n actions,\n collapsed,\n headingTag,\n onToggleCollapsed,\n variant,\n status,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n) {\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <StyledFieldGroupContent container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n {banner && <Banner {...banner} />}\n {description && (\n <StyledDescription id={`${uid}-description`} forwardedAs='p' content={description} />\n )}\n <div>{children}</div>\n </StyledFieldGroupContent>\n );\n\n return (\n <StyledGroupContainer border={variant === 'form-group'}>\n <StyledFieldGroup\n aria-label={contextualLabel || name}\n aria-describedby={description ? `${uid}-description` : undefined}\n as={name ? 'fieldset' : 'div'}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend\n collapsed={collapsed}\n actions={actions}\n additionalInfo={additionalInfo}\n name={name}\n contextualLabel={contextualLabel}\n >\n {typeof collapsed === 'boolean' ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n onToggleCollapsed?.();\n }}\n aria-expanded={!collapsed}\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [\n contextualLabel || name\n ])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {status === 'error' ? <StyledErrorIcon name='warn-solid' /> : null}\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n\n {typeof collapsed === 'boolean' ? (\n <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n </StyledGroupContainer>\n );\n});\n\nexport default FieldGroup;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAG9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;oBACqB,OAAO;YAmHxD,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAG9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;oBACqB,OAAO;YAyGxD,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -11,7 +11,6 @@ export const StyledFormControl = styled.div(({ theme, status, hasSuggestion }) =
11
11
  const backgroundColor = hasSuggestion && status
12
12
  ? mix(0.1, formField[status]['status-color'], palette['primary-background'])
13
13
  : background;
14
- const inline = formField.layout === 'inline';
15
14
  return css `
16
15
  color: ${foreground};
17
16
  background-color: ${backgroundColor};
@@ -23,16 +22,8 @@ export const StyledFormControl = styled.div(({ theme, status, hasSuggestion }) =
23
22
  transition-duration: ${speed};
24
23
  transition-timing-function: ${timing.ease};
25
24
 
26
- ${inline &&
27
- css `
28
- flex-grow: 1;
29
- flex-shrink: 1;
30
- flex-basis: 0;
31
- align-self: flex-start;
32
- `}
33
-
34
25
  &,
35
- & > select {
26
+ & > select {
36
27
  outline: none;
37
28
  }
38
29
 
@@ -1 +1 @@
1
- {"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, getReadableStatusColor } from '../../styles';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: string;\n /** Set visual state based on a validation state. */\n status?: 'success' | 'warning' | 'error' | 'pending';\n /** Pass a string or a fragment with an Icon and string. */\n label?: ReactNode;\n /** Visually hides the label region. */\n labelHidden?: boolean;\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: ReactNode;\n /** Indicate if the field is required. The browser defaults to false. */\n required?: boolean;\n /** Placeholder text. The browser defaults to an empty string. */\n placeholder?: string;\n /** Button when clicked will show additional information on a field */\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /**\n * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n */\n value?: string;\n /**\n * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html),\n * pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n */\n defaultValue?: string;\n /** Disable the control. The browser defaults to false. */\n disabled?: boolean;\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: boolean;\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: string;\n /** Callback fired when AI suggestion is accepted/rejected */\n onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport interface HandleValue {\n /** Used to clear component inputs with imperative handle */\n clear: () => void;\n}\n\nexport const StyledFormControl = styled.div<\n FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(({ theme, status, hasSuggestion }) => {\n const {\n base: {\n 'border-radius': baseRadius,\n 'font-size': baseFontSize,\n 'font-scale': baseFontScale,\n animation: { speed, timing },\n palette\n },\n components: {\n 'form-field': formField,\n 'form-control': {\n 'foreground-color': foreground,\n 'background-color': background,\n 'border-color': brd,\n 'border-radius': radius,\n 'border-width': borderWidth,\n ':hover': { 'border-color': hoverBorderColor },\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n ':disabled': {\n 'border-color': disabledBorderColor,\n 'background-color': disabledBackgroundColor\n },\n ':read-only': {\n 'border-color': readOnlyBorderColor,\n 'background-color': readOnlyBackgroundColor\n }\n }\n }\n } = theme;\n\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n const borderColor = status && formField[status] ? getReadableStatusColor(theme, status) : brd;\n const backgroundColor =\n hasSuggestion && status\n ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n : background;\n\n const inline = formField.layout === 'inline';\n\n return css`\n color: ${foreground};\n background-color: ${backgroundColor};\n border-radius: calc(${baseRadius} * ${radius});\n border-color: ${borderColor};\n border-width: ${borderWidth};\n border-style: solid;\n transition-property: color, background-color, border-color;\n transition-duration: ${speed};\n transition-timing-function: ${timing.ease};\n\n ${inline &&\n css`\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n align-self: flex-start;\n `}\n\n &,\n & > select {\n outline: none;\n }\n\n &:disabled,\n &[disabled] {\n background-color: ${disabledBackgroundColor};\n border-color: ${disabledBorderColor};\n cursor: not-allowed;\n }\n\n &:focus-visible:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n ${hasSuggestion &&\n css`\n background-color: ${background};\n `}\n }\n\n &:focus-within:not([disabled]) {\n ${hasSuggestion &&\n css`\n background-color: ${background};\n `}\n }\n\n &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n ${!status &&\n css`\n border-color: ${hoverBorderColor};\n `}\n ${hasSuggestion &&\n css`\n background-color: ${background};\n box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n `}\n }\n\n ${hasSuggestion &&\n css`\n border-end-end-radius: 0;\n `}\n\n &[readonly] {\n background-color: ${readOnlyBackgroundColor};\n border-color: ${readOnlyBorderColor};\n }\n\n @media (pointer: coarse) {\n /* stylelint-disable-next-line unit-allowed-list */\n font-size: max(${fontSize.s}, 16px);\n }\n `;\n});\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n function FormControl(props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) {\n return <StyledFormControl ref={ref} {...props} />;\n }\n);\n\nexport default FormControl;\n"]}
1
+ {"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, getReadableStatusColor } from '../../styles';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: string;\n /** Set visual state based on a validation state. */\n status?: 'success' | 'warning' | 'error' | 'pending';\n /** Pass a string or a fragment with an Icon and string. */\n label?: ReactNode;\n /** Visually hides the label region. */\n labelHidden?: boolean;\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: ReactNode;\n /** Indicate if the field is required. The browser defaults to false. */\n required?: boolean;\n /** Placeholder text. The browser defaults to an empty string. */\n placeholder?: string;\n /** Button when clicked will show additional information on a field */\n additionalInfo?: {\n heading?: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /**\n * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n */\n value?: string;\n /**\n * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html),\n * pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n */\n defaultValue?: string;\n /** Disable the control. The browser defaults to false. */\n disabled?: boolean;\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: boolean;\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: string;\n /** Callback fired when AI suggestion is accepted/rejected */\n onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport interface HandleValue {\n /** Used to clear component inputs with imperative handle */\n clear: () => void;\n}\n\nexport const StyledFormControl = styled.div<\n FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(({ theme, status, hasSuggestion }) => {\n const {\n base: {\n 'border-radius': baseRadius,\n 'font-size': baseFontSize,\n 'font-scale': baseFontScale,\n animation: { speed, timing },\n palette\n },\n components: {\n 'form-field': formField,\n 'form-control': {\n 'foreground-color': foreground,\n 'background-color': background,\n 'border-color': brd,\n 'border-radius': radius,\n 'border-width': borderWidth,\n ':hover': { 'border-color': hoverBorderColor },\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n ':disabled': {\n 'border-color': disabledBorderColor,\n 'background-color': disabledBackgroundColor\n },\n ':read-only': {\n 'border-color': readOnlyBorderColor,\n 'background-color': readOnlyBackgroundColor\n }\n }\n }\n } = theme;\n\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n const borderColor = status && formField[status] ? getReadableStatusColor(theme, status) : brd;\n const backgroundColor =\n hasSuggestion && status\n ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n : background;\n\n return css`\n color: ${foreground};\n background-color: ${backgroundColor};\n border-radius: calc(${baseRadius} * ${radius});\n border-color: ${borderColor};\n border-width: ${borderWidth};\n border-style: solid;\n transition-property: color, background-color, border-color;\n transition-duration: ${speed};\n transition-timing-function: ${timing.ease};\n\n &,\n & > select {\n outline: none;\n }\n\n &:disabled,\n &[disabled] {\n background-color: ${disabledBackgroundColor};\n border-color: ${disabledBorderColor};\n cursor: not-allowed;\n }\n\n &:focus-visible:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n ${hasSuggestion &&\n css`\n background-color: ${background};\n `}\n }\n\n &:focus-within:not([disabled]) {\n ${hasSuggestion &&\n css`\n background-color: ${background};\n `}\n }\n\n &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n ${!status &&\n css`\n border-color: ${hoverBorderColor};\n `}\n ${hasSuggestion &&\n css`\n background-color: ${background};\n box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n `}\n }\n\n ${hasSuggestion &&\n css`\n border-end-end-radius: 0;\n `}\n\n &[readonly] {\n background-color: ${readOnlyBackgroundColor};\n border-color: ${readOnlyBorderColor};\n }\n\n @media (pointer: coarse) {\n /* stylelint-disable-next-line unit-allowed-list */\n font-size: max(${fontSize.s}, 16px);\n }\n `;\n});\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n function FormControl(props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) {\n return <StyledFormControl ref={ref} {...props} />;\n }\n);\n\nexport default FormControl;\n"]}
@@ -12,6 +12,7 @@ export interface PreviewPanelProps extends PreviewProps {
12
12
  open: DrawerProps['open'];
13
13
  }
14
14
  export interface PreviewOptions {
15
+ /** Leaving this as a stub as we may want to add more options in the future */
15
16
  previewProps: PreviewProps;
16
17
  }
17
18
  export interface PreviewManagerProps {
@@ -1 +1 @@
1
- {"version":3,"file":"Preview.types.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/Preview.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,cAAc,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,cAAc,CACvC,KAAK,EACL;IACE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACF,GACC,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,GACpF,MAAM,GACN,UAAU,GACV,SAAS,CAAC;AAEZ,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAE7B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACvD,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9E,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAClE,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,aAAa,EAAE,CAAC,CAAC,SAAS,MAAM,EAC9B,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EACrB,OAAO,CAAC,EAAE,cAAc,KACrB,cAAc,CAAC,CAAC,CAAC,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B"}
1
+ {"version":3,"file":"Preview.types.d.ts","sourceRoot":"","sources":["../../../src/components/Preview/Preview.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,cAAc,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,cAAc,CACvC,KAAK,EACL;IACE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACF,GACC,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,GACpF,MAAM,GACN,UAAU,GACV,SAAS,CAAC;AAEZ,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,8EAA8E;IAC9E,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACvD,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9E,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAClE,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,aAAa,EAAE,CAAC,CAAC,SAAS,MAAM,EAC9B,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EACrB,OAAO,CAAC,EAAE,cAAc,KACrB,cAAc,CAAC,CAAC,CAAC,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B"}
@@ -1 +1 @@
1
- {"version":3,"file":"Preview.types.js","sourceRoot":"","sources":["../../../src/components/Preview/Preview.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ComponentType,\n Context,\n Dispatch,\n MutableRefObject,\n ReactNode,\n SetStateAction\n} from 'react';\n\nimport type { AsProp, BaseProps, DeferInfer, TestIdProp, WithAttributes } from '../../types';\nimport type { DrawerProps } from '../Drawer';\n\nexport type PreviewProps = WithAttributes<\n 'div',\n {\n children?: ReactNode;\n /** If true, the Preview Panel will render in a progress state. */\n progress?: boolean;\n /** Accessible label for the preview container. Will be constructed as 'Preview of X' */\n previewLabel?: string;\n }\n> &\n Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'> &\n AsProp &\n TestIdProp &\n BaseProps;\n\nexport interface PreviewPanelProps extends PreviewProps {\n open: DrawerProps['open'];\n}\n\nexport interface PreviewOptions {\n /* Leaving this as a stub as we may want to add more options in the future */\n previewProps: PreviewProps;\n}\n\nexport interface PreviewManagerProps {\n children: ReactNode;\n}\n\nexport interface PreviewMethods<P extends object = object> {\n updatePreview: (props: Partial<P>, options?: Partial<PreviewOptions>) => void;\n unmountPreview: () => void;\n}\n\nexport interface PreviewContextValue extends Partial<PreviewMethods> {\n initialized: boolean;\n previewTriggerRef: MutableRefObject<HTMLElement | null>;\n}\n\nexport interface PreviewManagerContextValue {\n /**\n * The function that will create the Preview. This function accepts the component to render\n * within Preview, props for that component, and options for the preview instance.\n */\n createPreview: <P extends object>(\n component: ComponentType<P>,\n props?: DeferInfer<P>,\n options?: PreviewOptions\n ) => PreviewMethods<P>;\n PreviewContext: Context<PreviewContextValue>;\n initialized: boolean;\n previewActive: boolean;\n setPreviewActive: Dispatch<SetStateAction<boolean>>;\n}\n\nexport interface PreviewObject<P extends object = object> {\n id: string;\n props: P;\n methods: PreviewMethods;\n Component: ComponentType<P>;\n options?: PreviewOptions;\n}\n"]}
1
+ {"version":3,"file":"Preview.types.js","sourceRoot":"","sources":["../../../src/components/Preview/Preview.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ComponentType,\n Context,\n Dispatch,\n MutableRefObject,\n ReactNode,\n SetStateAction\n} from 'react';\n\nimport type { AsProp, BaseProps, DeferInfer, TestIdProp, WithAttributes } from '../../types';\nimport type { DrawerProps } from '../Drawer';\n\nexport type PreviewProps = WithAttributes<\n 'div',\n {\n children?: ReactNode;\n /** If true, the Preview Panel will render in a progress state. */\n progress?: boolean;\n /** Accessible label for the preview container. Will be constructed as 'Preview of X' */\n previewLabel?: string;\n }\n> &\n Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'> &\n AsProp &\n TestIdProp &\n BaseProps;\n\nexport interface PreviewPanelProps extends PreviewProps {\n open: DrawerProps['open'];\n}\n\nexport interface PreviewOptions {\n /** Leaving this as a stub as we may want to add more options in the future */\n previewProps: PreviewProps;\n}\n\nexport interface PreviewManagerProps {\n children: ReactNode;\n}\n\nexport interface PreviewMethods<P extends object = object> {\n updatePreview: (props: Partial<P>, options?: Partial<PreviewOptions>) => void;\n unmountPreview: () => void;\n}\n\nexport interface PreviewContextValue extends Partial<PreviewMethods> {\n initialized: boolean;\n previewTriggerRef: MutableRefObject<HTMLElement | null>;\n}\n\nexport interface PreviewManagerContextValue {\n /**\n * The function that will create the Preview. This function accepts the component to render\n * within Preview, props for that component, and options for the preview instance.\n */\n createPreview: <P extends object>(\n component: ComponentType<P>,\n props?: DeferInfer<P>,\n options?: PreviewOptions\n ) => PreviewMethods<P>;\n PreviewContext: Context<PreviewContextValue>;\n initialized: boolean;\n previewActive: boolean;\n setPreviewActive: Dispatch<SetStateAction<boolean>>;\n}\n\nexport interface PreviewObject<P extends object = object> {\n id: string;\n props: P;\n methods: PreviewMethods;\n Component: ComponentType<P>;\n options?: PreviewOptions;\n}\n"]}
@@ -1,11 +1,16 @@
1
1
  import type { Ref } from 'react';
2
2
  import type { BaseProps, ForwardRefForwardPropsComponent } from '../../types';
3
- export declare const StyledEmptyQRWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
3
+ export type QRCodeSize = 's' | 'm' | 'l';
4
+ export declare const StyledEmptyQRWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
5
+ $qrSize: QRCodeSize;
6
+ }>> & string;
4
7
  export interface QRCodeProps extends BaseProps {
5
8
  /** Text that need to be encoded into QR code. */
6
9
  value: string;
7
10
  /** The HTML alt attribute for the image. */
8
11
  label?: string;
12
+ /** Size of the QR code. */
13
+ size?: QRCodeSize;
9
14
  /** Ref for the wrapping element. */
10
15
  ref?: Ref<HTMLImageElement | HTMLDivElement>;
11
16
  }
@@ -1 +1 @@
1
- {"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAO9E,eAAO,MAAM,oBAAoB,6NAQ/B,CAAC;AAIH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,GAAG,cAAc,CAAC,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA2CvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAO9E,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAazC,eAAO,MAAM,oBAAoB;aAAyB,UAAU;YASnE,CAAC;AAIF,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,GAAG,cAAc,CAAC,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CAkDvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
@@ -7,17 +7,23 @@ import Flex from '../Flex';
7
7
  import Image from '../Image';
8
8
  import { useI18n } from '../../hooks';
9
9
  import EmptyState from '../EmptyState';
10
- export const StyledEmptyQRWrapper = styled.div(({ theme }) => {
11
- return css `
12
- height: ${theme.base['content-width'].xs};
13
- width: ${theme.base['content-width'].xs};
10
+ const StyledQRCodeImage = styled(Image)(({ theme, $qrSize }) => css `
11
+ width: ${theme.components['qr-code'].size[$qrSize]};
12
+ height: ${theme.components['qr-code'].size[$qrSize]};
13
+ max-width: 100%;
14
+ max-height: 100%;
15
+ `);
16
+ StyledQRCodeImage.defaultProps = defaultThemeProp;
17
+ export const StyledEmptyQRWrapper = styled.div(({ theme, $qrSize }) => css `
18
+ height: ${theme.components['qr-code'].size[$qrSize]};
19
+ width: ${theme.components['qr-code'].size[$qrSize]};
20
+ max-width: 100%;
14
21
  border: 0.0625rem solid ${theme.base.palette['border-line']};
15
22
  border-radius: calc(${theme.base['border-radius']} / 2);
16
23
  text-align: center;
17
- `;
18
- });
24
+ `);
19
25
  StyledEmptyQRWrapper.defaultProps = defaultThemeProp;
20
- const QRCode = forwardRef(function QRCode({ value, label = value, ...restProps }, ref) {
26
+ const QRCode = forwardRef(function QRCode({ value, label = value, size = 'm', ...restProps }, ref) {
21
27
  const [dataURL, setDataURL] = useState('');
22
28
  const t = useI18n();
23
29
  const mounted = useRef(false);
@@ -37,13 +43,13 @@ const QRCode = forwardRef(function QRCode({ value, label = value, ...restProps }
37
43
  setDataURL('');
38
44
  });
39
45
  }, [value]);
40
- return dataURL ? (_jsx(Image, { ...restProps, ref: ref, src: dataURL, alt: label })) : (_jsx(Flex, { ...restProps, ref: ref, container: {
46
+ return dataURL ? (_jsx(StyledQRCodeImage, { ...restProps, ref: ref, "$qrSize": size, src: dataURL, alt: label })) : (_jsx(Flex, { ...restProps, ref: ref, container: {
41
47
  direction: 'column',
42
48
  alignItems: 'center',
43
49
  justify: 'center',
44
50
  gap: 1,
45
51
  pad: 2
46
- }, as: StyledEmptyQRWrapper, children: _jsx(EmptyState, { message: t('qr_code_not_available') }) }));
52
+ }, as: StyledEmptyQRWrapper, "$qrSize": size, children: _jsx(EmptyState, { message: t('qr_code_not_available') }) }));
47
53
  });
48
54
  export default QRCode;
49
55
  //# sourceMappingURL=QRCode.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,SAAS,MAAM,QAAQ,CAAC;AACpC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,UAAU,MAAM,eAAe,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;aAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;8BACb,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;0BACrC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAWrD,MAAM,MAAM,GAAiD,UAAU,CAAC,SAAS,MAAM,CACrF,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,SAAS,EAAgC,EACpE,GAAuB;IAEvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC;aACvB,IAAI,CAAC,OAAO,CAAC,EAAE;YACd,IAAI,OAAO,CAAC,OAAO;gBAAE,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,UAAU,CAAC,EAAE,CAAC,CAAC;QACjB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,KAAC,KAAK,OAAK,SAAS,EAAE,GAAG,EAAE,GAA4B,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,GAAI,CACtF,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;YACjB,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,oBAAoB,YAExB,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,uBAAuB,CAAC,GAAI,GAC9C,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport * as QRCodeLib from 'qrcode';\nimport styled, { css } from 'styled-components';\n\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport { useI18n } from '../../hooks';\nimport EmptyState from '../EmptyState';\n\nexport const StyledEmptyQRWrapper = styled.div(({ theme }) => {\n return css`\n height: ${theme.base['content-width'].xs};\n width: ${theme.base['content-width'].xs};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: calc(${theme.base['border-radius']} / 2);\n text-align: center;\n `;\n});\n\nStyledEmptyQRWrapper.defaultProps = defaultThemeProp;\n\nexport interface QRCodeProps extends BaseProps {\n /** Text that need to be encoded into QR code. */\n value: string;\n /** The HTML alt attribute for the image. */\n label?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLImageElement | HTMLDivElement>;\n}\n\nconst QRCode: ForwardRefForwardPropsComponent<QRCodeProps> = forwardRef(function QRCode(\n { value, label = value, ...restProps }: PropsWithoutRef<QRCodeProps>,\n ref: QRCodeProps['ref']\n) {\n const [dataURL, setDataURL] = useState('');\n const t = useI18n();\n\n const mounted = useRef(false);\n useEffect(() => {\n mounted.current = true;\n return () => {\n mounted.current = false;\n };\n }, []);\n\n useEffect(() => {\n QRCodeLib.toDataURL(value)\n .then(results => {\n if (mounted.current) setDataURL(results);\n })\n .catch(() => {\n setDataURL('');\n });\n }, [value]);\n\n return dataURL ? (\n <Image {...restProps} ref={ref as Ref<HTMLImageElement>} src={dataURL} alt={label} />\n ) : (\n <Flex\n {...restProps}\n ref={ref}\n container={{\n direction: 'column',\n alignItems: 'center',\n justify: 'center',\n gap: 1,\n pad: 2\n }}\n as={StyledEmptyQRWrapper}\n >\n <EmptyState message={t('qr_code_not_available')} />\n </Flex>\n );\n});\n\nexport default QRCode;\n"]}
1
+ {"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport * as QRCodeLib from 'qrcode';\nimport styled, { css } from 'styled-components';\n\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport { useI18n } from '../../hooks';\nimport EmptyState from '../EmptyState';\n\nexport type QRCodeSize = 's' | 'm' | 'l';\n\nconst StyledQRCodeImage = styled(Image)<{ $qrSize: QRCodeSize }>(\n ({ theme, $qrSize }) => css`\n width: ${theme.components['qr-code'].size[$qrSize]};\n height: ${theme.components['qr-code'].size[$qrSize]};\n max-width: 100%;\n max-height: 100%;\n `\n);\n\nStyledQRCodeImage.defaultProps = defaultThemeProp;\n\nexport const StyledEmptyQRWrapper = styled.div<{ $qrSize: QRCodeSize }>(\n ({ theme, $qrSize }) => css`\n height: ${theme.components['qr-code'].size[$qrSize]};\n width: ${theme.components['qr-code'].size[$qrSize]};\n max-width: 100%;\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: calc(${theme.base['border-radius']} / 2);\n text-align: center;\n `\n);\n\nStyledEmptyQRWrapper.defaultProps = defaultThemeProp;\n\nexport interface QRCodeProps extends BaseProps {\n /** Text that need to be encoded into QR code. */\n value: string;\n /** The HTML alt attribute for the image. */\n label?: string;\n /** Size of the QR code. */\n size?: QRCodeSize;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLImageElement | HTMLDivElement>;\n}\n\nconst QRCode: ForwardRefForwardPropsComponent<QRCodeProps> = forwardRef(function QRCode(\n { value, label = value, size = 'm', ...restProps }: PropsWithoutRef<QRCodeProps>,\n ref: QRCodeProps['ref']\n) {\n const [dataURL, setDataURL] = useState('');\n const t = useI18n();\n\n const mounted = useRef(false);\n useEffect(() => {\n mounted.current = true;\n return () => {\n mounted.current = false;\n };\n }, []);\n\n useEffect(() => {\n QRCodeLib.toDataURL(value)\n .then(results => {\n if (mounted.current) setDataURL(results);\n })\n .catch(() => {\n setDataURL('');\n });\n }, [value]);\n\n return dataURL ? (\n <StyledQRCodeImage\n {...restProps}\n ref={ref as Ref<HTMLImageElement>}\n $qrSize={size}\n src={dataURL}\n alt={label}\n />\n ) : (\n <Flex\n {...restProps}\n ref={ref}\n container={{\n direction: 'column',\n alignItems: 'center',\n justify: 'center',\n gap: 1,\n pad: 2\n }}\n as={StyledEmptyQRWrapper}\n $qrSize={size}\n >\n <EmptyState message={t('qr_code_not_available')} />\n </Flex>\n );\n});\n\nexport default QRCode;\n"]}
@@ -1,3 +1,3 @@
1
1
  export { default } from './QRCode';
2
- export type { QRCodeProps } from './QRCode';
2
+ export type { QRCodeProps, QRCodeSize } from './QRCode';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/QRCode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './QRCode';\nexport type { QRCodeProps } from './QRCode';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/QRCode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { default } from './QRCode';\nexport type { QRCodeProps, QRCodeSize } from './QRCode';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,+BAA+B,EAC/B,MAAM,EACN,iBAAiB,EAClB,MAAM,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAED,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAErE,eAAO,MAAM,UAAU,4PAsCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CAOnD,CAAC;AAEH,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,+BAA+B,EAC/B,MAAM,EACN,iBAAiB,EAClB,MAAM,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAED,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAErE,eAAO,MAAM,UAAU,4PAwCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CAOnD,CAAC;AAEH,eAAe,IAAI,CAAC"}
@@ -23,6 +23,8 @@ export const StyledText = styled.span(props => {
23
23
  font-size: ${fontSizes[text[variant]['font-size']]};
24
24
  font-weight: ${text[variant]['font-weight']};
25
25
  font-family: ${text[variant]['font-family'] || fontFamily};
26
+ text-transform: ${text[variant]['text-transform']};
27
+ letter-spacing: ${text[variant]['letter-spacing']};
26
28
  color: ${color};
27
29
  `;
28
30
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAShC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAmBjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE,CAAC;QACX,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,WAAW,EAAE,CAAC;QAC5B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;IACzE,CAAC;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;mBAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,IAAI,UAAU;aAChD,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA8B,EACrE,GAAqB;IAErB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,EAAE,GAAG,OAAqB,CAAC;IAC5D,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAM,SAAS,GAAI,CAAC;AAC3E,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport type {\n HeadingTag,\n BaseProps,\n ForwardRefForwardPropsComponent,\n AsProp,\n PropsWithDefaults\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\n\nexport interface TextProps extends BaseProps, AsProp {\n /** Text content. */\n children: ReactNode;\n /**\n * Typographical sizes and styles.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | HeadingTag;\n /** Render text with semantic color based on a status. */\n status?: 'error' | 'warning' | 'success';\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;\n}\n\ntype TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;\n\nexport const StyledText = styled.span<TextPropsWithDefaults>(props => {\n const {\n variant,\n status,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'font-family': fontFamily,\n palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success },\n transparency: { 'transparent-2': secondaryAlpha }\n },\n components: { text }\n }\n } = props;\n\n let color: string | undefined;\n\n if (status) {\n color = {\n error,\n warning,\n success\n }[status];\n }\n\n if (variant === 'secondary') {\n color = tryCatch(() => rgba(color ?? foregroundColor, secondaryAlpha));\n }\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${fontSizes[text[variant]['font-size'] as FontSize]};\n font-weight: ${text[variant]['font-weight']};\n font-family: ${text[variant]['font-family'] || fontFamily};\n color: ${color};\n `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nconst Text: ForwardRefForwardPropsComponent<TextProps> = forwardRef(function Text(\n { variant = 'primary', as, ...restProps }: PropsWithoutRef<TextProps>,\n ref: TextProps['ref']\n) {\n // If variant is for a heading, and no as is passed, set as to heading tag.\n if (!as && /h\\d/i.test(variant)) as = variant as HeadingTag;\n return <StyledText ref={ref} variant={variant} as={as} {...restProps} />;\n});\n\nexport default Text;\n"]}
1
+ {"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAShC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAmBjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE,CAAC;QACX,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,WAAW,EAAE,CAAC;QAC5B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;IACzE,CAAC;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;mBAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,IAAI,UAAU;sBACvC,IAAI,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC;sBAC/B,IAAI,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC;aACxC,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA8B,EACrE,GAAqB;IAErB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,EAAE,GAAG,OAAqB,CAAC;IAC5D,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAM,SAAS,GAAI,CAAC;AAC3E,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport type {\n HeadingTag,\n BaseProps,\n ForwardRefForwardPropsComponent,\n AsProp,\n PropsWithDefaults\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\n\nexport interface TextProps extends BaseProps, AsProp {\n /** Text content. */\n children: ReactNode;\n /**\n * Typographical sizes and styles.\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | HeadingTag;\n /** Render text with semantic color based on a status. */\n status?: 'error' | 'warning' | 'success';\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;\n}\n\ntype TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;\n\nexport const StyledText = styled.span<TextPropsWithDefaults>(props => {\n const {\n variant,\n status,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'font-family': fontFamily,\n palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success },\n transparency: { 'transparent-2': secondaryAlpha }\n },\n components: { text }\n }\n } = props;\n\n let color: string | undefined;\n\n if (status) {\n color = {\n error,\n warning,\n success\n }[status];\n }\n\n if (variant === 'secondary') {\n color = tryCatch(() => rgba(color ?? foregroundColor, secondaryAlpha));\n }\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${fontSizes[text[variant]['font-size'] as FontSize]};\n font-weight: ${text[variant]['font-weight']};\n font-family: ${text[variant]['font-family'] || fontFamily};\n text-transform: ${text[variant]['text-transform']};\n letter-spacing: ${text[variant]['letter-spacing']};\n color: ${color};\n `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nconst Text: ForwardRefForwardPropsComponent<TextProps> = forwardRef(function Text(\n { variant = 'primary', as, ...restProps }: PropsWithoutRef<TextProps>,\n ref: TextProps['ref']\n) {\n // If variant is for a heading, and no as is passed, set as to heading tag.\n if (!as && /h\\d/i.test(variant)) as = variant as HeadingTag;\n return <StyledText ref={ref} variant={variant} as={as} {...restProps} />;\n});\n\nexport default Text;\n"]}