@pega/cosmos-react-core 10.0.0-build.2.1 → 10.0.0-build.2.11

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 (84) 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/ComboBox/ComboBox.d.ts.map +1 -1
  5. package/lib/components/ComboBox/ComboBox.js +1 -1
  6. package/lib/components/ComboBox/ComboBox.js.map +1 -1
  7. package/lib/components/ComboBox/ComboBox.styles.d.ts.map +1 -1
  8. package/lib/components/ComboBox/ComboBox.styles.js +14 -2
  9. package/lib/components/ComboBox/ComboBox.styles.js.map +1 -1
  10. package/lib/components/ComboBox/ComboBox.types.d.ts +2 -0
  11. package/lib/components/ComboBox/ComboBox.types.d.ts.map +1 -1
  12. package/lib/components/ComboBox/ComboBox.types.js.map +1 -1
  13. package/lib/components/ComboBox/ComboBoxInput.d.ts +1 -0
  14. package/lib/components/ComboBox/ComboBoxInput.d.ts.map +1 -1
  15. package/lib/components/ComboBox/ComboBoxInput.js.map +1 -1
  16. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
  17. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +9 -3
  18. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
  19. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.d.ts +2 -0
  20. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.d.ts.map +1 -1
  21. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.js.map +1 -1
  22. package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts.map +1 -1
  23. package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js +28 -9
  24. package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map +1 -1
  25. package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts +2 -0
  26. package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts.map +1 -1
  27. package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.js.map +1 -1
  28. package/lib/components/DateTime/Input/DateTime.styles.d.ts.map +1 -1
  29. package/lib/components/DateTime/Input/DateTime.styles.js +1 -2
  30. package/lib/components/DateTime/Input/DateTime.styles.js.map +1 -1
  31. package/lib/components/DateTime/Input/MonthInput.d.ts.map +1 -1
  32. package/lib/components/DateTime/Input/MonthInput.js +2 -1
  33. package/lib/components/DateTime/Input/MonthInput.js.map +1 -1
  34. package/lib/components/DateTime/Input/QuarterInput.d.ts.map +1 -1
  35. package/lib/components/DateTime/Input/QuarterInput.js +2 -2
  36. package/lib/components/DateTime/Input/QuarterInput.js.map +1 -1
  37. package/lib/components/DateTime/Picker/DatePicker.styles.d.ts.map +1 -1
  38. package/lib/components/DateTime/Picker/DatePicker.styles.js +5 -0
  39. package/lib/components/DateTime/Picker/DatePicker.styles.js.map +1 -1
  40. package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
  41. package/lib/components/FieldGroup/FieldGroup.js +0 -15
  42. package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
  43. package/lib/components/FormControl/FormControl.d.ts.map +1 -1
  44. package/lib/components/FormControl/FormControl.js +1 -10
  45. package/lib/components/FormControl/FormControl.js.map +1 -1
  46. package/lib/components/Number/NumberDisplay.d.ts +5 -0
  47. package/lib/components/Number/NumberDisplay.d.ts.map +1 -1
  48. package/lib/components/Number/NumberDisplay.js +3 -2
  49. package/lib/components/Number/NumberDisplay.js.map +1 -1
  50. package/lib/components/Number/utils.d.ts +3 -1
  51. package/lib/components/Number/utils.d.ts.map +1 -1
  52. package/lib/components/Number/utils.js +10 -8
  53. package/lib/components/Number/utils.js.map +1 -1
  54. package/lib/components/Preview/Preview.types.d.ts +1 -0
  55. package/lib/components/Preview/Preview.types.d.ts.map +1 -1
  56. package/lib/components/Preview/Preview.types.js.map +1 -1
  57. package/lib/components/QRCode/QRCode.d.ts +6 -1
  58. package/lib/components/QRCode/QRCode.d.ts.map +1 -1
  59. package/lib/components/QRCode/QRCode.js +15 -9
  60. package/lib/components/QRCode/QRCode.js.map +1 -1
  61. package/lib/components/QRCode/index.d.ts +1 -1
  62. package/lib/components/QRCode/index.d.ts.map +1 -1
  63. package/lib/components/QRCode/index.js.map +1 -1
  64. package/lib/components/Text/Text.d.ts.map +1 -1
  65. package/lib/components/Text/Text.js +2 -0
  66. package/lib/components/Text/Text.js.map +1 -1
  67. package/lib/hooks/useI18n.d.ts +15 -0
  68. package/lib/hooks/useI18n.d.ts.map +1 -1
  69. package/lib/i18n/default.d.ts +15 -0
  70. package/lib/i18n/default.d.ts.map +1 -1
  71. package/lib/i18n/default.js +16 -0
  72. package/lib/i18n/default.js.map +1 -1
  73. package/lib/i18n/i18n.d.ts +15 -0
  74. package/lib/i18n/i18n.d.ts.map +1 -1
  75. package/lib/theme/index.d.ts +1 -0
  76. package/lib/theme/index.d.ts.map +1 -1
  77. package/lib/theme/index.js +1 -0
  78. package/lib/theme/index.js.map +1 -1
  79. package/lib/theme/theme.d.ts +150 -0
  80. package/lib/theme/theme.d.ts.map +1 -1
  81. package/lib/theme/themeDefinition.json +89 -2
  82. package/lib/theme/themeOverrides.schema.json +75 -0
  83. package/lib/theme/themes/aurigaTheme.json +140 -0
  84. package/package.json +1 -1
