@pega/cosmos-react-core 10.0.0-build.2.6 → 10.0.0-build.2.7

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 (11) 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/Text/Text.d.ts.map +1 -1
  5. package/lib/components/Text/Text.js +2 -0
  6. package/lib/components/Text/Text.js.map +1 -1
  7. package/lib/theme/theme.d.ts +108 -0
  8. package/lib/theme/theme.d.ts.map +1 -1
  9. package/lib/theme/themeDefinition.json +72 -0
  10. package/lib/theme/themeOverrides.schema.json +54 -0
  11. package/package.json +1 -1
package/lib/components/Button/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,SAAS,EAET,+BAA+B,EAC/B,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AAkBrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAgFF,eAAO,MAAM,YAAY,wQAqOxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,iUA+D3B,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA2GvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,SAAS,EAET,+BAA+B,EAC/B,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AAkBrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAgFF,eAAO,MAAM,YAAY,wQA+OxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,iUA+D3B,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA2GvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
package/lib/components/Button/Button.js CHANGED
@@ -73,7 +73,7 @@ const getOutlinedButtonStyles = (color, backgroundColor) => {
73
73
  };
74
74
  };
75
75
  export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ variant, icon, loading, compact, theme }) => {
76
- const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed } }, components: { button: { color, 'foreground-color': foregroundColor, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
76
+ const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed } }, components: { button: { color, height, 'foreground-color': foregroundColor, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
77
77
  // Base
78
78
  const base = baseStyles(theme);
79
79
  // Non-text base
@@ -102,17 +102,26 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
102
102
  > svg {
103
103
  display: block;
104
104
  }
105
- `} ${compact &&
105
+ `}
106
+
107
+ ${!icon &&
108
+ !compact &&
109
+ css `
110
+ min-height: ${height};
111
+ `}
112
+
113
+ ${compact &&
106
114
  css `
107
115
  min-height: ${hitAreaCompact};
108
116
  min-width: ${hitAreaCompact};
109
- `} @media (
110
- pointer: coarse) {
117
+ `}
118
+
119
+ @media (pointer: coarse) {
111
120
  border-radius: calc(${baseBorderRadius} * ${borderRadius});
112
121
 
113
122
  ${!compact &&
114
123
  css `
115
- min-height: ${hitAreaFinger};
124
+ min-height: ${icon ? `${hitAreaFinger}` : `max(${hitAreaFinger}, ${height})`};
116
125
  min-width: ${hitAreaFinger};
117
126
  `}
118
127
 
package/lib/components/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n ForwardRefForwardPropsComponent,\n PropsWithDefaults,\n AsProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch, createClassName } from '../../utils';\nimport {\n getActiveColors,\n getHoverColors,\n isSolidColor,\n omitProps,\n readableColor,\n readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Applies visual disabled styles without disabling the button element itself.\n * @default false\n */\n 'aria-disabled'?: boolean | 'true' | 'false';\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n text-decoration: none;\n transition-property: background-color, color, border-color, box-shadow, translate;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n @media (forced-colors: none) {\n outline: none;\n }\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &[aria-disabled='true'] {\n opacity: ${disabledOpacity};\n }\n\n &:not([disabled], [aria-disabled='true']):focus-visible,\n &:enabled:not([aria-disabled='true']):focus-visible {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\n/* If the background color is not provided, the color will be used for the hover and active styles */\nconst getFilledButtonStyles = (color: string, backgroundColor?: string) => ({\n contrastColor: backgroundColor ? color : tryCatch(() => readableColor(color)),\n hoverColors: getHoverColors(backgroundColor || color),\n activeColors: getActiveColors(backgroundColor || color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n // If the background color is not solid, use the readable color for the text\n const fallbackBackground = isSolidColor(backgroundColor) ? backgroundColor : readableColor(color);\n const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));\n const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n return {\n textColor: backgroundUsable ? color : readableColor(color),\n hoverBg: hoverBackgroundColor,\n hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),\n activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n };\n};\n\nexport const StyledButton = styled.button.withConfig(omitProps('loading'))<ButtonPropsWithDefaults>(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: { speed }\n },\n components: {\n button: {\n color,\n 'foreground-color': foregroundColor,\n 'secondary-color': secondaryColor,\n 'secondary-fill-style': fillStyle,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n white-space: nowrap;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `} ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `} @media (\n pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n `;\n\n // Primary and Secondary-filled\n /* For primary button, use the foreground color as the text color. If foreground is 'auto', then calculate based on background\n For secondary button, always use the secondary color */\n const { contrastColor, hoverColors, activeColors } =\n variant !== 'primary' || foregroundColor === 'auto'\n ? getFilledButtonStyles(variant === 'primary' ? color : secondaryColor)\n : getFilledButtonStyles(foregroundColor, color);\n\n const solidButtonStyles = css`\n --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n color: ${contrastColor};\n background-color: ${variant === 'primary' ? color : secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverColors.background};\n text-decoration: none;\n }\n }\n\n &:active {\n background-color: ${activeColors.background};\n color: ${activeColors.foreground};\n text-decoration: none;\n }\n `;\n\n // Secondary-outline\n const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n const secondary = css`\n --button-background-color: ${backgroundColor};\n color: ${secondaryOutlineButtonStyles.textColor};\n background-color: ${backgroundColor};\n border-color: ${secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${secondaryOutlineButtonStyles.hoverBg};\n text-decoration: none;\n }\n }\n\n &:active {\n color: ${secondaryOutlineButtonStyles.activeFg};\n background-color: ${secondaryOutlineButtonStyles.activeBg};\n border-color: ${secondaryOutlineButtonStyles.activeFg};\n text-decoration: none;\n }\n `;\n\n // Simple\n const simpleButtonStyles = getOutlinedButtonStyles(\n fillStyle === 'outline' ? secondaryColor : color,\n backgroundColor\n );\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\n ${icon &&\n css`\n &::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.1;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.hoverBg};\n color: ${simpleButtonStyles.hoverFg};\n border-color: ${simpleButtonStyles.hoverFg};\n text-decoration: none;\n `}\n }\n\n &:active {\n ${icon &&\n css`\n &::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.2;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.activeBg};\n color: ${simpleButtonStyles.activeFg};\n border-color: ${simpleButtonStyles.activeFg};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n solidButtonStyles}\n ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n ${variant === 'simple' && simple}\n ${variant === 'primary' &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig(omitProps('loading'))<\n Pick<ButtonPropsWithDefaults, 'variant' | 'href'> &\n // Needed for omitProps\n Pick<ButtonProps, 'loading'>\n>(({ theme, variant, href }) => {\n const {\n base: {\n palette: { 'foreground-color': textVariantColor }\n },\n components: {\n button: { color: primaryColor, 'secondary-fill-style': fillStyle },\n link: { color: linkColor }\n }\n } = theme;\n\n let linkVariantColor = linkColor;\n if (!href && fillStyle === 'solid') {\n linkVariantColor = primaryColor;\n }\n const { background: activeLinkColor } = getActiveColors(linkVariantColor);\n const { background: activeTextColor } = getActiveColors(textVariantColor);\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const link = css`\n color: ${linkVariantColor};\n\n &:active {\n color: ${activeLinkColor};\n }\n `;\n\n const text = css`\n color: ${textVariantColor};\n\n &:active {\n color: ${activeTextColor};\n }\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: ForwardRefForwardPropsComponent<ButtonProps> = forwardRef(function Button(\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n 'aria-disabled': ariaDisabled,\n loading = false,\n children,\n className,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: ButtonProps['ref']\n) {\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement | HTMLAnchorElement>();\n const mouseDownEvent = useRef<ReactMouseEvent>();\n const mouseDownPosition = useRef<DOMRect>();\n const mouseDownTimestamp = useRef<number>();\n const buttonRef = useConsolidatedRef(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n const handleClickWithElementShift = (e: MouseEvent) => {\n if (\n buttonRef.current &&\n mouseDownPosition.current &&\n mouseDownTimestamp.current &&\n isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n Date.now() - mouseDownTimestamp.current < 500\n ) {\n // Only click if the button is still the topmost element at its own position.\n // If something has rendered over the button between mousedown and mouseup,\n // elementFromPoint will return that — not the button — and we should not trigger a click.\n const { x, y, width, height } = buttonRef.current.getBoundingClientRect();\n const elementAtPoint = document.elementFromPoint(x + width / 2, y + height / 2);\n if (buttonRef.current.contains(elementAtPoint) || elementAtPoint === buttonRef.current) {\n buttonRef.current.click();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mouseup', handleClickWithElementShift);\n\n return () => {\n document.removeEventListener('mouseup', handleClickWithElementShift);\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n className={createClassName('button', className, { variant, icon, compact, loading })}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n aria-disabled={ariaDisabled}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n mouseDownTimestamp.current = Date.now();\n }}\n onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default Button;\n"]}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n ForwardRefForwardPropsComponent,\n PropsWithDefaults,\n AsProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch, createClassName } from '../../utils';\nimport {\n getActiveColors,\n getHoverColors,\n isSolidColor,\n omitProps,\n readableColor,\n readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Applies visual disabled styles without disabling the button element itself.\n * @default false\n */\n 'aria-disabled'?: boolean | 'true' | 'false';\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n text-decoration: none;\n transition-property: background-color, color, border-color, box-shadow, translate;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n @media (forced-colors: none) {\n outline: none;\n }\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &[aria-disabled='true'] {\n opacity: ${disabledOpacity};\n }\n\n &:not([disabled], [aria-disabled='true']):focus-visible,\n &:enabled:not([aria-disabled='true']):focus-visible {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\n/* If the background color is not provided, the color will be used for the hover and active styles */\nconst getFilledButtonStyles = (color: string, backgroundColor?: string) => ({\n contrastColor: backgroundColor ? color : tryCatch(() => readableColor(color)),\n hoverColors: getHoverColors(backgroundColor || color),\n activeColors: getActiveColors(backgroundColor || color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n // If the background color is not solid, use the readable color for the text\n const fallbackBackground = isSolidColor(backgroundColor) ? backgroundColor : readableColor(color);\n const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));\n const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n return {\n textColor: backgroundUsable ? color : readableColor(color),\n hoverBg: hoverBackgroundColor,\n hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),\n activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n };\n};\n\nexport const StyledButton = styled.button.withConfig(omitProps('loading'))<ButtonPropsWithDefaults>(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: { speed }\n },\n components: {\n button: {\n color,\n height,\n 'foreground-color': foregroundColor,\n 'secondary-color': secondaryColor,\n 'secondary-fill-style': fillStyle,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n white-space: nowrap;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `}\n\n ${!icon &&\n !compact &&\n css`\n min-height: ${height};\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n @media (pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${icon ? `${hitAreaFinger}` : `max(${hitAreaFinger}, ${height})`};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n `;\n\n // Primary and Secondary-filled\n /* For primary button, use the foreground color as the text color. If foreground is 'auto', then calculate based on background\n For secondary button, always use the secondary color */\n const { contrastColor, hoverColors, activeColors } =\n variant !== 'primary' || foregroundColor === 'auto'\n ? getFilledButtonStyles(variant === 'primary' ? color : secondaryColor)\n : getFilledButtonStyles(foregroundColor, color);\n\n const solidButtonStyles = css`\n --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n color: ${contrastColor};\n background-color: ${variant === 'primary' ? color : secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverColors.background};\n text-decoration: none;\n }\n }\n\n &:active {\n background-color: ${activeColors.background};\n color: ${activeColors.foreground};\n text-decoration: none;\n }\n `;\n\n // Secondary-outline\n const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n const secondary = css`\n --button-background-color: ${backgroundColor};\n color: ${secondaryOutlineButtonStyles.textColor};\n background-color: ${backgroundColor};\n border-color: ${secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${secondaryOutlineButtonStyles.hoverBg};\n text-decoration: none;\n }\n }\n\n &:active {\n color: ${secondaryOutlineButtonStyles.activeFg};\n background-color: ${secondaryOutlineButtonStyles.activeBg};\n border-color: ${secondaryOutlineButtonStyles.activeFg};\n text-decoration: none;\n }\n `;\n\n // Simple\n const simpleButtonStyles = getOutlinedButtonStyles(\n fillStyle === 'outline' ? secondaryColor : color,\n backgroundColor\n );\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\n ${icon &&\n css`\n &::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.1;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.hoverBg};\n color: ${simpleButtonStyles.hoverFg};\n border-color: ${simpleButtonStyles.hoverFg};\n text-decoration: none;\n `}\n }\n\n &:active {\n ${icon &&\n css`\n &::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.2;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.activeBg};\n color: ${simpleButtonStyles.activeFg};\n border-color: ${simpleButtonStyles.activeFg};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n solidButtonStyles}\n ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n ${variant === 'simple' && simple}\n ${variant === 'primary' &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig(omitProps('loading'))<\n Pick<ButtonPropsWithDefaults, 'variant' | 'href'> &\n // Needed for omitProps\n Pick<ButtonProps, 'loading'>\n>(({ theme, variant, href }) => {\n const {\n base: {\n palette: { 'foreground-color': textVariantColor }\n },\n components: {\n button: { color: primaryColor, 'secondary-fill-style': fillStyle },\n link: { color: linkColor }\n }\n } = theme;\n\n let linkVariantColor = linkColor;\n if (!href && fillStyle === 'solid') {\n linkVariantColor = primaryColor;\n }\n const { background: activeLinkColor } = getActiveColors(linkVariantColor);\n const { background: activeTextColor } = getActiveColors(textVariantColor);\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const link = css`\n color: ${linkVariantColor};\n\n &:active {\n color: ${activeLinkColor};\n }\n `;\n\n const text = css`\n color: ${textVariantColor};\n\n &:active {\n color: ${activeTextColor};\n }\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: ForwardRefForwardPropsComponent<ButtonProps> = forwardRef(function Button(\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n 'aria-disabled': ariaDisabled,\n loading = false,\n children,\n className,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: ButtonProps['ref']\n) {\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement | HTMLAnchorElement>();\n const mouseDownEvent = useRef<ReactMouseEvent>();\n const mouseDownPosition = useRef<DOMRect>();\n const mouseDownTimestamp = useRef<number>();\n const buttonRef = useConsolidatedRef(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n const handleClickWithElementShift = (e: MouseEvent) => {\n if (\n buttonRef.current &&\n mouseDownPosition.current &&\n mouseDownTimestamp.current &&\n isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n Date.now() - mouseDownTimestamp.current < 500\n ) {\n // Only click if the button is still the topmost element at its own position.\n // If something has rendered over the button between mousedown and mouseup,\n // elementFromPoint will return that — not the button — and we should not trigger a click.\n const { x, y, width, height } = buttonRef.current.getBoundingClientRect();\n const elementAtPoint = document.elementFromPoint(x + width / 2, y + height / 2);\n if (buttonRef.current.contains(elementAtPoint) || elementAtPoint === buttonRef.current) {\n buttonRef.current.click();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mouseup', handleClickWithElementShift);\n\n return () => {\n document.removeEventListener('mouseup', handleClickWithElementShift);\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n className={createClassName('button', className, { variant, icon, compact, loading })}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n aria-disabled={ariaDisabled}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n mouseDownTimestamp.current = Date.now();\n }}\n onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default Button;\n"]}
package/lib/components/Text/Text.d.ts.map CHANGED
@@ -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"}
package/lib/components/Text/Text.js CHANGED
@@ -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
  });
