@razorpay/blade 11.17.1 → 11.18.1
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.
- package/build/lib/native/components/ActionList/ActionListItem.js +2 -1
- package/build/lib/native/components/ActionList/ActionListItem.js.map +1 -1
- package/build/lib/native/components/Avatar/Avatar.native.js +7 -0
- package/build/lib/native/components/Avatar/Avatar.native.js.map +1 -0
- package/build/lib/native/components/Avatar/AvatarGroup.native.js +7 -0
- package/build/lib/native/components/Avatar/AvatarGroup.native.js.map +1 -0
- package/build/lib/native/components/Button/BaseButton/BaseButton.js +1 -1
- package/build/lib/native/components/Button/BaseButton/BaseButton.js.map +1 -1
- package/build/lib/native/components/Dropdown/Dropdown.js +1 -1
- package/build/lib/native/components/Dropdown/Dropdown.js.map +1 -1
- package/build/lib/native/components/Dropdown/DropdownHeaderFooter.js +1 -1
- package/build/lib/native/components/Dropdown/DropdownHeaderFooter.js.map +1 -1
- package/build/lib/native/components/Dropdown/dropdownComponentIds.js +1 -1
- package/build/lib/native/components/Dropdown/dropdownComponentIds.js.map +1 -1
- package/build/lib/native/components/Dropdown/dropdownUtils.js +1 -1
- package/build/lib/native/components/Dropdown/dropdownUtils.js.map +1 -1
- package/build/lib/native/components/Dropdown/useDropdown.js.map +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInputVisuals.js +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInputVisuals.js.map +1 -1
- package/build/lib/native/components/Input/SearchInput/SearchInput.js +34 -0
- package/build/lib/native/components/Input/SearchInput/SearchInput.js.map +1 -0
- package/build/lib/native/components/ProgressBar/ProgressBar.js +1 -1
- package/build/lib/native/components/ProgressBar/ProgressBar.js.map +1 -1
- package/build/lib/native/components/index.js +3 -0
- package/build/lib/native/components/index.js.map +1 -1
- package/build/lib/native/tokens/global/size.js +1 -1
- package/build/lib/native/tokens/global/size.js.map +1 -1
- package/build/lib/native/tokens/theme/bladeTheme.js +1 -1
- package/build/lib/native/tokens/theme/bladeTheme.js.map +1 -1
- package/build/lib/native/utils/metaAttribute/metaConstants.js +1 -1
- package/build/lib/native/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/lib/web/development/components/ActionList/ActionListItem.js +3 -1
- package/build/lib/web/development/components/ActionList/ActionListItem.js.map +1 -1
- package/build/lib/web/development/components/Avatar/Avatar.web.js +125 -0
- package/build/lib/web/development/components/Avatar/Avatar.web.js.map +1 -0
- package/build/lib/web/development/components/Avatar/AvatarButton.js +86 -0
- package/build/lib/web/development/components/Avatar/AvatarButton.js.map +1 -0
- package/build/lib/web/development/components/Avatar/AvatarGroup.web.js +114 -0
- package/build/lib/web/development/components/Avatar/AvatarGroup.web.js.map +1 -0
- package/build/lib/web/development/components/Avatar/AvatarGroupContext.js +11 -0
- package/build/lib/web/development/components/Avatar/AvatarGroupContext.js.map +1 -0
- package/build/lib/web/development/components/Avatar/StyledAvatar.js +30 -0
- package/build/lib/web/development/components/Avatar/StyledAvatar.js.map +1 -0
- package/build/lib/web/development/components/Avatar/StyledAvatarButton.js +48 -0
- package/build/lib/web/development/components/Avatar/StyledAvatarButton.js.map +1 -0
- package/build/lib/web/development/components/Avatar/StyledAvatarGroup.js +24 -0
- package/build/lib/web/development/components/Avatar/StyledAvatarGroup.js.map +1 -0
- package/build/lib/web/development/components/Avatar/avatarTokens.js +49 -0
- package/build/lib/web/development/components/Avatar/avatarTokens.js.map +1 -0
- package/build/lib/web/development/components/Avatar/index.js +3 -0
- package/build/lib/web/development/components/Avatar/index.js.map +1 -0
- package/build/lib/web/development/components/Button/BaseButton/BaseButton.js +1 -1
- package/build/lib/web/development/components/Button/BaseButton/BaseButton.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/Dropdown.js +4 -1
- package/build/lib/web/development/components/Dropdown/Dropdown.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/DropdownHeaderFooter.js +2 -16
- package/build/lib/web/development/components/Dropdown/DropdownHeaderFooter.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/DropdownOverlay.web.js +1 -1
- package/build/lib/web/development/components/Dropdown/DropdownOverlay.web.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/dropdownComponentIds.js +2 -1
- package/build/lib/web/development/components/Dropdown/dropdownComponentIds.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/dropdownUtils.js +1 -1
- package/build/lib/web/development/components/Dropdown/dropdownUtils.js.map +1 -1
- package/build/lib/web/development/components/Dropdown/useDropdown.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/BaseInputVisuals.js +1 -1
- package/build/lib/web/development/components/Input/BaseInput/BaseInputVisuals.js.map +1 -1
- package/build/lib/web/development/components/Input/SearchInput/SearchInput.js +180 -0
- package/build/lib/web/development/components/Input/SearchInput/SearchInput.js.map +1 -0
- package/build/lib/web/development/components/Input/SearchInput/index.js +2 -0
- package/build/lib/web/development/components/Input/SearchInput/index.js.map +1 -0
- package/build/lib/web/development/components/ProgressBar/CircularProgressBar.web.js +5 -3
- package/build/lib/web/development/components/ProgressBar/CircularProgressBar.web.js.map +1 -1
- package/build/lib/web/development/components/ProgressBar/ProgressBar.js +1 -1
- package/build/lib/web/development/components/ProgressBar/ProgressBar.js.map +1 -1
- package/build/lib/web/development/components/index.js +5 -0
- package/build/lib/web/development/components/index.js.map +1 -1
- package/build/lib/web/development/tokens/global/size.js +2 -0
- package/build/lib/web/development/tokens/global/size.js.map +1 -1
- package/build/lib/web/development/tokens/theme/bladeTheme.js +6 -6
- package/build/lib/web/development/tokens/theme/bladeTheme.js.map +1 -1
- package/build/lib/web/development/utils/metaAttribute/metaConstants.js +3 -0
- package/build/lib/web/development/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/lib/web/production/components/ActionList/ActionListItem.js +3 -1
- package/build/lib/web/production/components/ActionList/ActionListItem.js.map +1 -1
- package/build/lib/web/production/components/Avatar/Avatar.web.js +125 -0
- package/build/lib/web/production/components/Avatar/Avatar.web.js.map +1 -0
- package/build/lib/web/production/components/Avatar/AvatarButton.js +86 -0
- package/build/lib/web/production/components/Avatar/AvatarButton.js.map +1 -0
- package/build/lib/web/production/components/Avatar/AvatarGroup.web.js +114 -0
- package/build/lib/web/production/components/Avatar/AvatarGroup.web.js.map +1 -0
- package/build/lib/web/production/components/Avatar/AvatarGroupContext.js +11 -0
- package/build/lib/web/production/components/Avatar/AvatarGroupContext.js.map +1 -0
- package/build/lib/web/production/components/Avatar/StyledAvatar.js +30 -0
- package/build/lib/web/production/components/Avatar/StyledAvatar.js.map +1 -0
- package/build/lib/web/production/components/Avatar/StyledAvatarButton.js +48 -0
- package/build/lib/web/production/components/Avatar/StyledAvatarButton.js.map +1 -0
- package/build/lib/web/production/components/Avatar/StyledAvatarGroup.js +24 -0
- package/build/lib/web/production/components/Avatar/StyledAvatarGroup.js.map +1 -0
- package/build/lib/web/production/components/Avatar/avatarTokens.js +49 -0
- package/build/lib/web/production/components/Avatar/avatarTokens.js.map +1 -0
- package/build/lib/web/production/components/Avatar/index.js +3 -0
- package/build/lib/web/production/components/Avatar/index.js.map +1 -0
- package/build/lib/web/production/components/Button/BaseButton/BaseButton.js +1 -1
- package/build/lib/web/production/components/Button/BaseButton/BaseButton.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/Dropdown.js +4 -1
- package/build/lib/web/production/components/Dropdown/Dropdown.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/DropdownHeaderFooter.js +2 -16
- package/build/lib/web/production/components/Dropdown/DropdownHeaderFooter.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/DropdownOverlay.web.js +1 -1
- package/build/lib/web/production/components/Dropdown/DropdownOverlay.web.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/dropdownComponentIds.js +2 -1
- package/build/lib/web/production/components/Dropdown/dropdownComponentIds.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/dropdownUtils.js +1 -1
- package/build/lib/web/production/components/Dropdown/dropdownUtils.js.map +1 -1
- package/build/lib/web/production/components/Dropdown/useDropdown.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/BaseInputVisuals.js +1 -1
- package/build/lib/web/production/components/Input/BaseInput/BaseInputVisuals.js.map +1 -1
- package/build/lib/web/production/components/Input/SearchInput/SearchInput.js +180 -0
- package/build/lib/web/production/components/Input/SearchInput/SearchInput.js.map +1 -0
- package/build/lib/web/production/components/Input/SearchInput/index.js +2 -0
- package/build/lib/web/production/components/Input/SearchInput/index.js.map +1 -0
- package/build/lib/web/production/components/ProgressBar/CircularProgressBar.web.js +5 -3
- package/build/lib/web/production/components/ProgressBar/CircularProgressBar.web.js.map +1 -1
- package/build/lib/web/production/components/ProgressBar/ProgressBar.js +1 -1
- package/build/lib/web/production/components/ProgressBar/ProgressBar.js.map +1 -1
- package/build/lib/web/production/components/index.js +5 -0
- package/build/lib/web/production/components/index.js.map +1 -1
- package/build/lib/web/production/tokens/global/size.js +2 -0
- package/build/lib/web/production/tokens/global/size.js.map +1 -1
- package/build/lib/web/production/tokens/theme/bladeTheme.js +6 -6
- package/build/lib/web/production/tokens/theme/bladeTheme.js.map +1 -1
- package/build/lib/web/production/utils/metaAttribute/metaConstants.js +3 -0
- package/build/lib/web/production/utils/metaAttribute/metaConstants.js.map +1 -1
- package/build/types/components/index.d.ts +328 -147
- package/build/types/components/index.native.d.ts +282 -147
- package/build/types/tokens/index.d.ts +2 -0
- package/build/types/tokens/index.native.d.ts +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sources":["../../../../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { CloseIcon, SearchIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef, BladeElementRefWithValue } from '~utils/types';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\n\ntype SearchInputCommonProps = Pick<\n BaseInputProps,\n | 'label'\n | 'accessibilityLabel'\n | 'labelPosition'\n | 'helpText'\n | 'placeholder'\n | 'defaultValue'\n | 'name'\n | 'onChange'\n | 'onFocus'\n | 'onBlur'\n | 'value'\n | 'isDisabled'\n | 'autoFocus'\n | 'onSubmit'\n | 'autoCapitalize'\n | 'testID'\n | 'onClick'\n | 'size'\n> & {\n /**\n * Event handler to handle the onClick event for clear button.\n */\n onClearButtonClick?: () => void;\n\n /**\n * Decides whether to show a loading spinner for the input field.\n */\n isLoading?: boolean;\n /**\n * Toggle the visibility of the search icon.\n *\n * @default true\n */\n showSearchIcon?: boolean;\n} & StyledPropsBlade;\n\n/*\n Mandatory accessibilityLabel prop when label is not provided\n*/\ntype SearchInputPropsWithA11yLabel = {\n /**\n * Label to be shown for the input field\n */\n label?: undefined;\n /**\n * Accessibility label for the input\n */\n accessibilityLabel: string;\n};\n\n/*\n Optional accessibilityLabel prop when label is provided\n*/\ntype SearchInputPropsWithLabel = {\n /**\n * Label to be shown for the input field\n */\n label: string;\n /**\n * Accessibility label for the input\n */\n accessibilityLabel?: string;\n};\n\ntype SearchInputProps = (SearchInputPropsWithA11yLabel | SearchInputPropsWithLabel) &\n SearchInputCommonProps;\n\n// need to do this to tell TS to infer type as SearchInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef?: any): _textInputRef is TextInputReactNative => {\n return getPlatformType() === 'react-native';\n};\n\nconst _SearchInput: React.ForwardRefRenderFunction<BladeElementRef, SearchInputProps> = (\n {\n label,\n accessibilityLabel,\n labelPosition = 'top',\n placeholder,\n defaultValue,\n name,\n value,\n onChange,\n onClick,\n onFocus,\n onBlur,\n onSubmit,\n isDisabled,\n helpText,\n onClearButtonClick,\n isLoading,\n autoCapitalize,\n autoFocus,\n testID,\n size = 'medium',\n showSearchIcon = true,\n ...styledProps\n },\n ref,\n): ReactElement => {\n const textInputRef = React.useRef<BladeElementRefWithValue>(null);\n const mergedRef = useMergeRefs(ref, textInputRef);\n const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n const {\n triggererWrapperRef,\n onTriggerKeydown,\n onTriggerClick,\n dropdownTriggerer,\n } = useDropdown();\n const isInsideDropdown = dropdownTriggerer === 'SearchInput';\n\n React.useEffect(() => {\n setShouldShowClearButton(Boolean(defaultValue ?? value));\n }, [defaultValue, value]);\n\n const renderInteractionElement = (): ReactNode => {\n if (isLoading) {\n return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n }\n\n if (shouldShowClearButton) {\n return (\n <IconButton\n size=\"medium\"\n icon={CloseIcon}\n onClick={() => {\n if (isEmpty(value) && textInputRef.current) {\n // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n if (isReactNative(textInputRef.current)) {\n textInputRef.current.clear();\n textInputRef.current.focus();\n } else if (textInputRef.current instanceof HTMLInputElement) {\n textInputRef.current.value = '';\n textInputRef.current.focus();\n }\n }\n\n // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n onClearButtonClick?.();\n textInputRef?.current?.focus();\n setShouldShowClearButton(false);\n }}\n isDisabled={isDisabled}\n accessibilityLabel=\"Clear Input Content\"\n />\n );\n }\n\n return null;\n };\n\n return (\n <BaseBox position=\"relative\">\n <BaseInput\n id=\"searchinput\"\n componentName={MetaConstants.SearchInput}\n ref={mergedRef}\n isDropdownTrigger={true}\n setInputWrapperRef={\n isInsideDropdown\n ? (wrapperNode) => {\n triggererWrapperRef.current = wrapperNode;\n }\n : undefined\n }\n label={label as string}\n accessibilityLabel={accessibilityLabel}\n hideLabelText={!Boolean(label)}\n labelPosition={labelPosition}\n placeholder={placeholder}\n defaultValue={defaultValue}\n value={value}\n name={name}\n onKeyDown={isInsideDropdown ? onTriggerKeydown : undefined}\n onChange={({ name, value }) => {\n if (value?.length) {\n // show the clear button when the user starts typing in\n setShouldShowClearButton(true);\n }\n\n if (shouldShowClearButton && !value?.length) {\n // hide the clear button when the input field is empty\n setShouldShowClearButton(false);\n }\n\n onChange?.({ name, value });\n }}\n onClick={(e) => {\n if (isDisabled) return;\n if (isInsideDropdown) {\n onTriggerClick();\n }\n onClick?.(e);\n }}\n onFocus={onFocus}\n onBlur={onBlur}\n onSubmit={onSubmit}\n isDisabled={isDisabled}\n leadingIcon={showSearchIcon ? SearchIcon : undefined}\n trailingInteractionElement={renderInteractionElement()}\n helpText={helpText}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n testID={testID}\n {...getKeyboardAndAutocompleteProps({\n type: 'search',\n autoCapitalize,\n })}\n size={size}\n {...styledProps}\n />\n </BaseBox>\n );\n};\n\nconst SearchInput = assignWithoutSideEffects(React.forwardRef(_SearchInput), {\n displayName: 'SearchInput',\n componentId: dropdownComponentIds.triggers.SearchInput,\n});\n\nexport type { SearchInputProps };\nexport { SearchInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_SearchInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","defaultValue","name","value","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","helpText","onClearButtonClick","isLoading","autoCapitalize","autoFocus","testID","_ref$size","size","_ref$showSearchIcon","showSearchIcon","styledProps","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","_useDropdown","useDropdown","triggererWrapperRef","onTriggerKeydown","onTriggerClick","dropdownTriggerer","isInsideDropdown","useEffect","Boolean","renderInteractionElement","_jsx","Spinner","color","IconButton","icon","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","BaseBox","position","children","BaseInput","_objectSpread","id","componentName","MetaConstants","SearchInput","isDropdownTrigger","setInputWrapperRef","wrapperNode","undefined","hideLabelText","onKeyDown","_ref2","length","e","leadingIcon","SearchIcon","trailingInteractionElement","getKeyboardAndAutocompleteProps","type","assignWithoutSideEffects","forwardRef","displayName","componentId","dropdownComponentIds","triggers"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -20,7 +20,7 @@ import Circle from '../Icons/_Svg/Circle/Circle.web.js';
|
|
|
20
20
|
|
|
21
21
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
22
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
|
-
var pulseKeyframes = /*#__PURE__*/keyframes(["0%{opacity:
|
|
23
|
+
var pulseKeyframes = /*#__PURE__*/keyframes(["0%{opacity:1;}50%{opacity:0.65;}100%{opacity:1;}"]);
|
|
24
24
|
var getPulseAnimationStyles = function getPulseAnimationStyles(_ref) {
|
|
25
25
|
var duration = _ref.duration,
|
|
26
26
|
easing = _ref.easing,
|
|
@@ -38,13 +38,15 @@ var StyledSVGText = /*#__PURE__*/styled.text.withConfig({
|
|
|
38
38
|
var theme = _ref2.theme,
|
|
39
39
|
size = _ref2.size,
|
|
40
40
|
weight = _ref2.weight;
|
|
41
|
-
return getBaseTextStyles(_objectSpread({
|
|
41
|
+
return _objectSpread(_objectSpread({}, getBaseTextStyles(_objectSpread({
|
|
42
42
|
theme: theme
|
|
43
43
|
}, getTextProps({
|
|
44
44
|
variant: 'body',
|
|
45
45
|
size: size,
|
|
46
46
|
weight: weight
|
|
47
|
-
})))
|
|
47
|
+
})))), {}, {
|
|
48
|
+
fill: theme.colors.surface.text.gray.normal
|
|
49
|
+
});
|
|
48
50
|
});
|
|
49
51
|
var DeterminatePulseAnimation = /*#__PURE__*/styled.circle.withConfig({
|
|
50
52
|
displayName: "CircularProgressBarweb__DeterminatePulseAnimation",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularProgressBar.web.js","sources":["../../../../../../src/components/ProgressBar/CircularProgressBar.web.tsx"],"sourcesContent":["import type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport React from 'react';\nimport type { CircularProgressBarFilledProps } from './types';\nimport {\n pulseAnimation,\n circularProgressSizeTokens,\n getCircularProgressSVGTokens,\n} from './progressBarTokens';\nimport { CircularProgressLabel } from './CircularProgressLabel';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport type { TextProps } from '~components/Typography';\nimport { getTextProps } from '~components/Typography';\nimport { Svg, Circle } from '~components/Icons/_Svg';\nimport getBaseTextStyles from '~components/Typography/BaseText/getBaseTextStyles';\n\nconst pulseKeyframes = keyframes`\n 0% {\n opacity: 100;\n }\n 50% {\n opacity: 0.65;\n }\n 100% {\n opacity: 100;\n }\n`;\n\nconst getPulseAnimationStyles = ({\n duration,\n easing,\n progressPercent,\n isMeter,\n}: {\n duration: string;\n easing: string;\n progressPercent: number;\n isMeter: boolean;\n}): FlattenSimpleInterpolation => {\n if (isMeter || progressPercent === 100) {\n return css`\n height: 100%;\n width: 100%;\n transition: stroke-dashoffset ${duration} ${easing};\n `;\n }\n\n return css`\n height: 100%;\n width: 100%;\n opacity: ${pulseAnimation.opacityInitial};\n background-color: ${pulseAnimation.backgroundColor};\n transition: stroke-dashoffset ${duration} ${easing};\n animation: ${pulseKeyframes} ${duration} ${easing} infinite;\n `;\n};\n\nconst StyledSVGText = styled.text<Pick<TextProps<{ variant: 'body' }>, 'size' | 'weight'>>(\n ({ theme, size, weight }) => {\n return getBaseTextStyles({\n theme,\n ...getTextProps({ variant: 'body', size, weight }),\n });\n },\n);\n\nconst DeterminatePulseAnimation = styled.circle<\n Pick<\n CircularProgressBarFilledProps,\n 'pulseMotionDuration' | 'pulseMotionDelay' | 'motionEasing' | 'progressPercent' | 'isMeter'\n >\n>(({ theme, pulseMotionDuration, motionEasing, progressPercent, isMeter }) => {\n const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n const easing = castWebType(getIn(theme.motion, motionEasing));\n\n return getPulseAnimationStyles({\n duration,\n easing,\n progressPercent,\n isMeter,\n });\n});\n\nconst CircularProgressBarFilled = ({\n progressPercent,\n fillColor,\n backgroundColor,\n size = 'small',\n label,\n showPercentage = true,\n isMeter,\n}: CircularProgressBarFilledProps): React.ReactElement => {\n const {\n sqSize,\n strokeWidth,\n radius,\n viewBox,\n dashArray,\n dashOffset,\n } = getCircularProgressSVGTokens({ size, progressPercent });\n\n return (\n <BaseBox\n width=\"fit-content\"\n textAlign=\"center\"\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n >\n <Svg width={String(sqSize)} height={String(sqSize)} viewBox={viewBox}>\n <Circle\n fill=\"none\"\n stroke={backgroundColor}\n cx={String(sqSize / 2)}\n cy={String(sqSize / 2)}\n r={String(radius)}\n strokeWidth={`${strokeWidth}px`}\n />\n\n <DeterminatePulseAnimation\n progressPercent={progressPercent}\n isMeter={isMeter}\n fill=\"none\"\n stroke={fillColor}\n cx={sqSize / 2}\n cy={sqSize / 2}\n r={radius}\n strokeWidth={`${strokeWidth}px`}\n // Start progress marker at 12 O'Clock\n transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}\n strokeDasharray={dashArray}\n strokeDashoffset={dashOffset}\n pulseMotionDuration=\"duration.2xgentle\"\n pulseMotionDelay=\"delay.long\"\n motionEasing=\"easing.standard.revealing\"\n />\n {showPercentage && size !== 'small' && (\n <StyledSVGText\n size={circularProgressSizeTokens[size].percentTextSize}\n weight=\"semibold\"\n x=\"50%\"\n y=\"50%\"\n textAnchor=\"middle\"\n dy=\".4em\"\n >\n {progressPercent}%\n </StyledSVGText>\n )}\n </Svg>\n\n <CircularProgressLabel\n progressPercent={progressPercent}\n size={size}\n label={label}\n showPercentage={showPercentage}\n />\n </BaseBox>\n );\n};\n\nexport { CircularProgressBarFilled };\n"],"names":["pulseKeyframes","keyframes","getPulseAnimationStyles","_ref","duration","easing","progressPercent","isMeter","css","pulseAnimation","opacityInitial","backgroundColor","StyledSVGText","styled","text","withConfig","displayName","componentId","_ref2","theme","size","weight","getBaseTextStyles","_objectSpread","getTextProps","variant","DeterminatePulseAnimation","circle","_ref3","pulseMotionDuration","motionEasing","castWebType","makeMotionTime","getIn","motion","CircularProgressBarFilled","_ref4","fillColor","_ref4$size","label","_ref4$showPercentage","showPercentage","_getCircularProgressS","getCircularProgressSVGTokens","sqSize","strokeWidth","radius","viewBox","dashArray","dashOffset","_jsxs","BaseBox","width","textAlign","display","flexDirection","alignItems","children","Svg","String","height","_jsx","Circle","fill","stroke","cx","cy","r","concat","transform","strokeDasharray","strokeDashoffset","pulseMotionDelay","circularProgressSizeTokens","percentTextSize","x","y","textAnchor","dy","CircularProgressLabel"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CircularProgressBar.web.js","sources":["../../../../../../src/components/ProgressBar/CircularProgressBar.web.tsx"],"sourcesContent":["import type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport React from 'react';\nimport type { CircularProgressBarFilledProps } from './types';\nimport {\n pulseAnimation,\n circularProgressSizeTokens,\n getCircularProgressSVGTokens,\n} from './progressBarTokens';\nimport { CircularProgressLabel } from './CircularProgressLabel';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport type { TextProps } from '~components/Typography';\nimport { getTextProps } from '~components/Typography';\nimport { Svg, Circle } from '~components/Icons/_Svg';\nimport getBaseTextStyles from '~components/Typography/BaseText/getBaseTextStyles';\n\nconst pulseKeyframes = keyframes`\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.65;\n }\n 100% {\n opacity: 1;\n }\n`;\n\nconst getPulseAnimationStyles = ({\n duration,\n easing,\n progressPercent,\n isMeter,\n}: {\n duration: string;\n easing: string;\n progressPercent: number;\n isMeter: boolean;\n}): FlattenSimpleInterpolation => {\n if (isMeter || progressPercent === 100) {\n return css`\n height: 100%;\n width: 100%;\n transition: stroke-dashoffset ${duration} ${easing};\n `;\n }\n\n return css`\n height: 100%;\n width: 100%;\n opacity: ${pulseAnimation.opacityInitial};\n background-color: ${pulseAnimation.backgroundColor};\n transition: stroke-dashoffset ${duration} ${easing};\n animation: ${pulseKeyframes} ${duration} ${easing} infinite;\n `;\n};\n\nconst StyledSVGText = styled.text<Pick<TextProps<{ variant: 'body' }>, 'size' | 'weight'>>(\n ({ theme, size, weight }) => {\n return {\n ...getBaseTextStyles({\n theme,\n ...getTextProps({ variant: 'body', size, weight }),\n }),\n fill: theme.colors.surface.text.gray.normal,\n };\n },\n);\n\nconst DeterminatePulseAnimation = styled.circle<\n Pick<\n CircularProgressBarFilledProps,\n 'pulseMotionDuration' | 'pulseMotionDelay' | 'motionEasing' | 'progressPercent' | 'isMeter'\n >\n>(({ theme, pulseMotionDuration, motionEasing, progressPercent, isMeter }) => {\n const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n const easing = castWebType(getIn(theme.motion, motionEasing));\n\n return getPulseAnimationStyles({\n duration,\n easing,\n progressPercent,\n isMeter,\n });\n});\n\nconst CircularProgressBarFilled = ({\n progressPercent,\n fillColor,\n backgroundColor,\n size = 'small',\n label,\n showPercentage = true,\n isMeter,\n}: CircularProgressBarFilledProps): React.ReactElement => {\n const {\n sqSize,\n strokeWidth,\n radius,\n viewBox,\n dashArray,\n dashOffset,\n } = getCircularProgressSVGTokens({ size, progressPercent });\n\n return (\n <BaseBox\n width=\"fit-content\"\n textAlign=\"center\"\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n >\n <Svg width={String(sqSize)} height={String(sqSize)} viewBox={viewBox}>\n <Circle\n fill=\"none\"\n stroke={backgroundColor}\n cx={String(sqSize / 2)}\n cy={String(sqSize / 2)}\n r={String(radius)}\n strokeWidth={`${strokeWidth}px`}\n />\n\n <DeterminatePulseAnimation\n progressPercent={progressPercent}\n isMeter={isMeter}\n fill=\"none\"\n stroke={fillColor}\n cx={sqSize / 2}\n cy={sqSize / 2}\n r={radius}\n strokeWidth={`${strokeWidth}px`}\n // Start progress marker at 12 O'Clock\n transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}\n strokeDasharray={dashArray}\n strokeDashoffset={dashOffset}\n pulseMotionDuration=\"duration.2xgentle\"\n pulseMotionDelay=\"delay.long\"\n motionEasing=\"easing.standard.revealing\"\n />\n {showPercentage && size !== 'small' && (\n <StyledSVGText\n size={circularProgressSizeTokens[size].percentTextSize}\n weight=\"semibold\"\n x=\"50%\"\n y=\"50%\"\n textAnchor=\"middle\"\n dy=\".4em\"\n >\n {progressPercent}%\n </StyledSVGText>\n )}\n </Svg>\n\n <CircularProgressLabel\n progressPercent={progressPercent}\n size={size}\n label={label}\n showPercentage={showPercentage}\n />\n </BaseBox>\n );\n};\n\nexport { CircularProgressBarFilled };\n"],"names":["pulseKeyframes","keyframes","getPulseAnimationStyles","_ref","duration","easing","progressPercent","isMeter","css","pulseAnimation","opacityInitial","backgroundColor","StyledSVGText","styled","text","withConfig","displayName","componentId","_ref2","theme","size","weight","_objectSpread","getBaseTextStyles","getTextProps","variant","fill","colors","surface","gray","normal","DeterminatePulseAnimation","circle","_ref3","pulseMotionDuration","motionEasing","castWebType","makeMotionTime","getIn","motion","CircularProgressBarFilled","_ref4","fillColor","_ref4$size","label","_ref4$showPercentage","showPercentage","_getCircularProgressS","getCircularProgressSVGTokens","sqSize","strokeWidth","radius","viewBox","dashArray","dashOffset","_jsxs","BaseBox","width","textAlign","display","flexDirection","alignItems","children","Svg","String","height","_jsx","Circle","stroke","cx","cy","r","concat","transform","strokeDasharray","strokeDashoffset","pulseMotionDelay","circularProgressSizeTokens","percentTextSize","x","y","textAnchor","dy","CircularProgressLabel"],"mappings":"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"}
|
|
@@ -156,7 +156,7 @@ var ProgressBar = function ProgressBar(_ref) {
|
|
|
156
156
|
label: label,
|
|
157
157
|
progressPercent: percentageProgressValue,
|
|
158
158
|
isMeter: isMeter,
|
|
159
|
-
showPercentage:
|
|
159
|
+
showPercentage: showPercentage,
|
|
160
160
|
backgroundColor: unfilledBackgroundColor,
|
|
161
161
|
fillColor: filledBackgroundColor,
|
|
162
162
|
pulseMotionDuration: "duration.2xgentle",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { ProgressBarFilled } from './ProgressBarFilled';\nimport { CircularProgressBarFilled } from './CircularProgressBar';\nimport clamp from '~utils/lodashButBetter/clamp';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography/Text';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useId } from '~utils/useId';\nimport { useTheme } from '~components/BladeProvider';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { size } from '~tokens/global';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport type { AccessibilityProps } from '~utils/makeAccessible';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\ntype ProgressBarCommonProps = {\n /**\n * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.\n */\n accessibilityLabel?: string;\n /**\n * Sets the color of the progress bar which changes the feedback color.\n */\n color?: FeedbackColors;\n /**\n * Sets the type of the progress bar.\n * @default 'progress'\n */\n type?: 'meter' | 'progress';\n /**\n * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.\n */\n label?: string;\n /**\n * Sets the size of the progress bar.\n * Note: 'large' size isn't available when the variant is 'linear'.\n * @default 'small'\n */\n size?: 'small' | 'medium' | 'large';\n /**\n * Sets the progress value of the progress bar.\n * @default 'small'\n */\n value?: number;\n /**\n * Sets the minimum value for the progress bar.\n * @default 0\n */\n min?: number;\n /**\n * Sets the maximum value for the progress bar.\n * @default 100\n */\n max?: number;\n} & TestID &\n StyledPropsBlade;\n\ntype ProgressBarVariant = 'progress' | 'meter' | 'linear' | 'circular';\n\ntype ProgressBarProgressProps = ProgressBarCommonProps & {\n /**\n * Sets the variant to be rendered for the progress bar.\n * @default 'progress'\n */\n variant?: Extract<ProgressBarVariant, 'progress' | 'linear' | 'circular'>;\n /**\n * Sets whether the progress bar is in an indeterminate state.\n * @default false\n */\n isIndeterminate?: boolean;\n /**\n * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n * @default true\n */\n showPercentage?: boolean;\n};\n\ntype ProgressBarMeterProps = ProgressBarCommonProps & {\n /**\n * Sets the variant to be rendered for thr progress bar.\n * @default 'progress'\n */\n variant?: Extract<ProgressBarVariant, 'meter' | 'linear' | 'circular'>;\n /**\n * Sets whether the progress bar is in an indeterminate state.\n * @default false\n */\n isIndeterminate?: undefined;\n /**\n * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n * @default false\n */\n showPercentage?: undefined;\n};\n\ntype ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;\n\nconst progressBarHeight: Record<NonNullable<ProgressBarProps['size']>, 2 | 4 | 0> = {\n small: size[2],\n medium: size[4],\n // Large size isn't available when variant is 'linear'\n large: size[0],\n};\n\nconst ProgressBar = ({\n accessibilityLabel,\n color,\n type,\n isIndeterminate = false,\n label,\n showPercentage = true,\n size = 'small',\n value = 0,\n variant = 'progress',\n min = 0,\n max = 100,\n testID,\n ...styledProps\n}: ProgressBarProps): ReactElement => {\n const { theme } = useTheme();\n const progressType = !type && (variant === 'meter' || variant === 'progress') ? variant : type;\n const progressVariant = variant === 'meter' || variant === 'progress' ? 'linear' : variant;\n const id = useId(`${progressType}-${progressVariant}`);\n\n if (__DEV__) {\n if (progressType === 'meter' && isIndeterminate) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'.`,\n });\n }\n\n if (progressVariant === 'circular' && isIndeterminate) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Cannot set 'isIndeterminate' when 'variant' is 'circular'.`,\n });\n }\n\n if (progressVariant === 'linear' && size === 'large') {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Large size isn't available when 'variant' is 'linear'.`,\n });\n }\n\n if (type && (variant === 'progress' || variant === 'meter')) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `variant can only be 'linear' or 'circular' when 'type=${type}'.`,\n });\n }\n }\n\n const unfilledBackgroundColor = theme.colors.feedback.background.neutral\n .subtle as BaseBoxProps['backgroundColor'];\n const filledBackgroundColor = color\n ? theme.colors.feedback.background[color].intense\n : theme.colors.surface.background.primary.intense;\n const hasLabel = label && label.trim()?.length > 0;\n const isMeter = progressType === 'meter';\n const isCircular = progressVariant === 'circular';\n const progressValue = clamp(value, min, max);\n const percentageProgressValue = Math.floor(((progressValue - min) * 100) / (max - min));\n const shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;\n const accessibilityProps: Pick<\n AccessibilityProps,\n 'role' | 'label' | 'valueMax' | 'valueNow' | 'valueMin' | 'valueText'\n > = {\n role: 'progressbar',\n label: accessibilityLabel ?? label,\n valueNow: percentageProgressValue,\n valueText: `${percentageProgressValue}%`,\n valueMin: min,\n valueMax: max,\n };\n\n if (isMeter) {\n accessibilityProps.role = 'meter';\n accessibilityProps.valueNow = progressValue;\n accessibilityProps.valueText = `${progressValue}`;\n }\n\n if (isIndeterminate) {\n accessibilityProps.valueNow = undefined;\n accessibilityProps.valueMin = undefined;\n accessibilityProps.valueMax = undefined;\n accessibilityProps.valueText = undefined;\n }\n\n return (\n <BaseBox\n {...getStyledProps(styledProps)}\n {...metaAttribute({ name: MetaConstants.ProgressBar, testID })}\n >\n <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n {!isCircular ? (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n justifyContent={hasLabel ? 'space-between' : 'flex-end'}\n >\n {hasLabel ? (\n <Text as=\"label\" variant=\"body\" size=\"small\" color=\"surface.text.gray.subtle\">\n {label}\n </Text>\n ) : null}\n {shouldShowPercentage ? (\n <BaseBox marginBottom=\"spacing.2\">\n <Text\n variant=\"body\"\n size=\"small\"\n color=\"surface.text.gray.subtle\"\n >{`${percentageProgressValue}%`}</Text>\n </BaseBox>\n ) : null}\n </BaseBox>\n ) : null}\n\n <BaseBox\n id={id}\n {...makeAccessible({\n role: accessibilityProps.role,\n label: accessibilityProps.label,\n valueNow: accessibilityProps.valueNow,\n valueText: accessibilityProps.valueText,\n valueMin: accessibilityProps.valueMin,\n valueMax: accessibilityProps.valueMax,\n })}\n >\n {isCircular ? (\n <CircularProgressBarFilled\n size={size}\n label={label}\n progressPercent={percentageProgressValue}\n isMeter={isMeter}\n showPercentage={shouldShowPercentage}\n backgroundColor={unfilledBackgroundColor as string}\n fillColor={filledBackgroundColor}\n pulseMotionDuration=\"duration.2xgentle\"\n fillMotionDuration=\"duration.2xgentle\"\n pulseMotionDelay=\"delay.long\"\n motionEasing=\"easing.standard.revealing\"\n />\n ) : (\n <BaseBox\n backgroundColor={unfilledBackgroundColor}\n height={makeSize(progressBarHeight[size])}\n overflow=\"hidden\"\n position=\"relative\"\n >\n <ProgressBarFilled\n backgroundColor={filledBackgroundColor}\n progress={percentageProgressValue}\n fillMotionDuration=\"duration.2xgentle\"\n pulseMotionDuration=\"duration.2xgentle\"\n indeterminateMotionDuration=\"duration.2xgentle\"\n pulseMotionDelay=\"delay.long\"\n motionEasing=\"easing.standard.revealing\"\n type={progressType}\n isIndeterminate={isIndeterminate}\n />\n </BaseBox>\n )}\n </BaseBox>\n </BaseBox>\n </BaseBox>\n );\n};\n\nexport type { ProgressBarProps, ProgressBarVariant };\nexport { ProgressBar };\n"],"names":["progressBarHeight","small","size","medium","large","ProgressBar","_ref","_label$trim","accessibilityLabel","color","type","_ref$isIndeterminate","isIndeterminate","label","_ref$showPercentage","showPercentage","_ref$size","_ref$value","value","_ref$variant","variant","_ref$min","min","_ref$max","max","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","progressType","progressVariant","id","useId","concat","throwBladeError","moduleName","message","unfilledBackgroundColor","colors","feedback","background","neutral","subtle","filledBackgroundColor","intense","surface","primary","hasLabel","trim","length","isMeter","isCircular","progressValue","clamp","percentageProgressValue","Math","floor","shouldShowPercentage","accessibilityProps","role","valueNow","valueText","valueMin","valueMax","undefined","_jsx","BaseBox","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","children","_jsxs","display","flexDirection","width","justifyContent","Text","as","marginBottom","makeAccessible","CircularProgressBarFilled","progressPercent","backgroundColor","fillColor","pulseMotionDuration","fillMotionDuration","pulseMotionDelay","motionEasing","height","makeSize","overflow","position","ProgressBarFilled","progress","indeterminateMotionDuration"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { ProgressBarFilled } from './ProgressBarFilled';\nimport { CircularProgressBarFilled } from './CircularProgressBar';\nimport clamp from '~utils/lodashButBetter/clamp';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography/Text';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useId } from '~utils/useId';\nimport { useTheme } from '~components/BladeProvider';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { size } from '~tokens/global';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport type { AccessibilityProps } from '~utils/makeAccessible';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\ntype ProgressBarCommonProps = {\n /**\n * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.\n */\n accessibilityLabel?: string;\n /**\n * Sets the color of the progress bar which changes the feedback color.\n */\n color?: FeedbackColors;\n /**\n * Sets the type of the progress bar.\n * @default 'progress'\n */\n type?: 'meter' | 'progress';\n /**\n * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.\n */\n label?: string;\n /**\n * Sets the size of the progress bar.\n * Note: 'large' size isn't available when the variant is 'linear'.\n * @default 'small'\n */\n size?: 'small' | 'medium' | 'large';\n /**\n * Sets the progress value of the progress bar.\n * @default 'small'\n */\n value?: number;\n /**\n * Sets the minimum value for the progress bar.\n * @default 0\n */\n min?: number;\n /**\n * Sets the maximum value for the progress bar.\n * @default 100\n */\n max?: number;\n} & TestID &\n StyledPropsBlade;\n\ntype ProgressBarVariant = 'progress' | 'meter' | 'linear' | 'circular';\n\ntype ProgressBarProgressProps = ProgressBarCommonProps & {\n /**\n * Sets the variant to be rendered for the progress bar.\n * @default 'progress'\n */\n variant?: Extract<ProgressBarVariant, 'progress' | 'linear' | 'circular'>;\n /**\n * Sets whether the progress bar is in an indeterminate state.\n * @default false\n */\n isIndeterminate?: boolean;\n /**\n * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n * @default true\n */\n showPercentage?: boolean;\n};\n\ntype ProgressBarMeterProps = ProgressBarCommonProps & {\n /**\n * Sets the variant to be rendered for thr progress bar.\n * @default 'progress'\n */\n variant?: Extract<ProgressBarVariant, 'meter' | 'linear' | 'circular'>;\n /**\n * Sets whether the progress bar is in an indeterminate state.\n * @default false\n */\n isIndeterminate?: undefined;\n /**\n * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n * @default false\n */\n showPercentage?: undefined;\n};\n\ntype ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;\n\nconst progressBarHeight: Record<NonNullable<ProgressBarProps['size']>, 2 | 4 | 0> = {\n small: size[2],\n medium: size[4],\n // Large size isn't available when variant is 'linear'\n large: size[0],\n};\n\nconst ProgressBar = ({\n accessibilityLabel,\n color,\n type,\n isIndeterminate = false,\n label,\n showPercentage = true,\n size = 'small',\n value = 0,\n variant = 'progress',\n min = 0,\n max = 100,\n testID,\n ...styledProps\n}: ProgressBarProps): ReactElement => {\n const { theme } = useTheme();\n const progressType = !type && (variant === 'meter' || variant === 'progress') ? variant : type;\n const progressVariant = variant === 'meter' || variant === 'progress' ? 'linear' : variant;\n const id = useId(`${progressType}-${progressVariant}`);\n\n if (__DEV__) {\n if (progressType === 'meter' && isIndeterminate) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'.`,\n });\n }\n\n if (progressVariant === 'circular' && isIndeterminate) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Cannot set 'isIndeterminate' when 'variant' is 'circular'.`,\n });\n }\n\n if (progressVariant === 'linear' && size === 'large') {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `Large size isn't available when 'variant' is 'linear'.`,\n });\n }\n\n if (type && (variant === 'progress' || variant === 'meter')) {\n throwBladeError({\n moduleName: 'ProgressBar',\n message: `variant can only be 'linear' or 'circular' when 'type=${type}'.`,\n });\n }\n }\n\n const unfilledBackgroundColor = theme.colors.feedback.background.neutral\n .subtle as BaseBoxProps['backgroundColor'];\n const filledBackgroundColor = color\n ? theme.colors.feedback.background[color].intense\n : theme.colors.surface.background.primary.intense;\n const hasLabel = label && label.trim()?.length > 0;\n const isMeter = progressType === 'meter';\n const isCircular = progressVariant === 'circular';\n const progressValue = clamp(value, min, max);\n const percentageProgressValue = Math.floor(((progressValue - min) * 100) / (max - min));\n const shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;\n const accessibilityProps: Pick<\n AccessibilityProps,\n 'role' | 'label' | 'valueMax' | 'valueNow' | 'valueMin' | 'valueText'\n > = {\n role: 'progressbar',\n label: accessibilityLabel ?? label,\n valueNow: percentageProgressValue,\n valueText: `${percentageProgressValue}%`,\n valueMin: min,\n valueMax: max,\n };\n\n if (isMeter) {\n accessibilityProps.role = 'meter';\n accessibilityProps.valueNow = progressValue;\n accessibilityProps.valueText = `${progressValue}`;\n }\n\n if (isIndeterminate) {\n accessibilityProps.valueNow = undefined;\n accessibilityProps.valueMin = undefined;\n accessibilityProps.valueMax = undefined;\n accessibilityProps.valueText = undefined;\n }\n\n return (\n <BaseBox\n {...getStyledProps(styledProps)}\n {...metaAttribute({ name: MetaConstants.ProgressBar, testID })}\n >\n <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n {!isCircular ? (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n justifyContent={hasLabel ? 'space-between' : 'flex-end'}\n >\n {hasLabel ? (\n <Text as=\"label\" variant=\"body\" size=\"small\" color=\"surface.text.gray.subtle\">\n {label}\n </Text>\n ) : null}\n {shouldShowPercentage ? (\n <BaseBox marginBottom=\"spacing.2\">\n <Text\n variant=\"body\"\n size=\"small\"\n color=\"surface.text.gray.subtle\"\n >{`${percentageProgressValue}%`}</Text>\n </BaseBox>\n ) : null}\n </BaseBox>\n ) : null}\n\n <BaseBox\n id={id}\n {...makeAccessible({\n role: accessibilityProps.role,\n label: accessibilityProps.label,\n valueNow: accessibilityProps.valueNow,\n valueText: accessibilityProps.valueText,\n valueMin: accessibilityProps.valueMin,\n valueMax: accessibilityProps.valueMax,\n })}\n >\n {isCircular ? (\n <CircularProgressBarFilled\n size={size}\n label={label}\n progressPercent={percentageProgressValue}\n isMeter={isMeter}\n showPercentage={showPercentage}\n backgroundColor={unfilledBackgroundColor as string}\n fillColor={filledBackgroundColor}\n pulseMotionDuration=\"duration.2xgentle\"\n fillMotionDuration=\"duration.2xgentle\"\n pulseMotionDelay=\"delay.long\"\n motionEasing=\"easing.standard.revealing\"\n />\n ) : (\n <BaseBox\n backgroundColor={unfilledBackgroundColor}\n height={makeSize(progressBarHeight[size])}\n overflow=\"hidden\"\n position=\"relative\"\n >\n <ProgressBarFilled\n backgroundColor={filledBackgroundColor}\n progress={percentageProgressValue}\n fillMotionDuration=\"duration.2xgentle\"\n pulseMotionDuration=\"duration.2xgentle\"\n indeterminateMotionDuration=\"duration.2xgentle\"\n pulseMotionDelay=\"delay.long\"\n motionEasing=\"easing.standard.revealing\"\n type={progressType}\n isIndeterminate={isIndeterminate}\n />\n </BaseBox>\n )}\n </BaseBox>\n </BaseBox>\n </BaseBox>\n );\n};\n\nexport type { ProgressBarProps, ProgressBarVariant };\nexport { ProgressBar };\n"],"names":["progressBarHeight","small","size","medium","large","ProgressBar","_ref","_label$trim","accessibilityLabel","color","type","_ref$isIndeterminate","isIndeterminate","label","_ref$showPercentage","showPercentage","_ref$size","_ref$value","value","_ref$variant","variant","_ref$min","min","_ref$max","max","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","progressType","progressVariant","id","useId","concat","throwBladeError","moduleName","message","unfilledBackgroundColor","colors","feedback","background","neutral","subtle","filledBackgroundColor","intense","surface","primary","hasLabel","trim","length","isMeter","isCircular","progressValue","clamp","percentageProgressValue","Math","floor","shouldShowPercentage","accessibilityProps","role","valueNow","valueText","valueMin","valueMax","undefined","_jsx","BaseBox","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","children","_jsxs","display","flexDirection","width","justifyContent","Text","as","marginBottom","makeAccessible","CircularProgressBarFilled","progressPercent","backgroundColor","fillColor","pulseMotionDuration","fillMotionDuration","pulseMotionDelay","motionEasing","height","makeSize","overflow","position","ProgressBarFilled","progress","indeterminateMotionDuration"],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import './Accordion/index.js';
|
|
|
2
2
|
import './ActionList/index.js';
|
|
3
3
|
import './Alert/index.js';
|
|
4
4
|
import './Amount/index.js';
|
|
5
|
+
import './Avatar/index.js';
|
|
5
6
|
import './Badge/index.js';
|
|
6
7
|
import './BladeProvider/index.js';
|
|
7
8
|
import './BottomSheet/index.js';
|
|
@@ -27,6 +28,7 @@ import './Input/OTPInput/index.js';
|
|
|
27
28
|
import './Input/PasswordInput/index.js';
|
|
28
29
|
import './Input/TextArea/index.js';
|
|
29
30
|
import './Input/TextInput/index.js';
|
|
31
|
+
import './Input/SearchInput/index.js';
|
|
30
32
|
import './Input/PhoneNumberInput/index.js';
|
|
31
33
|
import './Link/index.js';
|
|
32
34
|
import './List/index.js';
|
|
@@ -58,6 +60,8 @@ export { ActionListItem, ActionListItemBadge, ActionListItemBadgeGroup, ActionLi
|
|
|
58
60
|
export { ActionListItemAsset } from './ActionList/ActionListItemAsset.web.js';
|
|
59
61
|
export { Alert } from './Alert/Alert.js';
|
|
60
62
|
export { Amount } from './Amount/Amount.js';
|
|
63
|
+
export { Avatar } from './Avatar/Avatar.web.js';
|
|
64
|
+
export { AvatarGroup } from './Avatar/AvatarGroup.web.js';
|
|
61
65
|
export { Badge } from './Badge/Badge.js';
|
|
62
66
|
export { BladeProvider } from './BladeProvider/BladeProvider.web.js';
|
|
63
67
|
export { default as useTheme } from './BladeProvider/useTheme.js';
|
|
@@ -444,6 +448,7 @@ export { OTPInput } from './Input/OTPInput/OTPInput.js';
|
|
|
444
448
|
export { PasswordInput } from './Input/PasswordInput/PasswordInput.js';
|
|
445
449
|
export { TextArea } from './Input/TextArea/TextArea.js';
|
|
446
450
|
export { TextInput } from './Input/TextInput/TextInput.js';
|
|
451
|
+
export { SearchInput } from './Input/SearchInput/SearchInput.js';
|
|
447
452
|
export { PhoneNumberInput } from './Input/PhoneNumberInput/PhoneNumberInput.web.js';
|
|
448
453
|
export { default as Link } from './Link/Link/Link.js';
|
|
449
454
|
export { List } from './List/List.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n /** 0 px */\n 0: 0,\n /** 1 px */\n 1: 1,\n /** 2 px */\n 2: 2,\n /** 3 px */\n 3: 3,\n /** 4 px */\n 4: 4,\n /** 5 px */\n 5: 5,\n /** 6 px */\n 6: 6,\n /** 7 px */\n 7: 7,\n /** 8 px */\n 8: 8,\n /** 10 px */\n 10: 10,\n /** 12 px */\n 12: 12,\n /** 16 px */\n 16: 16,\n /** 18 px */\n 18: 18,\n /** 20 px */\n 20: 20,\n /** 24 px */\n 24: 24,\n /** 28 px */\n 28: 28,\n /** 32 px */\n 32: 32,\n /** 33 px */\n 33: 33,\n /** 36 px */\n 36: 36,\n /** 40 px */\n 40: 40,\n /** 44 px */\n 44: 44,\n /** 48 px */\n 48: 48,\n /** 56 px */\n 56: 56,\n /** 60 px */\n 60: 60,\n /** 64 px */\n 64: 64,\n /** 72 px */\n 72: 72,\n /** 100 px */\n 100: 100,\n /** 120 px */\n 120: 120,\n /** 140 px */\n 140: 140,\n /** 160 px */\n 160: 160,\n /** 176 px */\n 176: 176,\n /** 200 px */\n 200: 200,\n /** 240 px */\n 240: 240,\n /** 300 px */\n 300: 300,\n /** 314 px */\n 314: 314,\n /** 360 px */\n 360: 360,\n /** 400 px */\n 400: 400,\n /** 584 px */\n 584: 584,\n /** 640 px */\n 640: 640,\n /** 760 px */\n 760: 760,\n /** 800 px */\n 800: 800,\n /** 1024 px */\n 1024: 1024,\n /** 1136 px */\n 1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}
|
|
1
|
+
{"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n /** 0 px */\n 0: 0,\n /** 1 px */\n 1: 1,\n /** 2 px */\n 2: 2,\n /** 3 px */\n 3: 3,\n /** 4 px */\n 4: 4,\n /** 5 px */\n 5: 5,\n /** 6 px */\n 6: 6,\n /** 7 px */\n 7: 7,\n /** 8 px */\n 8: 8,\n /** 10 px */\n 10: 10,\n /** 12 px */\n 12: 12,\n /** 16 px */\n 16: 16,\n /** 18 px */\n 18: 18,\n /** 20 px */\n 20: 20,\n /** 24 px */\n 24: 24,\n /** 28 px */\n 28: 28,\n /** 32 px */\n 30: 30,\n /** 32 px */\n 32: 32,\n /** 33 px */\n 33: 33,\n /** 36 px */\n 36: 36,\n /** 40 px */\n 40: 40,\n /** 44 px */\n 44: 44,\n /** 48 px */\n 48: 48,\n /** 56 px */\n 56: 56,\n /** 60 px */\n 60: 60,\n /** 64 px */\n 64: 64,\n /** 72 px */\n 72: 72,\n /** 100 px */\n 100: 100,\n /** 120 px */\n 120: 120,\n /** 140 px */\n 140: 140,\n /** 160 px */\n 160: 160,\n /** 176 px */\n 176: 176,\n /** 200 px */\n 200: 200,\n /** 240 px */\n 240: 240,\n /** 300 px */\n 300: 300,\n /** 314 px */\n 314: 314,\n /** 360 px */\n 360: 360,\n /** 400 px */\n 400: 400,\n /** 584 px */\n 584: 584,\n /** 640 px */\n 640: 640,\n /** 760 px */\n 760: 760,\n /** 800 px */\n 800: 800,\n /** 1024 px */\n 1024: 1024,\n /** 1136 px */\n 1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}
|
|
@@ -32,7 +32,7 @@ var colors = {
|
|
|
32
32
|
},
|
|
33
33
|
border: {
|
|
34
34
|
gray: {
|
|
35
|
-
normal: colors$1.neutral.blueGrayLight[
|
|
35
|
+
normal: colors$1.neutral.blueGrayLight[400],
|
|
36
36
|
subtle: colors$1.neutral.blueGrayLight[300],
|
|
37
37
|
muted: colors$1.neutral.blueGrayLight.a100
|
|
38
38
|
},
|
|
@@ -292,8 +292,8 @@ var colors = {
|
|
|
292
292
|
faded: colors$1.neutral.blueGrayLight.a100
|
|
293
293
|
},
|
|
294
294
|
gray: {
|
|
295
|
-
"default": colors$1.neutral.blueGrayLight[
|
|
296
|
-
highlighted: colors$1.neutral.blueGrayLight[
|
|
295
|
+
"default": colors$1.neutral.blueGrayLight[300],
|
|
296
|
+
highlighted: colors$1.neutral.blueGrayLight[300],
|
|
297
297
|
disabled: colors$1.neutral.blueGrayLight[200],
|
|
298
298
|
faded: colors$1.neutral.blueGrayLight.a100
|
|
299
299
|
},
|
|
@@ -574,7 +574,7 @@ var colors = {
|
|
|
574
574
|
},
|
|
575
575
|
neutral: {
|
|
576
576
|
subtle: colors$1.neutral.blueGrayDark.a100,
|
|
577
|
-
intense: colors$1.neutral.blueGrayDark[
|
|
577
|
+
intense: colors$1.neutral.blueGrayDark[900]
|
|
578
578
|
}
|
|
579
579
|
},
|
|
580
580
|
border: {
|
|
@@ -743,8 +743,8 @@ var colors = {
|
|
|
743
743
|
},
|
|
744
744
|
gray: {
|
|
745
745
|
"default": colors$1.neutral.blueGrayDark[600],
|
|
746
|
-
highlighted: colors$1.neutral.blueGrayDark[
|
|
747
|
-
disabled: colors$1.neutral.blueGrayDark[
|
|
746
|
+
highlighted: colors$1.neutral.blueGrayDark[600],
|
|
747
|
+
disabled: colors$1.neutral.blueGrayDark[800],
|
|
748
748
|
faded: colors$1.neutral.blueGrayDark.a100
|
|
749
749
|
},
|
|
750
750
|
primary: {
|