@@ -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":"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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 }\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"]}
@@ -21,6 +21,11 @@ export type NumberDisplayProps = WithAttributes<'span', NoChildrenProp & {
21
21
  * @default true
22
22
  */
23
23
  groupSeparators?: boolean;
24
+ /**
25
+ * Determines negative value notation: using minus sign or parentheses (accounting format).
26
+ * @default 'minus-sign'
27
+ */
28
+ negative?: 'minus-sign' | 'parentheses';
24
29
  };
25
30
  }>;
26
31
  declare const _default: import("react").ForwardRefExoticComponent<Omit<NumberDisplayProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAM9E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,MAAM,EACN,cAAc,GAAG;IACf,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;CACH,CACF,CAAC;;AAEF,wBA+BE"}
1
+ {"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAM9E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,MAAM,EACN,cAAc,GAAG;IACf,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;WAGG;QACH,QAAQ,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;KACzC,CAAC;CACH,CACF,CAAC;;AAEF,wBAiCE"}
@@ -3,13 +3,14 @@ import { forwardRef } from 'react';
3
3
  import { useConfiguration } from '../../hooks';
4
4
  import NoValue from '../NoValue/NoValue';
5
5
  import { getFraction, getFormattedValue } from './utils';
6
- export default forwardRef(function NumberDisplay({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) {
6
+ export default forwardRef(function NumberDisplay({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true, negative } = {}, ...restProps }, ref) {
7
7
  const { locale } = useConfiguration();
8
8
  return (_jsx("span", { ref: ref, ...restProps, children: value || value === 0 ? (getFormattedValue(value.toString(), locale, unit, {
9
9
  notation,
10
10
  useGrouping: groupSeparators,
11
11
  maximumFractionDigits: fractionDigits,
12
- minimumFractionDigits: fractionDigits
12
+ minimumFractionDigits: fractionDigits,
13
+ negative
13
14
  })) : (_jsx(NoValue, {})) }));
14
15
  });
15
16
  //# sourceMappingURL=NumberDisplay.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA+BzD,eAAe,UAAU,CACvB,SAAS,aAAa,CACpB,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACtC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport type NumberDisplayProps = WithAttributes<\n 'span',\n NoChildrenProp & {\n /** Number value */\n value?: number | bigint;\n /** Unit to be included in the text, for example '%' */\n unit?: string;\n\n formattingOptions?: {\n /**\n * Value display notation.\n * @default 'standard'\n */\n notation?: 'standard' | 'compact';\n /**\n * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n * Maximum is 20, default is value precision.\n * @default variable\n */\n fractionDigits?: number;\n /**\n * Determines whether group separators should be shown.\n * @default true\n */\n groupSeparators?: boolean;\n };\n }\n>;\n\nexport default forwardRef<RefElement<NumberDisplayProps>, PropsWithoutRef<NumberDisplayProps>>(\n function NumberDisplay(\n {\n value,\n unit = '',\n formattingOptions: {\n fractionDigits = getFraction(String(value)).substring(1).length,\n notation,\n groupSeparators = true\n } = {},\n ...restProps\n },\n ref\n ) {\n const { locale } = useConfiguration();\n\n return (\n <span ref={ref} {...restProps}>\n {value || value === 0 ? (\n getFormattedValue(value.toString(), locale, unit, {\n notation,\n useGrouping: groupSeparators,\n maximumFractionDigits: fractionDigits,\n minimumFractionDigits: fractionDigits\n })\n ) : (\n <NoValue />\n )}\n </span>\n );\n }\n);\n"]}
1
+ {"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAoCzD,eAAe,UAAU,CACvB,SAAS,aAAa,CACpB,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACtB,QAAQ,EACT,GAAG,EAAE,EACN,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;YACrC,QAAQ;SACT,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport type NumberDisplayProps = WithAttributes<\n 'span',\n NoChildrenProp & {\n /** Number value */\n value?: number | bigint;\n /** Unit to be included in the text, for example '%' */\n unit?: string;\n\n formattingOptions?: {\n /**\n * Value display notation.\n * @default 'standard'\n */\n notation?: 'standard' | 'compact';\n /**\n * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n * Maximum is 20, default is value precision.\n * @default variable\n */\n fractionDigits?: number;\n /**\n * Determines whether group separators should be shown.\n * @default true\n */\n groupSeparators?: boolean;\n /**\n * Determines negative value notation: using minus sign or parentheses (accounting format).\n * @default 'minus-sign'\n */\n negative?: 'minus-sign' | 'parentheses';\n };\n }\n>;\n\nexport default forwardRef<RefElement<NumberDisplayProps>, PropsWithoutRef<NumberDisplayProps>>(\n function NumberDisplay(\n {\n value,\n unit = '',\n formattingOptions: {\n fractionDigits = getFraction(String(value)).substring(1).length,\n notation,\n groupSeparators = true,\n negative\n } = {},\n ...restProps\n },\n ref\n ) {\n const { locale } = useConfiguration();\n\n return (\n <span ref={ref} {...restProps}>\n {value || value === 0 ? (\n getFormattedValue(value.toString(), locale, unit, {\n notation,\n useGrouping: groupSeparators,\n maximumFractionDigits: fractionDigits,\n minimumFractionDigits: fractionDigits,\n negative\n })\n ) : (\n <NoValue />\n )}\n </span>\n );\n }\n);\n"]}
@@ -1,7 +1,9 @@
1
1
  export declare function getDecimalSign(locale: Intl.UnicodeBCP47LocaleIdentifier, options?: Intl.NumberFormatOptions): string;
2
2
  export declare function getFraction(value: string): string;
3
3
  export declare function getCleanedValue(value: string, decimalSign: string, maximumFractionDigits: number): string;
4
- export declare const getFormattedValue: (value: string, locale: string, unit?: string, { notation, useGrouping, maximumFractionDigits, minimumFractionDigits }?: Pick<Intl.NumberFormatOptions, "notation" | "useGrouping" | "maximumFractionDigits" | "minimumFractionDigits">) => string;
4
+ export declare const getFormattedValue: (value: string, locale: string, unit?: string, { notation, useGrouping, maximumFractionDigits, minimumFractionDigits, negative }?: Pick<Intl.NumberFormatOptions, "notation" | "useGrouping" | "maximumFractionDigits" | "minimumFractionDigits"> & {
5
+ negative?: "minus-sign" | "parentheses";
6
+ }) => string;
5
7
  export declare function isValueInRange(value: number, min?: number, max?: number): boolean;
6
8
  export declare function getIncrementedValue(value: string, min: number, max: number, step: number): string;
7
9
  export declare function getDecrementedValue(value: string, min: number, max: number, step: number): string;
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,4BAA4B,EACzC,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,GACjC,MAAM,CAMR;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAQR;AAYD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,OAAO,MAAM,EACb,0EAKG,IAAI,CACL,IAAI,CAAC,mBAAmB,EACxB,UAAU,GAAG,aAAa,GAAG,uBAAuB,GAAG,uBAAuB,CAC1E,WAyCP,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAEjF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,UAI5F"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,4BAA4B,EACzC,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,GACjC,MAAM,CAMR;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAQR;AAYD,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,OAAO,MAAM,EACb,oFAMG,IAAI,CACL,IAAI,CAAC,mBAAmB,EACxB,UAAU,GAAG,aAAa,GAAG,uBAAuB,GAAG,uBAAuB,CAC/E,GAAG;IAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,aAAa,CAAA;CAAO,WA2CrD,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAEjF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,UAI5F"}
@@ -29,9 +29,11 @@ const isValidUnit = (unit) => {
29
29
  return false;
30
30
  }