package/lib/components/Text/Text.js.map CHANGED
@@ -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"]}
package/lib/theme/theme.d.ts CHANGED
@@ -1816,6 +1816,14 @@ export declare const BaseThemeMachine: ThemeMachine<{
1816
1816
  $type: string;
1817
1817
  $value: string;
1818
1818
  };
1819
+ "text-transform": {
1820
+ $type: string;
1821
+ $value: string;
1822
+ };
1823
+ "letter-spacing": {
1824
+ $type: string;
1825
+ $value: string;
1826
+ };
1819
1827
  };
1820
1828
  secondary: {
1821
1829
  "font-size": {
@@ -1830,6 +1838,14 @@ export declare const BaseThemeMachine: ThemeMachine<{
1830
1838
  $type: string;
1831
1839
  $value: string;
1832
1840
  };
1841
+ "text-transform": {
1842
+ $type: string;
1843
+ $value: string;
1844
+ };
1845
+ "letter-spacing": {
1846
+ $type: string;
1847
+ $value: string;
1848
+ };
1833
1849
  };
1834
1850
  h1: {
1835
1851
  "font-size": {
@@ -1844,6 +1860,14 @@ export declare const BaseThemeMachine: ThemeMachine<{
1844
1860
  $type: string;
1845
1861
  $value: string;
1846
1862
  };
1863
+ "text-transform": {
1864
+ $type: string;
1865
+ $value: string;
1866
+ };
1867
+ "letter-spacing": {
1868
+ $type: string;
1869
+ $value: string;
1870
+ };
1847
1871
  };
1848
1872
  h2: {
1849
1873
  "font-size": {
@@ -1858,6 +1882,14 @@ export declare const BaseThemeMachine: ThemeMachine<{
1858
1882
  $type: string;
1859
1883
  $value: string;
1860
1884
  };
1885
+ "text-transform": {
1886
+ $type: string;
1887
+ $value: string;
1888
+ };
1889
+ "letter-spacing": {
1890
+ $type: string;
1891
+ $value: string;
1892
+ };
1861
1893
  };
1862
1894
  h3: {
1863
1895
  "font-size": {
@@ -1872,6 +1904,14 @@ export declare const BaseThemeMachine: ThemeMachine<{
1872
1904
  $type: string;
1873
1905
  $value: string;
1874
1906
  };
1907
+ "text-transform": {
1908
+ $type: string;
1909
+ $value: string;
1910
+ };
1911
+ "letter-spacing": {
1912
+ $type: string;
1913
+ $value: string;
1914
+ };
1875
1915
  };
1876
1916
  h4: {
1877
1917
  "font-size": {
@@ -1886,6 +1926,14 @@ export declare const BaseThemeMachine: ThemeMachine<{
1886
1926
  $type: string;
1887
1927
  $value: string;
1888
1928
  };
1929
+ "text-transform": {
1930
+ $type: string;
1931
+ $value: string;
1932
+ };
1933
+ "letter-spacing": {
1934
+ $type: string;
1935
+ $value: string;
1936
+ };
1889
1937
  };
1890
1938
  h5: {
1891
1939
  "font-size": {
@@ -1900,6 +1948,14 @@ export declare const BaseThemeMachine: ThemeMachine<{
1900
1948
  $type: string;
1901
1949
  $value: string;
1902
1950
  };
1951
+ "text-transform": {
1952
+ $type: string;
1953
+ $value: string;
1954
+ };
1955
+ "letter-spacing": {
1956
+ $type: string;
1957
+ $value: string;
1958
+ };
1903
1959
  };
1904
1960
  h6: {
1905
1961
  "font-size": {
@@ -1914,6 +1970,14 @@ export declare const BaseThemeMachine: ThemeMachine<{
1914
1970
  $type: string;
1915
1971
  $value: string;
1916
1972
  };
1973
+ "text-transform": {
1974
+ $type: string;
1975
+ $value: string;
1976
+ };
1977
+ "letter-spacing": {
1978
+ $type: string;
1979
+ $value: string;
1980
+ };
1917
1981
  };
1918
1982
  "brand-primary": {
1919
1983
  "font-family": {
@@ -1928,6 +1992,14 @@ export declare const BaseThemeMachine: ThemeMachine<{
1928
1992
  $type: string;
1929
1993
  $value: string;
1930
1994
  };
1995
+ "text-transform": {
1996
+ $type: string;
1997
+ $value: string;
1998
+ };
1999
+ "letter-spacing": {
2000
+ $type: string;
2001
+ $value: string;
2002
+ };
1931
2003
  };
1932
2004
  };
1933
2005
  "text-area": {
@@ -2624,46 +2696,64 @@ export declare const WorkTheme: {
2624
2696
  readonly "font-size": string;
2625
2697
  readonly "font-weight": string;
2626
2698
  readonly "font-family": string;
2699
+ readonly "text-transform": string;
2700
+ readonly "letter-spacing": string;
2627
2701
  };
2628
2702
  readonly secondary: {
2629
2703
  readonly "font-size": string;
2630
2704
  readonly "font-weight": string;
2631
2705
  readonly "font-family": string;
2706
+ readonly "text-transform": string;
2707
+ readonly "letter-spacing": string;
2632
2708
  };
2633
2709
  readonly h1: {
2634
2710
  readonly "font-size": string;
2635
2711
  readonly "font-weight": string;
2636
2712
  readonly "font-family": string;
2713
+ readonly "text-transform": string;
2714
+ readonly "letter-spacing": string;
2637
2715
  };
2638
2716
  readonly h2: {
2639
2717
  readonly "font-size": string;
2640
2718
  readonly "font-weight": string;
2641
2719
  readonly "font-family": string;
2720
+ readonly "text-transform": string;
2721
+ readonly "letter-spacing": string;
2642
2722
  };
2643
2723
  readonly h3: {
2644
2724
  readonly "font-size": string;
2645
2725
  readonly "font-weight": string;
2646
2726
  readonly "font-family": string;
2727
+ readonly "text-transform": string;
2728
+ readonly "letter-spacing": string;
2647
2729
  };
2648
2730
  readonly h4: {
2649
2731
  readonly "font-size": string;
2650
2732
  readonly "font-weight": string;
2651
2733
  readonly "font-family": string;
2734
+ readonly "text-transform": string;
2735
+ readonly "letter-spacing": string;
2652
2736
  };
2653
2737
  readonly h5: {
2654
2738
  readonly "font-size": string;
2655
2739
  readonly "font-weight": string;
2656
2740
  readonly "font-family": string;
2741
+ readonly "text-transform": string;
2742
+ readonly "letter-spacing": string;
2657
2743
  };
2658
2744
  readonly h6: {
2659
2745
  readonly "font-size": string;
2660
2746
  readonly "font-weight": string;
2661
2747
  readonly "font-family": string;
2748
+ readonly "text-transform": string;
2749
+ readonly "letter-spacing": string;
2662
2750
  };
2663
2751
  readonly "brand-primary": {
2664
2752
  readonly "font-family": string;
2665
2753
  readonly "font-size": string;
2666
2754
  readonly "font-weight": string;
2755
+ readonly "text-transform": string;
2756
+ readonly "letter-spacing": string;
2667
2757
  };
2668
2758
  };
2669
2759
  readonly "text-area": {
@@ -3350,46 +3440,64 @@ export declare const defaultThemeProp: Readonly<{
3350
3440
  readonly "font-size": string;
3351
3441
  readonly "font-weight": string;
3352
3442
  readonly "font-family": string;
3443
+ readonly "text-transform": string;
3444
+ readonly "letter-spacing": string;
3353
3445
  };
3354
3446
  readonly secondary: {
3355
3447
  readonly "font-size": string;
3356
3448
  readonly "font-weight": string;
3357
3449
  readonly "font-family": string;
3450
+ readonly "text-transform": string;
3451
+ readonly "letter-spacing": string;
3358
3452
  };
3359
3453
  readonly h1: {
3360
3454
  readonly "font-size": string;
3361
3455
  readonly "font-weight": string;
3362
3456
  readonly "font-family": string;
3457
+ readonly "text-transform": string;
3458
+ readonly "letter-spacing": string;
3363
3459
  };
3364
3460
  readonly h2: {
3365
3461
  readonly "font-size": string;
3366
3462
  readonly "font-weight": string;
3367
3463
  readonly "font-family": string;
3464
+ readonly "text-transform": string;
3465
+ readonly "letter-spacing": string;
3368
3466
  };
3369
3467
  readonly h3: {
3370
3468
  readonly "font-size": string;
3371
3469
  readonly "font-weight": string;
3372
3470
  readonly "font-family": string;
3471
+ readonly "text-transform": string;
3472
+ readonly "letter-spacing": string;
3373
3473
  };
3374
3474
  readonly h4: {
3375
3475
  readonly "font-size": string;
3376
3476
  readonly "font-weight": string;
3377
3477
  readonly "font-family": string;
3478
+ readonly "text-transform": string;
3479
+ readonly "letter-spacing": string;
3378
3480
  };
3379
3481
  readonly h5: {
3380
3482
  readonly "font-size": string;
3381
3483
  readonly "font-weight": string;
3382
3484
  readonly "font-family": string;
3485
+ readonly "text-transform": string;
3486
+ readonly "letter-spacing": string;
3383
3487
  };
3384
3488
  readonly h6: {
3385
3489
  readonly "font-size": string;
3386
3490
  readonly "font-weight": string;
3387
3491
  readonly "font-family": string;
3492
+ readonly "text-transform": string;
3493
+ readonly "letter-spacing": string;
3388
3494
  };
3389
3495
  readonly "brand-primary": {
3390
3496
  readonly "font-family": string;
3391
3497
  readonly "font-size": string;
3392
3498
  readonly "font-weight": string;
3499
+ readonly "text-transform": string;
3500
+ readonly "letter-spacing": string;
3393
3501
  };
3394
3502
  };
3395
3503
  readonly "text-area": {
package/lib/theme/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA,OAAO,YAAgC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC;AAEnE,OAAO,EAAE,sBAAsB,IAAI,eAAe,EAAE,CAAC;AAErD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA2D,CAAC;AAEzF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAyB,CAAC;AAYhD,eAAO,MAAM,UAAU,EAAE,oBAAgD,CAAC;AAE1E,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAsC,CAAC;AAEpE,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAGhF,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAiB,YAAa,SAAQ,YAAY,CAAC,OAAO,sBAAsB,CAAC;KAAG;CACrF"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA,OAAO,YAAgC,MAAM,gBAAgB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,sBAAsB,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC;AAEnE,OAAO,EAAE,sBAAsB,IAAI,eAAe,EAAE,CAAC;AAErD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA2D,CAAC;AAEzF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAyB,CAAC;AAYhD,eAAO,MAAM,UAAU,EAAE,oBAAgD,CAAC;AAE1E,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAsC,CAAC;AAEpE,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAGhF,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAiB,YAAa,SAAQ,YAAY,CAAC,OAAO,sBAAsB,CAAC;KAAG;CACrF"}
package/lib/theme/themeDefinition.json CHANGED
@@ -1801,6 +1801,14 @@
1801
1801
  "font-family": {
1802
1802
  "$type": "inherited",
1803
1803
  "$value": "base.font-family"
1804
+ },
1805
+ "text-transform": {
1806
+ "$type": "literal",
1807
+ "$value": "none"
1808
+ },
1809
+ "letter-spacing": {
1810
+ "$type": "inherited",
1811
+ "$value": "base.letter-spacing"
1804
1812
  }
1805
1813
  },
1806
1814
  "secondary": {
@@ -1815,6 +1823,14 @@
1815
1823
  "font-family": {
1816
1824
  "$type": "inherited",
1817
1825
  "$value": "base.font-family"
1826
+ },
1827
+ "text-transform": {
1828
+ "$type": "literal",
1829
+ "$value": "none"
1830
+ },
1831
+ "letter-spacing": {
1832
+ "$type": "inherited",
1833
+ "$value": "base.letter-spacing"
1818
1834
  }
1819
1835
  },
1820
1836
  "h1": {
@@ -1829,6 +1845,14 @@
1829
1845
  "font-family": {
1830
1846
  "$type": "inherited",
1831
1847
  "$value": "base.font-family"
1848
+ },
1849
+ "text-transform": {
1850
+ "$type": "literal",
1851
+ "$value": "none"
1852
+ },
1853
+ "letter-spacing": {
1854
+ "$type": "inherited",
1855
+ "$value": "base.letter-spacing"
1832
1856
  }
1833
1857
  },
1834
1858
  "h2": {
@@ -1843,6 +1867,14 @@
1843
1867
  "font-family": {
1844
1868
  "$type": "inherited",
1845
1869
  "$value": "base.font-family"
1870
+ },
1871
+ "text-transform": {
1872
+ "$type": "literal",
1873
+ "$value": "none"
1874
+ },
1875
+ "letter-spacing": {
1876
+ "$type": "inherited",
1877
+ "$value": "base.letter-spacing"
1846
1878
  }
1847
1879
  },
1848
1880
  "h3": {
@@ -1857,6 +1889,14 @@
1857
1889
  "font-family": {
1858
1890
  "$type": "inherited",
1859
1891
  "$value": "base.font-family"
1892
+ },
1893
+ "text-transform": {
1894
+ "$type": "literal",
1895
+ "$value": "none"
1896
+ },
1897
+ "letter-spacing": {
1898
+ "$type": "inherited",
1899
+ "$value": "base.letter-spacing"
1860
1900
  }
1861
1901
  },
1862
1902
  "h4": {
@@ -1871,6 +1911,14 @@
1871
1911
  "font-family": {
1872
1912
  "$type": "inherited",
1873
1913
  "$value": "base.font-family"
1914
+ },
1915
+ "text-transform": {
1916
+ "$type": "literal",
1917
+ "$value": "none"
1918
+ },
1919
+ "letter-spacing": {
1920
+ "$type": "inherited",
1921
+ "$value": "base.letter-spacing"
1874
1922
  }
1875
1923
  },
1876
1924
  "h5": {
@@ -1885,6 +1933,14 @@
1885
1933
  "font-family": {
1886
1934
  "$type": "inherited",
1887
1935
  "$value": "base.font-family"
1936
+ },
1937
+ "text-transform": {
1938
+ "$type": "literal",
1939
+ "$value": "none"
1940
+ },
1941
+ "letter-spacing": {
1942
+ "$type": "inherited",
1943
+ "$value": "base.letter-spacing"
1888
1944
  }
1889
1945
  },
1890
1946
  "h6": {
@@ -1899,6 +1955,14 @@
1899
1955
  "font-family": {
1900
1956
  "$type": "inherited",
1901
1957
  "$value": "base.font-family"
1958
+ },
1959
+ "text-transform": {
1960
+ "$type": "literal",
1961
+ "$value": "none"
1962
+ },
1963
+ "letter-spacing": {
1964
+ "$type": "inherited",
1965
+ "$value": "base.letter-spacing"
1902
1966
  }
1903
1967
  },
1904
1968
  "brand-primary": {
@@ -1913,6 +1977,14 @@
1913
1977
  "font-weight": {
1914
1978
  "$type": "inherited",
1915
1979
  "$value": "base.font-weight.semi-bold"
1980
+ },
1981
+ "text-transform": {
1982
+ "$type": "literal",
1983
+ "$value": "none"
1984
+ },
1985
+ "letter-spacing": {
1986
+ "$type": "inherited",
1987
+ "$value": "base.letter-spacing"
1916
1988
  }
1917
1989
  }
1918
1990
  },
package/lib/theme/themeOverrides.schema.json CHANGED
@@ -1655,6 +1655,12 @@
1655
1655
  },
1656
1656
  "font-family": {
1657
1657
  "type": "string"
1658
+ },
1659
+ "text-transform": {
1660
+ "type": "string"
1661
+ },
1662
+ "letter-spacing": {
1663
+ "type": "string"
1658
1664
  }
1659
1665
  },
1660
1666
  "additionalProperties": false
@@ -1670,6 +1676,12 @@
1670
1676
  },
1671
1677
  "font-family": {
1672
1678
  "type": "string"
1679
+ },
1680
+ "text-transform": {
1681
+ "type": "string"
1682
+ },
1683
+ "letter-spacing": {
1684
+ "type": "string"
1673
1685
  }
1674
1686
  },
1675
1687
  "additionalProperties": false
@@ -1685,6 +1697,12 @@
1685
1697
  },
1686
1698
  "font-family": {
1687
1699
  "type": "string"
1700
+ },
1701
+ "text-transform": {
1702
+ "type": "string"
1703
+ },
1704
+ "letter-spacing": {
1705
+ "type": "string"
1688
1706
  }
1689
1707
  },
1690
1708
  "additionalProperties": false
@@ -1700,6 +1718,12 @@
1700
1718
  },
1701
1719
  "font-family": {
1702
1720
  "type": "string"
1721
+ },
1722
+ "text-transform": {
1723
+ "type": "string"
1724
+ },
1725
+ "letter-spacing": {
1726
+ "type": "string"
1703
1727
  }
1704
1728
  },
1705
1729
  "additionalProperties": false
@@ -1715,6 +1739,12 @@
1715
1739
  },
1716
1740
  "font-family": {
1717
1741
  "type": "string"
1742
+ },
1743
+ "text-transform": {
1744
+ "type": "string"
1745
+ },
1746
+ "letter-spacing": {
1747
+ "type": "string"
1718
1748
  }
1719
1749
  },
1720
1750
  "additionalProperties": false
@@ -1730,6 +1760,12 @@
1730
1760
  },
1731
1761
  "font-family": {
1732
1762
  "type": "string"
1763
+ },
1764
+ "text-transform": {
1765
+ "type": "string"
1766
+ },
1767
+ "letter-spacing": {
1768
+ "type": "string"
1733
1769
  }