31
31
  };
32
- export const getFormattedValue = (value, locale, unit, { notation = 'standard', useGrouping = false, maximumFractionDigits, minimumFractionDigits } = {}) => {
32
+ export const getFormattedValue = (value, locale, unit, { notation = 'standard', useGrouping = false, maximumFractionDigits, minimumFractionDigits, negative = 'minus-sign' } = {}) => {
33
33
  const isUnit = unit ? isValidUnit(unit) : false;
34
- const [integer, fractionPart] = value.split('.', 2);
34
+ const isNegative = value.startsWith('-');
35
+ const formattingValue = negative === 'parentheses' && isNegative ? value.slice(1) : value;
36
+ const [integer = '0', fractionPart] = formattingValue.split('.', 2);
35
37
  const formatter = new Intl.NumberFormat(locale, {
36
38
  notation,
37
39
  useGrouping,
@@ -41,10 +43,10 @@ export const getFormattedValue = (value, locale, unit, { notation = 'standard',
41
43
  unit: isUnit ? unit : undefined,
42
44
  numberingSystem: 'latn'
43
45
  });
44
- let formatted = value;
45
- if (value && !Number.isNaN(parseFloat(integer))) {
46
+ let formatted = formattingValue;
47
+ if (formattingValue && !Number.isNaN(parseFloat(integer))) {
46
48
  const endsWithDot = fractionPart === '';
47
- const valueNumber = endsWithDot ? `${value}1` : value;
49
+ const valueNumber = endsWithDot ? `${formattingValue}1` : formattingValue;
48
50
  formatted =
49
51
  formatter
50
52
  .formatToParts(valueNumber)
@@ -57,12 +59,12 @@ export const getFormattedValue = (value, locale, unit, { notation = 'standard',
57
59
  else if (unit) {
58
60
  if (isUnit)
59
61
  formatted = formatter
60
- .formatToParts(value.startsWith('-') ? -1 : 1)
62
+ .formatToParts(formattingValue.startsWith('-') ? -1 : 1)
61
63
  .reduce((result, { type, value: part }) => ['unit', 'minusSign'].includes(type) ? result + part : result, '');
62
64
  else
63
- formatted = value.startsWith('-') ? `- ${unit}` : unit;
65
+ formatted = formattingValue.startsWith('-') ? `- ${unit}` : unit;
64
66
  }
65
- return formatted;
67
+ return negative === 'parentheses' && isNegative ? `(${formatted})` : formatted;
66
68
  };
67
69
  export function isValueInRange(value, min, max) {
68
70
  return !((min !== undefined && value < min) || (max !== undefined && value > max));
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getDecimalSign(\n locale: Intl.UnicodeBCP47LocaleIdentifier,\n options?: Intl.NumberFormatOptions\n): string {\n return (\n new Intl.NumberFormat(locale, options)\n .formatToParts(0.1)\n .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value || ''\n );\n}\n\nexport function getFraction(value: string) {\n const decPos = value.indexOf('.');\n const substrLength = decPos === -1 ? value.length : decPos;\n return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n value: string,\n decimalSign: string,\n maximumFractionDigits: number\n): string {\n let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n if (match && match.length > 0) {\n rawValue = match[0];\n }\n return rawValue;\n}\n\nconst isValidUnit = (unit: string) => {\n try {\n // eslint-disable-next-line no-new\n new Intl.NumberFormat(undefined, { style: 'unit', unit });\n return true;\n } catch {\n return false;\n }\n};\n\nexport const getFormattedValue = (\n value: string,\n locale: string,\n unit?: string,\n {\n notation = 'standard',\n useGrouping = false,\n maximumFractionDigits,\n minimumFractionDigits\n }: Pick<\n Intl.NumberFormatOptions,\n 'notation' | 'useGrouping' | 'maximumFractionDigits' | 'minimumFractionDigits'\n > = {}\n) => {\n const isUnit = unit ? isValidUnit(unit) : false;\n const [integer, fractionPart] = value.split('.', 2) as [string, string?];\n\n const formatter = new Intl.NumberFormat(locale, {\n notation,\n useGrouping,\n minimumFractionDigits:\n minimumFractionDigits ?? Math.min(maximumFractionDigits ?? 0, fractionPart?.length ?? 0),\n maximumFractionDigits,\n style: isUnit ? 'unit' : undefined,\n unit: isUnit ? unit : undefined,\n numberingSystem: 'latn'\n });\n\n let formatted = value;\n\n if (value && !Number.isNaN(parseFloat(integer))) {\n const endsWithDot = fractionPart === '';\n const valueNumber = endsWithDot ? `${value}1` : value;\n formatted =\n formatter\n .formatToParts(valueNumber as `${number}`)\n .reduce((result, { type, value: part }) => {\n if (type === 'fraction' && endsWithDot) return result;\n return result + part;\n }, '') + (!isUnit && unit ? `\\u00a0${unit}` : '');\n } else if (unit) {\n if (isUnit)\n formatted = formatter\n .formatToParts(value.startsWith('-') ? -1 : 1)\n .reduce(\n (result, { type, value: part }) =>\n ['unit', 'minusSign'].includes(type) ? result + part : result,\n ''\n );\n else formatted = value.startsWith('-') ? `- ${unit}` : unit;\n }\n\n return formatted;\n};\n\nexport function isValueInRange(value: number, min?: number, max?: number): boolean {\n return !((min !== undefined && value < min) || (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) || 0;\n const newValue = new BigNumber(numberValue).plus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (min !== undefined && newValue.toNumber() < min) {\n return min.toString();\n }\n return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) || 0;\n const newValue = new BigNumber(numberValue).minus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (max !== undefined && newValue.toNumber() > max) {\n return max.toString();\n }\n return value;\n}\n\ninterface NumberFormatOptions {\n locale: string;\n options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number | bigint, { locale, options }: NumberFormatOptions) {\n const formatter = new Intl.NumberFormat(locale, options);\n\n return formatter.format(value);\n}\n"]}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getDecimalSign(\n locale: Intl.UnicodeBCP47LocaleIdentifier,\n options?: Intl.NumberFormatOptions\n): string {\n return (\n new Intl.NumberFormat(locale, options)\n .formatToParts(0.1)\n .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value || ''\n );\n}\n\nexport function getFraction(value: string) {\n const decPos = value.indexOf('.');\n const substrLength = decPos === -1 ? value.length : decPos;\n return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n value: string,\n decimalSign: string,\n maximumFractionDigits: number\n): string {\n let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n if (match && match.length > 0) {\n rawValue = match[0];\n }\n return rawValue;\n}\n\nconst isValidUnit = (unit: string) => {\n try {\n // eslint-disable-next-line no-new\n new Intl.NumberFormat(undefined, { style: 'unit', unit });\n return true;\n } catch {\n return false;\n }\n};\n\nexport const getFormattedValue = (\n value: string,\n locale: string,\n unit?: string,\n {\n notation = 'standard',\n useGrouping = false,\n maximumFractionDigits,\n minimumFractionDigits,\n negative = 'minus-sign'\n }: Pick<\n Intl.NumberFormatOptions,\n 'notation' | 'useGrouping' | 'maximumFractionDigits' | 'minimumFractionDigits'\n > & { negative?: 'minus-sign' | 'parentheses' } = {}\n) => {\n const isUnit = unit ? isValidUnit(unit) : false;\n const isNegative = value.startsWith('-');\n const formattingValue = negative === 'parentheses' && isNegative ? value.slice(1) : value;\n const [integer = '0', fractionPart] = formattingValue.split('.', 2);\n\n const formatter = new Intl.NumberFormat(locale, {\n notation,\n useGrouping,\n minimumFractionDigits:\n minimumFractionDigits ?? Math.min(maximumFractionDigits ?? 0, fractionPart?.length ?? 0),\n maximumFractionDigits,\n style: isUnit ? 'unit' : undefined,\n unit: isUnit ? unit : undefined,\n numberingSystem: 'latn'\n });\n\n let formatted = formattingValue;\n\n if (formattingValue && !Number.isNaN(parseFloat(integer))) {\n const endsWithDot = fractionPart === '';\n const valueNumber = endsWithDot ? `${formattingValue}1` : formattingValue;\n formatted =\n formatter\n .formatToParts(valueNumber as `${number}`)\n .reduce((result, { type, value: part }) => {\n if (type === 'fraction' && endsWithDot) return result;\n return result + part;\n }, '') + (!isUnit && unit ? `\\u00a0${unit}` : '');\n } else if (unit) {\n if (isUnit)\n formatted = formatter\n .formatToParts(formattingValue.startsWith('-') ? -1 : 1)\n .reduce(\n (result, { type, value: part }) =>\n ['unit', 'minusSign'].includes(type) ? result + part : result,\n ''\n );\n else formatted = formattingValue.startsWith('-') ? `- ${unit}` : unit;\n }\n\n return negative === 'parentheses' && isNegative ? `(${formatted})` : formatted;\n};\n\nexport function isValueInRange(value: number, min?: number, max?: number): boolean {\n return !((min !== undefined && value < min) || (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) || 0;\n const newValue = new BigNumber(numberValue).plus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (min !== undefined && newValue.toNumber() < min) {\n return min.toString();\n }\n return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) || 0;\n const newValue = new BigNumber(numberValue).minus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (max !== undefined && newValue.toNumber() > max) {\n return max.toString();\n }\n return value;\n}\n\ninterface NumberFormatOptions {\n locale: string;\n options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number | bigint, { locale, options }: NumberFormatOptions) {\n const formatter = new Intl.NumberFormat(locale, options);\n\n return formatter.format(value);\n}\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"]}