1734
1770
  },
1735
1771
  "additionalProperties": false
@@ -1745,6 +1781,12 @@
1745
1781
  },
1746
1782
  "font-family": {
1747
1783
  "type": "string"
1784
+ },
1785
+ "text-transform": {
1786
+ "type": "string"
1787
+ },
1788
+ "letter-spacing": {
1789
+ "type": "string"
1748
1790
  }
1749
1791
  },
1750
1792
  "additionalProperties": false
@@ -1760,6 +1802,12 @@
1760
1802
  },
1761
1803
  "font-family": {
1762
1804
  "type": "string"
1805
+ },
1806
+ "text-transform": {
1807
+ "type": "string"
1808
+ },
1809
+ "letter-spacing": {
1810
+ "type": "string"
1763
1811
  }
1764
1812
  },
1765
1813
  "additionalProperties": false
@@ -1775,6 +1823,12 @@
1775
1823
  },
1776
1824
  "font-weight": {
1777
1825
  "type": ["integer", "string"]
1826
+ },
1827
+ "text-transform": {
1828
+ "type": "string"
1829
+ },
1830
+ "letter-spacing": {
1831
+ "type": "string"
1778
1832
  }
1779
1833
  },
1780
1834
  "additionalProperties": false
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-core",
3
- "version": "10.0.0-build.2.6",
3
+ "version": "10.0.0-build.2.7",
4
4
  "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "author": "Pegasystems",