npm - @razorpay/blade - Versions diffs - 10.23.4 → 11.0.0 - Mend

@razorpay/blade 10.23.4 → 11.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (874) hide show

package/build/lib/web/development/components/Box/BaseBox/baseBoxStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"baseBoxStyles.js","sources":["../../../../../../../src/components/Box/BaseBox/baseBoxStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type {\n BaseBoxProps,\n MakeValueResponsive,\n SpacingValueType,\n ArrayOfMaxLength4,\n} from './types';\nimport { getResponsiveValue } from './getResponsiveValue';\nimport getIn from '~utils/lodashButBetter/get';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { Breakpoints } from '~tokens/global';\nimport { breakpoints } from '~tokens/global';\nimport { isReactNative, getMediaQuery } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeBorderSize } from '~utils/makeBorderSize';\n\nconst getSpacingValue = (\n spacingValue:\n \| MakeValueResponsive<SpacingValueType \| ArrayOfMaxLength4<SpacingValueType>>\n \| undefined,\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string \| undefined => {\n if (isEmpty(spacingValue)) {\n return undefined;\n }\n\n const responsiveSpacingValue: SpacingValueType \| SpacingValueType[] = getResponsiveValue(\n spacingValue as MakeValueResponsive<string \| string[]>,\n breakpoint,\n );\n\n if (isEmpty(responsiveSpacingValue)) {\n return undefined;\n }\n\n if (responsiveSpacingValue === 'auto') {\n return responsiveSpacingValue;\n }\n\n if (Array.isArray(responsiveSpacingValue)) {\n return responsiveSpacingValue.map((value) => getSpacingValue(value, theme)).join(' ');\n }\n\n if (typeof responsiveSpacingValue === 'string' && responsiveSpacingValue.startsWith('spacing.')) {\n const spacingReturnValue = getIn(theme, responsiveSpacingValue);\n return isEmpty(spacingReturnValue) ? makeSpace(spacingReturnValue) : undefined;\n }\n\n // pixel or with unit values\n return responsiveSpacingValue;\n};\n\nconst getColorValue = (\n color: BaseBoxProps['backgroundColor'] \| BaseBoxProps['borderColor'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string => {\n const responsiveBackgroundValue = getResponsiveValue(color, breakpoint);\n const tokenValue = getIn(theme, `colors.${responsiveBackgroundValue}`);\n return tokenValue ?? responsiveBackgroundValue;\n};\n\nconst getBorderRadiusValue = (\n borderRadius: BaseBoxProps['borderRadius'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string \| undefined => {\n const responsiveBorderRadiusValue = getResponsiveValue(borderRadius, breakpoint);\n return isEmpty(responsiveBorderRadiusValue)\n ? undefined\n : makeBorderSize(getIn(theme, `border.radius.${responsiveBorderRadiusValue}`));\n};\n\nconst getBorderWidthValue = (\n borderWidth: BaseBoxProps['borderWidth'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string \| undefined => {\n const responsiveBorderWidthValue = getResponsiveValue(borderWidth, breakpoint);\n return isEmpty(responsiveBorderWidthValue)\n ? undefined\n : makeBorderSize(getIn(theme, `border.width.${responsiveBorderWidthValue}`));\n};\n\nexport const getElevationValue = (\n elevation: BaseBoxProps['elevation'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string \| undefined => {\n const responsiveElevationValue = getResponsiveValue(elevation, breakpoint);\n return isEmpty(responsiveElevationValue)\n ? undefined\n : getIn(theme, `elevation.${responsiveElevationValue}`);\n};\n\nconst getAllProps = (\n props: BaseBoxProps & { theme: Theme },\n breakpoint?: keyof Breakpoints,\n): CSSObject => {\n const hasBorder = props.borderWidth \|\| props.borderColor;\n const hasBorderRight = props.borderRight \|\| props.borderRightColor \|\| props.borderRightWidth;\n const hasBorderLeft = props.borderLeft \|\| props.borderLeftColor \|\| props.borderLeftWidth;\n const hasBorderTop = props.borderTop \|\| props.borderTopColor \|\| props.borderTopWidth;\n const hasBorderBottom = props.borderBottom \|\| props.borderBottomColor \|\| props.borderBottomWidth;\n\n return {\n display: getResponsiveValue(props.display, breakpoint),\n overflow: getResponsiveValue(props.overflow, breakpoint),\n overflowX: getResponsiveValue(props.overflowX, breakpoint),\n overflowY: getResponsiveValue(props.overflowY, breakpoint),\n textAlign: getResponsiveValue(props.textAlign, breakpoint),\n whiteSpace: getResponsiveValue(props.whiteSpace, breakpoint),\n\n // Flex\n flex: getResponsiveValue(props.flex, breakpoint),\n flexWrap: getResponsiveValue(props.flexWrap, breakpoint),\n flexDirection: getResponsiveValue(props.flexDirection, breakpoint),\n flexGrow: getResponsiveValue(props.flexGrow, breakpoint),\n flexShrink: getResponsiveValue(props.flexShrink, breakpoint),\n flexBasis: getResponsiveValue(props.flexBasis, breakpoint),\n alignItems: getResponsiveValue(props.alignItems, breakpoint),\n alignContent: getResponsiveValue(props.alignContent, breakpoint),\n alignSelf: getResponsiveValue(props.alignSelf, breakpoint),\n justifyItems: getResponsiveValue(props.justifyItems, breakpoint),\n justifyContent: getResponsiveValue(props.justifyContent, breakpoint),\n justifySelf: getResponsiveValue(props.justifySelf, breakpoint),\n placeSelf: getResponsiveValue(props.placeSelf, breakpoint),\n placeItems: getResponsiveValue(props.placeItems, breakpoint),\n order: getResponsiveValue(props.order, breakpoint),\n position: getResponsiveValue(props.position, breakpoint),\n zIndex: getResponsiveValue(props.zIndex, breakpoint),\n\n // Grid\n grid: getResponsiveValue(props.grid, breakpoint),\n gridColumn: getResponsiveValue(props.gridColumn, breakpoint),\n gridRow: getResponsiveValue(props.gridRow, breakpoint),\n gridRowStart: getResponsiveValue(props.gridRowStart, breakpoint),\n gridRowEnd: getResponsiveValue(props.gridRowEnd, breakpoint),\n gridArea: getResponsiveValue(props.gridArea, breakpoint),\n gridAutoFlow: getResponsiveValue(props.gridAutoFlow, breakpoint),\n gridAutoRows: getResponsiveValue(props.gridAutoRows, breakpoint),\n gridAutoColumns: getResponsiveValue(props.gridAutoColumns, breakpoint),\n gridTemplate: getResponsiveValue(props.gridTemplate, breakpoint),\n gridTemplateAreas: getResponsiveValue(props.gridTemplateAreas, breakpoint),\n gridTemplateColumns: getResponsiveValue(props.gridTemplateColumns, breakpoint),\n gridTemplateRows: getResponsiveValue(props.gridTemplateRows, breakpoint),\n\n // Spacing Props\n padding: getSpacingValue(props.padding, props.theme, breakpoint),\n paddingTop: getSpacingValue(props.paddingTop ?? props.paddingY, props.theme, breakpoint),\n paddingBottom: getSpacingValue(props.paddingBottom ?? props.paddingY, props.theme, breakpoint),\n paddingRight: getSpacingValue(props.paddingRight ?? props.paddingX, props.theme, breakpoint),\n paddingLeft: getSpacingValue(props.paddingLeft ?? props.paddingX, props.theme, breakpoint),\n margin: getSpacingValue(props.margin, props.theme, breakpoint),\n marginBottom: getSpacingValue(props.marginBottom ?? props.marginY, props.theme, breakpoint),\n marginTop: getSpacingValue(props.marginTop ?? props.marginY, props.theme, breakpoint),\n marginRight: getSpacingValue(props.marginRight ?? props.marginX, props.theme, breakpoint),\n marginLeft: getSpacingValue(props.marginLeft ?? props.marginX, props.theme, breakpoint),\n height: getSpacingValue(props.height, props.theme, breakpoint),\n minHeight: getSpacingValue(props.minHeight, props.theme, breakpoint),\n maxHeight: getSpacingValue(props.maxHeight, props.theme, breakpoint),\n width: getSpacingValue(props.width, props.theme, breakpoint),\n minWidth: getSpacingValue(props.minWidth, props.theme, breakpoint),\n maxWidth: getSpacingValue(props.maxWidth, props.theme, breakpoint),\n gap: getSpacingValue(props.gap, props.theme, breakpoint),\n rowGap: getSpacingValue(props.rowGap, props.theme, breakpoint),\n columnGap: getSpacingValue(props.columnGap, props.theme, breakpoint),\n top: getSpacingValue(props.top, props.theme, breakpoint),\n right: getSpacingValue(props.right, props.theme, breakpoint),\n bottom: getSpacingValue(props.bottom, props.theme, breakpoint),\n left: getSpacingValue(props.left, props.theme, breakpoint),\n\n // Visual props\n backgroundColor: getColorValue(props.backgroundColor, props.theme, breakpoint),\n backgroundImage: getResponsiveValue(props.backgroundImage, breakpoint),\n backgroundSize: getResponsiveValue(props.backgroundSize, breakpoint),\n backgroundPosition: getResponsiveValue(props.backgroundPosition, breakpoint),\n backgroundOrigin: getResponsiveValue(props.backgroundOrigin, breakpoint),\n backgroundRepeat: getResponsiveValue(props.backgroundRepeat, breakpoint),\n borderRadius: getBorderRadiusValue(props.borderRadius, props.theme, breakpoint),\n lineHeight: getSpacingValue(props.lineHeight, props.theme, breakpoint),\n border: getResponsiveValue(props.border, breakpoint),\n borderTop: getResponsiveValue(props.borderTop, breakpoint),\n borderRight: getResponsiveValue(props.borderRight, breakpoint),\n borderBottom: getResponsiveValue(props.borderBottom, breakpoint),\n borderLeft: getResponsiveValue(props.borderLeft, breakpoint),\n borderWidth: getBorderWidthValue(props.borderWidth, props.theme, breakpoint),\n borderColor: getColorValue(props.borderColor, props.theme, breakpoint),\n borderTopWidth: getBorderWidthValue(props.borderTopWidth, props.theme, breakpoint),\n borderTopColor: getColorValue(props.borderTopColor, props.theme, breakpoint),\n borderRightWidth: getBorderWidthValue(props.borderRightWidth, props.theme, breakpoint),\n borderRightColor: getColorValue(props.borderRightColor, props.theme, breakpoint),\n borderBottomWidth: getBorderWidthValue(props.borderBottomWidth, props.theme, breakpoint),\n borderBottomColor: getColorValue(props.borderBottomColor, props.theme, breakpoint),\n borderLeftWidth: getBorderWidthValue(props.borderLeftWidth, props.theme, breakpoint),\n borderLeftColor: getColorValue(props.borderLeftColor, props.theme, breakpoint),\n borderTopLeftRadius: getBorderRadiusValue(props.borderTopLeftRadius, props.theme, breakpoint),\n borderTopRightRadius: getBorderRadiusValue(props.borderTopRightRadius, props.theme, breakpoint),\n borderBottomRightRadius: getBorderRadiusValue(\n props.borderBottomRightRadius,\n props.theme,\n breakpoint,\n ),\n borderBottomLeftRadius: getBorderRadiusValue(\n props.borderBottomLeftRadius,\n props.theme,\n breakpoint,\n ),\n borderStyle: hasBorder ? 'solid' : undefined,\n // Since we only allow 'solid', we can use the same value for all borders if hasBorder is true\n // If hasBorder is false, we need to check each border individually\n ...(!hasBorder && {\n borderTopStyle: hasBorderTop ? 'solid' : undefined,\n borderBottomStyle: hasBorderBottom ? 'solid' : undefined,\n borderLeftStyle: hasBorderLeft ? 'solid' : undefined,\n borderRightStyle: hasBorderRight ? 'solid' : undefined,\n }),\n\n touchAction: getResponsiveValue(props.touchAction, breakpoint),\n userSelect: getResponsiveValue(props.userSelect, breakpoint),\n pointerEvents: getResponsiveValue(props.pointerEvents),\n opacity: getResponsiveValue(props.opacity, breakpoint),\n visibility: getResponsiveValue(props.visibility, breakpoint),\n ...(!isReactNative() && {\n boxShadow: getElevationValue(props.elevation, props.theme, breakpoint),\n }),\n\n // Polygon support\n transform: getResponsiveValue(props.transform as string, breakpoint),\n transformOrigin: getResponsiveValue(props.transformOrigin, breakpoint),\n clipPath: getResponsiveValue(props.clipPath, breakpoint),\n };\n};\n\n/** We only add breakpoint if at least one of the value is defined */\nconst shouldAddBreakpoint = (cssProps: CSSObject): boolean => {\n const firstDefinedValue = Object.values(cssProps).find(\n (cssValue) => cssValue !== undefined && cssValue !== null,\n );\n\n return firstDefinedValue !== undefined;\n};\n\nconst getAllMediaQueries = (props: BaseBoxProps & { theme: Theme }): CSSObject => {\n if (isReactNative()) {\n return {};\n }\n\n const { base, ...breakpointsWithoutBase } = breakpoints;\n\n return Object.fromEntries(\n Object.entries(breakpointsWithoutBase).map(([breakpointKey, breakpointValue]) => {\n const cssPropsForCurrentBreakpoint = getAllProps(props, breakpointKey as keyof Breakpoints);\n if (!shouldAddBreakpoint(cssPropsForCurrentBreakpoint)) {\n return [];\n }\n\n const mediaQuery = `@media ${getMediaQuery({ min: breakpointValue })}`;\n return [mediaQuery, cssPropsForCurrentBreakpoint];\n }),\n );\n};\n\nconst getBaseBoxStyles = (props: BaseBoxProps & { theme: Theme }): CSSObject => {\n return {\n ...getAllProps(props),\n ...getAllMediaQueries(props),\n };\n};\n\nexport {\n getBaseBoxStyles,\n getSpacingValue,\n getColorValue,\n getBorderRadiusValue,\n shouldAddBreakpoint,\n getAllMediaQueries,\n getAllProps,\n};\n"],"names":["getSpacingValue","spacingValue","theme","breakpoint","isEmpty","undefined","responsiveSpacingValue","getResponsiveValue","Array","isArray","map","value","join","startsWith","spacingReturnValue","getIn","makeSpace","getColorValue","color","responsiveBackgroundValue","tokenValue","concat","getBorderRadiusValue","borderRadius","responsiveBorderRadiusValue","makeBorderSize","getBorderWidthValue","borderWidth","responsiveBorderWidthValue","getElevationValue","elevation","responsiveElevationValue","getAllProps","props","_props$paddingTop","_props$paddingBottom","_props$paddingRight","_props$paddingLeft","_props$marginBottom","_props$marginTop","_props$marginRight","_props$marginLeft","hasBorder","borderColor","hasBorderRight","borderRight","borderRightColor","borderRightWidth","hasBorderLeft","borderLeft","borderLeftColor","borderLeftWidth","hasBorderTop","borderTop","borderTopColor","borderTopWidth","hasBorderBottom","borderBottom","borderBottomColor","borderBottomWidth","_objectSpread","display","overflow","overflowX","overflowY","textAlign","whiteSpace","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","position","zIndex","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingY","paddingBottom","paddingRight","paddingX","paddingLeft","margin","marginBottom","marginY","marginTop","marginRight","marginX","marginLeft","height","minHeight","maxHeight","width","minWidth","maxWidth","gap","rowGap","columnGap","top","right","bottom","left","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","lineHeight","border","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","borderStyle","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle","touchAction","userSelect","pointerEvents","opacity","visibility","isReactNative","boxShadow","transform","transformOrigin","clipPath","shouldAddBreakpoint","cssProps","firstDefinedValue","Object","values","find","cssValue","getAllMediaQueries","base","breakpoints","breakpointsWithoutBase","_objectWithoutProperties","_excluded","fromEntries","entries","_ref","_ref2","_slicedToArray","breakpointKey","breakpointValue","cssPropsForCurrentBreakpoint","mediaQuery","getMediaQuery","min","getBaseBoxStyles"],"mappings":"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"}
1	+ {"version":3,"file":"baseBoxStyles.js","sources":["../../../../../../../src/components/Box/BaseBox/baseBoxStyles.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-ts-expect-error /\n/ eslint-disable @typescript-eslint/no-unnecessary-type-assertion /\nimport type { CSSObject } from 'styled-components';\nimport type {\n BaseBoxProps,\n MakeValueResponsive,\n SpacingValueType,\n ArrayOfMaxLength4,\n} from './types';\nimport { getResponsiveValue } from './getResponsiveValue';\nimport getIn from '~utils/lodashButBetter/get';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { Breakpoints } from '~tokens/global';\nimport { breakpoints } from '~tokens/global';\nimport { isReactNative, getMediaQuery } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport type { DotNotationSpacingStringToken } from '~utils/types';\n\nconst isSpacingToken = (value: string): value is DotNotationSpacingStringToken => {\n return typeof value === 'string' && value.startsWith('spacing.');\n};\n\nconst getSpacingValue = (\n spacingValue:\n \| MakeValueResponsive<SpacingValueType \| ArrayOfMaxLength4<SpacingValueType>>\n \| undefined,\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string \| undefined => {\n if (isEmpty(spacingValue)) {\n return undefined;\n }\n\n const responsiveSpacingValue = getResponsiveValue(\n spacingValue as MakeValueResponsive<SpacingValueType \| SpacingValueType[]>,\n breakpoint,\n );\n\n if (isEmpty(responsiveSpacingValue)) {\n return undefined;\n }\n\n if (responsiveSpacingValue === 'auto') {\n return responsiveSpacingValue;\n }\n\n if (Array.isArray(responsiveSpacingValue)) {\n return responsiveSpacingValue.map((value) => getSpacingValue(value, theme)).join(' ');\n }\n\n if (isSpacingToken(responsiveSpacingValue)) {\n const spacingReturnValue = getIn(theme, responsiveSpacingValue);\n return isEmpty(spacingReturnValue) ? makeSpace(spacingReturnValue!) : undefined;\n }\n\n // pixel or with unit values\n return responsiveSpacingValue;\n};\n\nconst getColorValue = (\n color: BaseBoxProps['backgroundColor'] \| BaseBoxProps['borderColor'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string => {\n const responsiveBackgroundValue = getResponsiveValue(color, breakpoint);\n // @ts-expect-error: We always return any from getResponsiveValue so value can't be inferred here\n const tokenValue = getIn(theme, `colors.${responsiveBackgroundValue}`);\n return tokenValue ?? responsiveBackgroundValue;\n};\n\nconst getBorderRadiusValue = (\n borderRadius: BaseBoxProps['borderRadius'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string \| undefined => {\n const responsiveBorderRadiusValue = getResponsiveValue(borderRadius, breakpoint);\n return isEmpty(responsiveBorderRadiusValue)\n ? undefined\n : // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex\n makeBorderSize(getIn(theme, `border.radius.${responsiveBorderRadiusValue}`));\n};\n\nconst getBorderWidthValue = (\n borderWidth: BaseBoxProps['borderWidth'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string \| undefined => {\n const responsiveBorderWidthValue = getResponsiveValue(borderWidth, breakpoint);\n return isEmpty(responsiveBorderWidthValue)\n ? undefined\n : // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex\n makeBorderSize(getIn(theme, `border.width.${responsiveBorderWidthValue}`));\n};\n\nexport const getElevationValue = (\n elevation: BaseBoxProps['elevation'],\n theme: Theme,\n breakpoint?: keyof Breakpoints,\n): string \| undefined => {\n const responsiveElevationValue = getResponsiveValue(elevation, breakpoint);\n return isEmpty(responsiveElevationValue)\n ? undefined\n : // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n // @ts-ignore: intentionally set to any since figuring out types of responsive props is complex\n getIn(theme, `elevation.${responsiveElevationValue!}`);\n};\n\nconst getAllProps = (\n props: BaseBoxProps & { theme: Theme },\n breakpoint?: keyof Breakpoints,\n): CSSObject => {\n const hasBorder = props.borderWidth \|\| props.borderColor;\n const hasBorderRight = props.borderRight \|\| props.borderRightColor \|\| props.borderRightWidth;\n const hasBorderLeft = props.borderLeft \|\| props.borderLeftColor \|\| props.borderLeftWidth;\n const hasBorderTop = props.borderTop \|\| props.borderTopColor \|\| props.borderTopWidth;\n const hasBorderBottom = props.borderBottom \|\| props.borderBottomColor \|\| props.borderBottomWidth;\n\n return {\n display: getResponsiveValue(props.display, breakpoint),\n overflow: getResponsiveValue(props.overflow, breakpoint),\n overflowX: getResponsiveValue(props.overflowX, breakpoint),\n overflowY: getResponsiveValue(props.overflowY, breakpoint),\n textAlign: getResponsiveValue(props.textAlign, breakpoint),\n whiteSpace: getResponsiveValue(props.whiteSpace, breakpoint),\n\n // Flex\n flex: getResponsiveValue(props.flex, breakpoint),\n flexWrap: getResponsiveValue(props.flexWrap, breakpoint),\n flexDirection: getResponsiveValue(props.flexDirection, breakpoint),\n flexGrow: getResponsiveValue(props.flexGrow, breakpoint),\n flexShrink: getResponsiveValue(props.flexShrink, breakpoint),\n flexBasis: getResponsiveValue(props.flexBasis, breakpoint),\n alignItems: getResponsiveValue(props.alignItems, breakpoint),\n alignContent: getResponsiveValue(props.alignContent, breakpoint),\n alignSelf: getResponsiveValue(props.alignSelf, breakpoint),\n justifyItems: getResponsiveValue(props.justifyItems, breakpoint),\n justifyContent: getResponsiveValue(props.justifyContent, breakpoint),\n justifySelf: getResponsiveValue(props.justifySelf, breakpoint),\n placeSelf: getResponsiveValue(props.placeSelf, breakpoint),\n placeItems: getResponsiveValue(props.placeItems, breakpoint),\n order: getResponsiveValue(props.order, breakpoint),\n position: getResponsiveValue(props.position, breakpoint),\n zIndex: getResponsiveValue(props.zIndex, breakpoint),\n\n // Grid\n grid: getResponsiveValue(props.grid, breakpoint),\n gridColumn: getResponsiveValue(props.gridColumn, breakpoint),\n gridRow: getResponsiveValue(props.gridRow, breakpoint),\n gridRowStart: getResponsiveValue(props.gridRowStart, breakpoint),\n gridRowEnd: getResponsiveValue(props.gridRowEnd, breakpoint),\n gridArea: getResponsiveValue(props.gridArea, breakpoint),\n gridAutoFlow: getResponsiveValue(props.gridAutoFlow, breakpoint),\n gridAutoRows: getResponsiveValue(props.gridAutoRows, breakpoint),\n gridAutoColumns: getResponsiveValue(props.gridAutoColumns, breakpoint),\n gridTemplate: getResponsiveValue(props.gridTemplate, breakpoint),\n gridTemplateAreas: getResponsiveValue(props.gridTemplateAreas, breakpoint),\n gridTemplateColumns: getResponsiveValue(props.gridTemplateColumns, breakpoint),\n gridTemplateRows: getResponsiveValue(props.gridTemplateRows, breakpoint),\n\n // Spacing Props\n padding: getSpacingValue(props.padding, props.theme, breakpoint),\n paddingTop: getSpacingValue(props.paddingTop ?? props.paddingY, props.theme, breakpoint),\n paddingBottom: getSpacingValue(props.paddingBottom ?? props.paddingY, props.theme, breakpoint),\n paddingRight: getSpacingValue(props.paddingRight ?? props.paddingX, props.theme, breakpoint),\n paddingLeft: getSpacingValue(props.paddingLeft ?? props.paddingX, props.theme, breakpoint),\n margin: getSpacingValue(props.margin, props.theme, breakpoint),\n marginBottom: getSpacingValue(props.marginBottom ?? props.marginY, props.theme, breakpoint),\n marginTop: getSpacingValue(props.marginTop ?? props.marginY, props.theme, breakpoint),\n marginRight: getSpacingValue(props.marginRight ?? props.marginX, props.theme, breakpoint),\n marginLeft: getSpacingValue(props.marginLeft ?? props.marginX, props.theme, breakpoint),\n height: getSpacingValue(props.height, props.theme, breakpoint),\n minHeight: getSpacingValue(props.minHeight, props.theme, breakpoint),\n maxHeight: getSpacingValue(props.maxHeight, props.theme, breakpoint),\n width: getSpacingValue(props.width, props.theme, breakpoint),\n minWidth: getSpacingValue(props.minWidth, props.theme, breakpoint),\n maxWidth: getSpacingValue(props.maxWidth, props.theme, breakpoint),\n gap: getSpacingValue(props.gap, props.theme, breakpoint),\n rowGap: getSpacingValue(props.rowGap, props.theme, breakpoint),\n columnGap: getSpacingValue(props.columnGap, props.theme, breakpoint),\n top: getSpacingValue(props.top, props.theme, breakpoint),\n right: getSpacingValue(props.right, props.theme, breakpoint),\n bottom: getSpacingValue(props.bottom, props.theme, breakpoint),\n left: getSpacingValue(props.left, props.theme, breakpoint),\n\n // Visual props\n backgroundColor: getColorValue(props.backgroundColor, props.theme, breakpoint),\n backgroundImage: getResponsiveValue(props.backgroundImage, breakpoint),\n backgroundSize: getResponsiveValue(props.backgroundSize, breakpoint),\n backgroundPosition: getResponsiveValue(props.backgroundPosition, breakpoint),\n backgroundOrigin: getResponsiveValue(props.backgroundOrigin, breakpoint),\n backgroundRepeat: getResponsiveValue(props.backgroundRepeat, breakpoint),\n borderRadius: getBorderRadiusValue(props.borderRadius, props.theme, breakpoint),\n lineHeight: getSpacingValue(props.lineHeight, props.theme, breakpoint),\n border: getResponsiveValue(props.border, breakpoint),\n borderTop: getResponsiveValue(props.borderTop, breakpoint),\n borderRight: getResponsiveValue(props.borderRight, breakpoint),\n borderBottom: getResponsiveValue(props.borderBottom, breakpoint),\n borderLeft: getResponsiveValue(props.borderLeft, breakpoint),\n borderWidth: getBorderWidthValue(props.borderWidth, props.theme, breakpoint),\n borderColor: getColorValue(props.borderColor, props.theme, breakpoint),\n borderTopWidth: getBorderWidthValue(props.borderTopWidth, props.theme, breakpoint),\n borderTopColor: getColorValue(props.borderTopColor, props.theme, breakpoint),\n borderRightWidth: getBorderWidthValue(props.borderRightWidth, props.theme, breakpoint),\n borderRightColor: getColorValue(props.borderRightColor, props.theme, breakpoint),\n borderBottomWidth: getBorderWidthValue(props.borderBottomWidth, props.theme, breakpoint),\n borderBottomColor: getColorValue(props.borderBottomColor, props.theme, breakpoint),\n borderLeftWidth: getBorderWidthValue(props.borderLeftWidth, props.theme, breakpoint),\n borderLeftColor: getColorValue(props.borderLeftColor, props.theme, breakpoint),\n borderTopLeftRadius: getBorderRadiusValue(props.borderTopLeftRadius, props.theme, breakpoint),\n borderTopRightRadius: getBorderRadiusValue(props.borderTopRightRadius, props.theme, breakpoint),\n borderBottomRightRadius: getBorderRadiusValue(\n props.borderBottomRightRadius,\n props.theme,\n breakpoint,\n ),\n borderBottomLeftRadius: getBorderRadiusValue(\n props.borderBottomLeftRadius,\n props.theme,\n breakpoint,\n ),\n borderStyle: hasBorder ? 'solid' : undefined,\n // Since we only allow 'solid', we can use the same value for all borders if hasBorder is true\n // If hasBorder is false, we need to check each border individually\n ...(!hasBorder && {\n borderTopStyle: hasBorderTop ? 'solid' : undefined,\n borderBottomStyle: hasBorderBottom ? 'solid' : undefined,\n borderLeftStyle: hasBorderLeft ? 'solid' : undefined,\n borderRightStyle: hasBorderRight ? 'solid' : undefined,\n }),\n\n touchAction: getResponsiveValue(props.touchAction, breakpoint),\n userSelect: getResponsiveValue(props.userSelect, breakpoint),\n pointerEvents: getResponsiveValue(props.pointerEvents),\n opacity: getResponsiveValue(props.opacity, breakpoint),\n visibility: getResponsiveValue(props.visibility, breakpoint),\n ...(!isReactNative() && {\n boxShadow: getElevationValue(props.elevation, props.theme, breakpoint),\n }),\n\n // Polygon support\n transform: getResponsiveValue(props.transform as string, breakpoint),\n transformOrigin: getResponsiveValue(props.transformOrigin, breakpoint),\n clipPath: getResponsiveValue(props.clipPath, breakpoint),\n };\n};\n\n/* We only add breakpoint if at least one of the value is defined */\nconst shouldAddBreakpoint = (cssProps: CSSObject): boolean => {\n const firstDefinedValue = Object.values(cssProps).find(\n (cssValue) => cssValue !== undefined && cssValue !== null,\n );\n\n return firstDefinedValue !== undefined;\n};\n\nconst getAllMediaQueries = (props: BaseBoxProps & { theme: Theme }): CSSObject => {\n if (isReactNative()) {\n return {};\n }\n\n const { base, ...breakpointsWithoutBase } = breakpoints;\n\n return Object.fromEntries(\n Object.entries(breakpointsWithoutBase).map(([breakpointKey, breakpointValue]) => {\n const cssPropsForCurrentBreakpoint = getAllProps(props, breakpointKey as keyof Breakpoints);\n if (!shouldAddBreakpoint(cssPropsForCurrentBreakpoint)) {\n return [];\n }\n\n const mediaQuery = `@media ${getMediaQuery({ min: breakpointValue })}`;\n return [mediaQuery, cssPropsForCurrentBreakpoint];\n }),\n );\n};\n\nconst getBaseBoxStyles = (props: BaseBoxProps & { theme: Theme }): CSSObject => {\n return {\n ...getAllProps(props),\n ...getAllMediaQueries(props),\n };\n};\n\nexport {\n getBaseBoxStyles,\n getSpacingValue,\n getColorValue,\n getBorderRadiusValue,\n shouldAddBreakpoint,\n getAllMediaQueries,\n getAllProps,\n};\n"],"names":["isSpacingToken","value","startsWith","getSpacingValue","spacingValue","theme","breakpoint","isEmpty","undefined","responsiveSpacingValue","getResponsiveValue","Array","isArray","map","join","spacingReturnValue","getIn","makeSpace","getColorValue","color","responsiveBackgroundValue","tokenValue","concat","getBorderRadiusValue","borderRadius","responsiveBorderRadiusValue","makeBorderSize","getBorderWidthValue","borderWidth","responsiveBorderWidthValue","getElevationValue","elevation","responsiveElevationValue","getAllProps","props","_props$paddingTop","_props$paddingBottom","_props$paddingRight","_props$paddingLeft","_props$marginBottom","_props$marginTop","_props$marginRight","_props$marginLeft","hasBorder","borderColor","hasBorderRight","borderRight","borderRightColor","borderRightWidth","hasBorderLeft","borderLeft","borderLeftColor","borderLeftWidth","hasBorderTop","borderTop","borderTopColor","borderTopWidth","hasBorderBottom","borderBottom","borderBottomColor","borderBottomWidth","_objectSpread","display","overflow","overflowX","overflowY","textAlign","whiteSpace","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","position","zIndex","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingY","paddingBottom","paddingRight","paddingX","paddingLeft","margin","marginBottom","marginY","marginTop","marginRight","marginX","marginLeft","height","minHeight","maxHeight","width","minWidth","maxWidth","gap","rowGap","columnGap","top","right","bottom","left","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","lineHeight","border","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","borderStyle","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle","touchAction","userSelect","pointerEvents","opacity","visibility","isReactNative","boxShadow","transform","transformOrigin","clipPath","shouldAddBreakpoint","cssProps","firstDefinedValue","Object","values","find","cssValue","getAllMediaQueries","base","breakpoints","breakpointsWithoutBase","_objectWithoutProperties","_excluded","fromEntries","entries","_ref","_ref2","_slicedToArray","breakpointKey","breakpointValue","cssPropsForCurrentBreakpoint","mediaQuery","getMediaQuery","min","getBaseBoxStyles"],"mappings":"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"}

package/build/lib/web/development/components/Box/BaseBox/getResponsiveValue.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getResponsiveValue.web.js","sources":["../../../../../../../src/components/Box/BaseBox/getResponsiveValue.web.ts"],"sourcesContent":["import type { MakeValueResponsive } from './types';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { Breakpoints } from '~tokens/global';\n\n/*\n A helper function that returns the exact value for that breakpoint on passing the prop and breakpoint\n \n ## Usage\n \n ### Get base value of prop\n \n ```ts\n * getResponsiveValue(props.yourProp, 'base');\n * // yourProp=\"hi\" -> \"hi\"\n * // yourProp={{ base: 'hello', m: 'hi' }} -> \"hello\"\n * // yourProp={{ m: 'hi' }} -> undefined\n * ```\n \n ### Get value of particular breakpoint\n \n \n * ```ts\n * getResponsiveValue(props.yourProp, 'm');\n * // yourProp=\"hi\" -> undefined\n * // yourProp={{ base: 'hello', m: 'hi' }} -> \"hi\"\n * // yourProp={{ m: 'hi' }} -> \"hi\"\n * ```\n /\nconst getResponsiveValue = <T extends string \| number \| string[]>(\n value: MakeValueResponsive<T> \| undefined,\n breakpoint: keyof Breakpoints = 'base',\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): ~~any~~ \| undefined => {\n if (value === undefined \|\| value === null) {\n return undefined;\n }\n\n if (typeof value === 'string' \|\| typeof value === 'number' \|\| Array.isArray(value)) {\n /\n Flat values like string or number should only be added in `base` styles.\n \n E.g. if you pass `display=\"block\"`, it should only put that style in base style and not in media queries\n * ```js\n * // Output should be just this-\n * display: block;\n \n // And not this-\n * display: block;\n * media (min-width: s) {\n * display: block;\n * }\n \n media (min-width: m) {\n * display: block\n * }\n * // and more ...\n * ```\n */\n if (breakpoint === 'base') {\n return value;\n }\n\n return undefined;\n }\n\n if (isEmpty(value)) {\n return undefined;\n }\n\n return value[breakpoint];\n};\n\nexport { getResponsiveValue };\n"],"names":["getResponsiveValue","value","breakpoint","arguments","length","undefined","Array","isArray","isEmpty"],"mappings":";;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CACtBC,KAAyC,~~EAGrB~~;AAAA,EAAA,~~IAFpBC~~,UAA6B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,MAAM,CAAA;AAGtC,EAAA,IAAIF,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,IAAI,EAAE;AACzC,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAA;AAEA,EAAA,IAAI,OAAOJ,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAIK,KAAK,CAACC,OAAO,CAACN,KAAK,CAAC,EAAE;AAClF;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACI,IAAIC,UAAU,KAAK,MAAM,EAAE;AACzB,MAAA,OAAOD,KAAK,CAAA;AACd,KAAA;AAEA,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAA;AAEA,EAAA,IAAIG,OAAO,CAACP,KAAK,CAAC,EAAE;AAClB,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAA;EAEA,OAAOJ,KAAK,CAACC,UAAU,CAAC,CAAA;AAC1B;;;;"}
1	+ {"version":3,"file":"getResponsiveValue.web.js","sources":["../../../../../../../src/components/Box/BaseBox/getResponsiveValue.web.ts"],"sourcesContent":["import type { MakeValueResponsive } from './types';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { Breakpoints } from '~tokens/global';\n\n/*\n A helper function that returns the exact value for that breakpoint on passing the prop and breakpoint\n \n ## Usage\n \n ### Get base value of prop\n \n ```ts\n * getResponsiveValue(props.yourProp, 'base');\n * // yourProp=\"hi\" -> \"hi\"\n * // yourProp={{ base: 'hello', m: 'hi' }} -> \"hello\"\n * // yourProp={{ m: 'hi' }} -> undefined\n * ```\n \n ### Get value of particular breakpoint\n \n \n * ```ts\n * getResponsiveValue(props.yourProp, 'm');\n * // yourProp=\"hi\" -> undefined\n * // yourProp={{ base: 'hello', m: 'hi' }} -> \"hi\"\n * // yourProp={{ m: 'hi' }} -> \"hi\"\n * ```\n /\nconst getResponsiveValue = <T extends string \| number \| string[]>(\n value: MakeValueResponsive<T> \| undefined,\n breakpoint: keyof Breakpoints = 'base',\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): T \| undefined => {\n if (value === undefined \|\| value === null) {\n return undefined;\n }\n\n if (typeof value === 'string' \|\| typeof value === 'number' \|\| Array.isArray(value)) {\n /\n Flat values like string or number should only be added in `base` styles.\n \n E.g. if you pass `display=\"block\"`, it should only put that style in base style and not in media queries\n * ```js\n * // Output should be just this-\n * display: block;\n \n // And not this-\n * display: block;\n * media (min-width: s) {\n * display: block;\n * }\n \n media (min-width: m) {\n * display: block\n * }\n * // and more ...\n * ```\n */\n if (breakpoint === 'base') {\n return value as T;\n }\n\n return undefined;\n }\n\n if (isEmpty(value)) {\n return undefined;\n }\n\n return value[breakpoint];\n};\n\nexport { getResponsiveValue };\n"],"names":["getResponsiveValue","value","breakpoint","arguments","length","undefined","Array","isArray","isEmpty"],"mappings":";;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CACtBC,KAAyC,EAGvB;AAAA,EAAA,IAFlBC,UAA6B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,MAAM,CAAA;AAGtC,EAAA,IAAIF,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,IAAI,EAAE;AACzC,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAA;AAEA,EAAA,IAAI,OAAOJ,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAIK,KAAK,CAACC,OAAO,CAACN,KAAK,CAAC,EAAE;AAClF;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACI,IAAIC,UAAU,KAAK,MAAM,EAAE;AACzB,MAAA,OAAOD,KAAK,CAAA;AACd,KAAA;AAEA,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAA;AAEA,EAAA,IAAIG,OAAO,CAACP,KAAK,CAAC,EAAE;AAClB,IAAA,OAAOI,SAAS,CAAA;AAClB,GAAA;EAEA,OAAOJ,KAAK,CAACC,UAAU,CAAC,CAAA;AAC1B;;;;"}

package/build/lib/web/development/components/Box/BaseBox/types/propsTypes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"propsTypes.js","sources":["../../../../../../../../src/components/Box/BaseBox/types/propsTypes.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport type { CSSObject } from 'styled-components';\nimport type { MarginProps, PaddingProps, SpacingValueType } from './spacingTypes';\nimport type { MakeObjectResponsive } from './responsiveTypes';\nimport type { Theme } from '~components/BladeProvider';\nimport type { Border, Elevation } from '~tokens/global';\nimport type { DotNotationColorStringToken, PickCSSByPlatform, TestID } from '~utils/types';\nimport type { Platform } from '~utils';\nimport type { BladeCommonEvents } from '~components/types';\n\ntype LayoutProps = MakeObjectResponsive<\n {\n height: SpacingValueType;\n minHeight: SpacingValueType;\n maxHeight: SpacingValueType;\n width: SpacingValueType;\n minWidth: SpacingValueType;\n maxWidth: SpacingValueType;\n } & PickCSSByPlatform<\n 'display' \| 'overflow' \| 'overflowX' \| 'overflowY' \| 'textAlign' \| 'whiteSpace'\n >\n>;\n\ntype FlexboxProps = MakeObjectResponsive<\n {\n /*\n This uses the native gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n \n @see https://caniuse.com/?search=gap\n /\n gap: SpacingValueType;\n /\n This uses the native row-gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n \n @see https://caniuse.com/?search=row-gap\n /\n rowGap: SpacingValueType;\n /\n This uses the native column-gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n \n @see https://caniuse.com/?search=column-gap\n /\n columnGap: SpacingValueType;\n /\n The `flex` CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n \n @see https://developer.mozilla.org/docs/Web/CSS/flex\n /\n flex: string \| number;\n } & PickCSSByPlatform<\n \| 'flexWrap'\n \| 'flexDirection'\n \| 'flexGrow'\n \| 'flexShrink'\n \| 'flexBasis'\n \| 'alignItems'\n \| 'alignContent'\n \| 'alignSelf'\n \| 'justifyItems'\n \| 'justifyContent'\n \| 'justifySelf'\n \| 'placeSelf'\n \| 'placeItems'\n \| 'order'\n >\n>;\n\ntype PositionProps = MakeObjectResponsive<\n {\n top: SpacingValueType;\n right: SpacingValueType;\n bottom: SpacingValueType;\n left: SpacingValueType;\n } & PickCSSByPlatform<'position' \| 'zIndex'>\n>;\n\ntype GridProps = MakeObjectResponsive<\n PickCSSByPlatform<\n \| 'grid'\n \| 'gridColumn'\n \| 'gridRow'\n \| 'gridRowStart'\n \| 'gridRowEnd'\n \| 'gridColumnStart'\n \| 'gridColumnEnd'\n \| 'gridArea'\n \| 'gridAutoFlow'\n \| 'gridAutoRows'\n \| 'gridAutoColumns'\n \| 'gridTemplate'\n \| 'gridTemplateAreas'\n \| 'gridTemplateColumns'\n \| 'gridTemplateRows'\n >\n>;\n\ntype ColorObjects = 'feedback' \| 'surface' \| 'action';\ntype BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<\n Theme['colors'][T]['background']\n>}`;\ntype BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationColorStringToken<\n Theme['colors'][T]['border']\n>}`;\n\n// Created this as an array so I can reuse it for runtime validation\nconst validBoxAsValues = [\n 'div',\n 'section',\n 'footer',\n 'header',\n 'main',\n 'aside',\n 'nav',\n 'span',\n 'label',\n] as const;\n\ntype BoxAsType = typeof validBoxAsValues[number];\n\ntype BrandColorString = `brand.${DotNotationColorStringToken<Theme['colors']['brand']>}`;\n\n// Visual props that are common for both Box and BaseBox\ntype CommonBoxVisualProps = MakeObjectResponsive<\n {\n borderRadius: keyof Border['radius'];\n borderWidth: keyof Border['width'];\n borderColor: BorderColorString<'surface'> \| BrandColorString;\n borderTopWidth: keyof Border['width'];\n borderTopColor: BorderColorString<'surface'> \| BrandColorString;\n borderRightWidth: keyof Border['width'];\n borderRightColor: BorderColorString<'surface'> \| BrandColorString;\n borderBottomWidth: keyof Border['width'];\n borderBottomColor: BorderColorString<'surface'> \| BrandColorString;\n borderLeftWidth: keyof Border['width'];\n borderLeftColor: BorderColorString<'surface'> \| BrandColorString;\n borderTopLeftRadius: keyof Border['radius'];\n borderTopRightRadius: keyof Border['radius'];\n borderBottomRightRadius: keyof Border['radius'];\n borderBottomLeftRadius: keyof Border['radius'];\n } & PickCSSByPlatform<\n \| 'backgroundImage'\n \| 'backgroundSize'\n \| 'backgroundPosition'\n \| 'backgroundOrigin'\n \| 'backgroundRepeat'\n \| 'pointerEvents'\n \| 'opacity'\n \| 'visibility'\n \| 'transform'\n \| 'transformOrigin'\n \| 'clipPath'\n > & {\n /\n Sets the elevation for Box\n \n eg: `theme.elevation.midRaised`\n \n @default `theme.elevation.lowRaised`\n \n Links:\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page\n /\n elevation?: keyof Elevation;\n }\n>;\n\n// Visual props that are specific BaseBox\n// This is used to ensure some of the more flexible BaseBox props are not passed to Box\ntype BaseBoxVisualProps = MakeObjectResponsive<\n {\n backgroundColor:\n \| BackgroundColorString<'feedback'>\n \| BackgroundColorString<'surface'>\n \| BackgroundColorString<'action'>\n \| BrandColorString\n \| 'transparent'\n \| (string & Record<never, never>);\n lineHeight: SpacingValueType;\n touchAction: CSSObject['touchAction'];\n userSelect: CSSObject['userSelect'];\n } & PickCSSByPlatform<\n \| 'border'\n \| 'borderLeft'\n \| 'borderRight'\n \| 'borderTop'\n \| 'borderBottom'\n \| 'opacity'\n \| 'pointerEvents'\n >\n>;\n\n// Visual props that are specific to Box\ntype BoxVisualProps = MakeObjectResponsive<{\n backgroundColor: BackgroundColorString<'surface'> \| BrandColorString \| 'transparent';\n}> & {\n // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object\n // styled-components do not support passing `as` prop as an object\n as: BoxAsType;\n};\n\ntype StyledPropsBlade = Partial<\n Omit<\n MarginProps &\n Pick<FlexboxProps, 'alignSelf' \| 'justifySelf' \| 'placeSelf' \| 'order'> &\n PositionProps &\n Pick<\n GridProps,\n \| 'gridColumn'\n \| 'gridRow'\n \| 'gridRowStart'\n \| 'gridRowEnd'\n \| 'gridColumnStart'\n \| 'gridColumnEnd'\n \| 'gridArea'\n > &\n Pick<LayoutProps, 'display'>,\n '__brand__'\n >\n>;\n\ntype BoxCallbackProps = Omit<\n Platform.Select<{\n web: {\n /\n Warning\n \n Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n \n Use this for hoverable containers in cases like custom menus.\n /\n onMouseOver: React.MouseEventHandler<HTMLElement>;\n /\n Warning\n \n Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n \n Use this for hoverable containers in cases like custom menus.\n /\n onMouseEnter: React.MouseEventHandler<HTMLElement>;\n /\n Warning\n \n Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n \n Use this for hoverable containers in cases like custom menus.\n */\n onMouseLeave: React.MouseEventHandler<HTMLElement>;\n onScroll: React.UIEventHandler<HTMLElement>;\n };\n native: Record<'onMouseOver' \| 'onMouseEnter' \| 'onMouseLeave' \| 'onScroll', undefined>;\n }>,\n '__brand__'\n>;\n\ntype BoxDragAndDropProps = Omit<\n Platform.Select<{\n web: {\n draggable: boolean;\n onDragStart: React.DragEventHandler<HTMLElement>;\n onDragEnter: React.DragEventHandler<HTMLElement>;\n onDragLeave: React.DragEventHandler<HTMLElement>;\n onDragOver: React.DragEventHandler<HTMLElement>;\n onDragEnd: React.DragEventHandler<HTMLElement>;\n onDrop: React.DragEventHandler<HTMLElement>;\n };\n native: Record<\n \| 'draggable'\n \| 'onDragStart'\n \| 'onDragEnter'\n \| 'onDragLeave'\n \| 'onDragOver'\n \| 'onDragEnd'\n \| 'onDrop',\n undefined\n >;\n }>,\n '__brand__'\n>;\n\ntype BoxProps = Partial<\n PaddingProps &\n MarginProps &\n LayoutProps &\n FlexboxProps &\n PositionProps &\n GridProps &\n BoxCallbackProps &\n BoxDragAndDropProps &\n CommonBoxVisualProps &\n BoxVisualProps & {\n children?: React.ReactNode \| React.ReactNode[];\n tabIndex?: number;\n id?: string;\n } & TestID\n>;\n\n// Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.\n// So first we Omit Visual props of Box\n// Then we append BaseBoxVisualProps and some other props for styled-components like class and id\ntype BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> &\n Partial<\n BaseBoxVisualProps & {\n className?: string;\n id?: string;\n tabIndex?: number;\n }\n > &\n BladeCommonEvents;\n\n// ref prop type\ntype BoxRefType = Platform.Select<{\n web: Omit<HTMLElement, 'style'>;\n native: View;\n}>;\n\nexport type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps };\nexport { validBoxAsValues };\n"],"names":["validBoxAsValues"],"mappings":"AA2GA;AACMA,IAAAA,gBAAgB,GAAG,CACvB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO;;;;"}
1	+ {"version":3,"file":"propsTypes.js","sources":["../../../../../../../../src/components/Box/BaseBox/types/propsTypes.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport type { CSSObject } from 'styled-components';\nimport type { MarginProps, PaddingProps, SpacingValueType } from './spacingTypes';\nimport type { MakeObjectResponsive } from './responsiveTypes';\nimport type { Theme } from '~components/BladeProvider';\nimport type { Border, Elevation } from '~tokens/global';\nimport type { PickCSSByPlatform, TestID } from '~utils/types';\nimport type { Platform } from '~utils';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\ntype LayoutProps = MakeObjectResponsive<\n {\n height: SpacingValueType;\n minHeight: SpacingValueType;\n maxHeight: SpacingValueType;\n width: SpacingValueType;\n minWidth: SpacingValueType;\n maxWidth: SpacingValueType;\n } & PickCSSByPlatform<\n 'display' \| 'overflow' \| 'overflowX' \| 'overflowY' \| 'textAlign' \| 'whiteSpace'\n >\n>;\n\ntype FlexboxProps = MakeObjectResponsive<\n {\n /*\n This uses the native gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n \n @see https://caniuse.com/?search=gap\n /\n gap: SpacingValueType;\n /\n This uses the native row-gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n \n @see https://caniuse.com/?search=row-gap\n /\n rowGap: SpacingValueType;\n /\n This uses the native column-gap property which might not work on older browsers.\n * If you want to support older browsers, you might want to use `margin` instead.\n \n @see https://caniuse.com/?search=column-gap\n /\n columnGap: SpacingValueType;\n /\n The `flex` CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n \n @see https://developer.mozilla.org/docs/Web/CSS/flex\n /\n flex: string \| number;\n } & PickCSSByPlatform<\n \| 'flexWrap'\n \| 'flexDirection'\n \| 'flexGrow'\n \| 'flexShrink'\n \| 'flexBasis'\n \| 'alignItems'\n \| 'alignContent'\n \| 'alignSelf'\n \| 'justifyItems'\n \| 'justifyContent'\n \| 'justifySelf'\n \| 'placeSelf'\n \| 'placeItems'\n \| 'order'\n >\n>;\n\ntype PositionProps = MakeObjectResponsive<\n {\n top: SpacingValueType;\n right: SpacingValueType;\n bottom: SpacingValueType;\n left: SpacingValueType;\n } & PickCSSByPlatform<'position' \| 'zIndex'>\n>;\n\ntype GridProps = MakeObjectResponsive<\n PickCSSByPlatform<\n \| 'grid'\n \| 'gridColumn'\n \| 'gridRow'\n \| 'gridRowStart'\n \| 'gridRowEnd'\n \| 'gridColumnStart'\n \| 'gridColumnEnd'\n \| 'gridArea'\n \| 'gridAutoFlow'\n \| 'gridAutoRows'\n \| 'gridAutoColumns'\n \| 'gridTemplate'\n \| 'gridTemplateAreas'\n \| 'gridTemplateColumns'\n \| 'gridTemplateRows'\n >\n>;\n\ntype ColorObjects = 'feedback' \| 'surface' \| 'interactive';\ntype BackgroundOnlyColorObjects = 'popup' \| 'overlay';\ntype BackgroundColorString<\n T extends ColorObjects \| BackgroundOnlyColorObjects\n> = `${T}.background.${DotNotationToken<Theme['colors'][T]['background']>}`;\ntype BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationToken<\n Theme['colors'][T]['border']\n>}`;\n\n// Created this as an array so I can reuse it for runtime validation\nconst validBoxAsValues = [\n 'div',\n 'section',\n 'footer',\n 'header',\n 'main',\n 'aside',\n 'nav',\n 'span',\n 'label',\n] as const;\n\ntype BoxAsType = typeof validBoxAsValues[number];\n\n// Visual props that are common for both Box and BaseBox\ntype CommonBoxVisualProps = MakeObjectResponsive<\n {\n borderRadius: keyof Border['radius'];\n borderWidth: keyof Border['width'];\n borderColor: BorderColorString<'surface'>;\n borderTopWidth: keyof Border['width'];\n borderTopColor: BorderColorString<'surface'>;\n borderRightWidth: keyof Border['width'];\n borderRightColor: BorderColorString<'surface'>;\n borderBottomWidth: keyof Border['width'];\n borderBottomColor: BorderColorString<'surface'>;\n borderLeftWidth: keyof Border['width'];\n borderLeftColor: BorderColorString<'surface'>;\n borderTopLeftRadius: keyof Border['radius'];\n borderTopRightRadius: keyof Border['radius'];\n borderBottomRightRadius: keyof Border['radius'];\n borderBottomLeftRadius: keyof Border['radius'];\n } & PickCSSByPlatform<\n \| 'backgroundImage'\n \| 'backgroundSize'\n \| 'backgroundPosition'\n \| 'backgroundOrigin'\n \| 'backgroundRepeat'\n \| 'pointerEvents'\n \| 'opacity'\n \| 'visibility'\n \| 'transform'\n \| 'transformOrigin'\n \| 'clipPath'\n > & {\n /\n Sets the elevation for Box\n \n eg: `theme.elevation.midRaised`\n \n @default `theme.elevation.lowRaised`\n \n Links:\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page\n /\n elevation?: keyof Elevation;\n }\n>;\n\n// Visual props that are specific BaseBox\n// This is used to ensure some of the more flexible BaseBox props are not passed to Box\ntype BaseBoxVisualProps = MakeObjectResponsive<\n {\n backgroundColor:\n \| BackgroundColorString<'feedback'>\n \| BackgroundColorString<'surface'>\n \| BackgroundColorString<'interactive'>\n \| BackgroundColorString<'overlay'>\n \| BackgroundColorString<'popup'>\n \| 'transparent'\n \| (string & Record<never, never>);\n lineHeight: SpacingValueType;\n touchAction: CSSObject['touchAction'];\n userSelect: CSSObject['userSelect'];\n } & PickCSSByPlatform<\n \| 'border'\n \| 'borderLeft'\n \| 'borderRight'\n \| 'borderTop'\n \| 'borderBottom'\n \| 'opacity'\n \| 'pointerEvents'\n >\n>;\n\n// Visual props that are specific to Box\ntype BoxVisualProps = MakeObjectResponsive<{\n backgroundColor: BackgroundColorString<'surface'> \| 'transparent';\n}> & {\n // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object\n // styled-components do not support passing `as` prop as an object\n as: BoxAsType;\n};\n\ntype StyledPropsBlade = Partial<\n Omit<\n MarginProps &\n Pick<FlexboxProps, 'alignSelf' \| 'justifySelf' \| 'placeSelf' \| 'order'> &\n PositionProps &\n Pick<\n GridProps,\n \| 'gridColumn'\n \| 'gridRow'\n \| 'gridRowStart'\n \| 'gridRowEnd'\n \| 'gridColumnStart'\n \| 'gridColumnEnd'\n \| 'gridArea'\n > &\n Pick<LayoutProps, 'display'>,\n '__brand__'\n >\n>;\n\ntype BoxCallbackProps = Omit<\n Platform.Select<{\n web: {\n /\n Warning\n \n Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n \n Use this for hoverable containers in cases like custom menus.\n /\n onMouseOver: React.MouseEventHandler<HTMLElement>;\n /\n Warning\n \n Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n \n Use this for hoverable containers in cases like custom menus.\n /\n onMouseEnter: React.MouseEventHandler<HTMLElement>;\n /\n Warning\n \n Make sure to not use Box when you want to create a trigger that performs action on hover.\n * You would probably want to render it as `button` using `styled.button` instead.\n \n Use this for hoverable containers in cases like custom menus.\n */\n onMouseLeave: React.MouseEventHandler<HTMLElement>;\n onScroll: React.UIEventHandler<HTMLElement>;\n };\n native: Record<'onMouseOver' \| 'onMouseEnter' \| 'onMouseLeave' \| 'onScroll', undefined>;\n }>,\n '__brand__'\n>;\n\ntype BoxDragAndDropProps = Omit<\n Platform.Select<{\n web: {\n draggable: boolean;\n onDragStart: React.DragEventHandler<HTMLElement>;\n onDragEnter: React.DragEventHandler<HTMLElement>;\n onDragLeave: React.DragEventHandler<HTMLElement>;\n onDragOver: React.DragEventHandler<HTMLElement>;\n onDragEnd: React.DragEventHandler<HTMLElement>;\n onDrop: React.DragEventHandler<HTMLElement>;\n };\n native: Record<\n \| 'draggable'\n \| 'onDragStart'\n \| 'onDragEnter'\n \| 'onDragLeave'\n \| 'onDragOver'\n \| 'onDragEnd'\n \| 'onDrop',\n undefined\n >;\n }>,\n '__brand__'\n>;\n\ntype BoxProps = Partial<\n PaddingProps &\n MarginProps &\n LayoutProps &\n FlexboxProps &\n PositionProps &\n GridProps &\n BoxCallbackProps &\n BoxDragAndDropProps &\n CommonBoxVisualProps &\n BoxVisualProps & {\n children?: React.ReactNode \| React.ReactNode[];\n tabIndex?: number;\n id?: string;\n } & TestID\n>;\n\n// Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.\n// So first we Omit Visual props of Box\n// Then we append BaseBoxVisualProps and some other props for styled-components like class and id\ntype BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> &\n Partial<\n BaseBoxVisualProps & {\n className?: string;\n id?: string;\n tabIndex?: number;\n }\n > &\n BladeCommonEvents;\n\n// ref prop type\ntype BoxRefType = Platform.Select<{\n web: Omit<HTMLElement, 'style'>;\n native: View;\n}>;\n\nexport type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps };\nexport { validBoxAsValues };\n"],"names":["validBoxAsValues"],"mappings":"AA6GA;AACMA,IAAAA,gBAAgB,GAAG,CACvB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO;;;;"}

package/build/lib/web/development/components/Button/BaseButton/BaseButton.js CHANGED Viewed

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React__default from 'react';
 import styled from 'styled-components';
 import StyledBaseButton from './StyledBaseButton.web.js';
-import { buttonIconOnlySizeToIconSizeMap, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, buttonIconPadding, buttonIconOnlyPadding, buttonPadding, typography } from './buttonTokens.js';
+import { backgroundColor, textColor, buttonIconOnlySizeToIconSizeMap, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, buttonIconPadding, buttonIconOnlyPadding, buttonPadding, typography } from './buttonTokens.js';
 import getIn from '../../../utils/lodashButBetter/get.js';
 import '../../../utils/index.js';
 import '../../Box/styledProps/index.js';
@@ -28,8 +28,8 @@ import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
 import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
 import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
-import { getStringFromReactText } from '../../../utils/getStringChildren/getStringChildren.js';
 import useTheme from '../../BladeProvider/useTheme.js';
+import { getStringFromReactText } from '../../../utils/getStringChildren/getStringChildren.js';
 import { usePrevious } from '../../../utils/usePrevious/usePrevious.js';
 import { announce } from '../../LiveAnnouncer/LiveAnnouncer.web.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
@@ -53,29 +53,52 @@ var getRenderElement = function getRenderElement(href) {
   }
   return 'button';
 };
-var getColorToken = function getColorToken(_ref) {
+var getBackgroundColorToken = function getBackgroundColorToken(_ref) {
   var property = _ref.property,
     variant = _ref.variant,
     state = _ref.state,
     color = _ref.color;
-  if (!color || color === 'default') {
-    return "action.".concat(property, ".").concat(variant, ".").concat(state);
-  }
+  var _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
+  var tokens = backgroundColor(property);
   if (color === 'white') {
-    return "white.action.".concat(property, ".").concat(variant, ".").concat(state);
+    return tokens.white[variant][_state];
   }
-  return "feedback.".concat(color, ".action.").concat(property, ".primary.").concat(state, ".").concat(variant === 'primary' ? 'high' : 'low', "Contrast");
+  if (color && color !== 'primary') {
+    if (variant === 'tertiary') {
+      throw new Error("Tertiary variant can only be used with color: \"primary\" or \"white\" but received \"".concat(color, "\""));
+    }
+    return tokens.color(color)[variant][_state];
+  }
+  return tokens.base[variant][_state];
 };
-var getProps = function getProps(_ref2) {
-  var buttonTypographyTokens = _ref2.buttonTypographyTokens,
-    children = _ref2.children,
-    isDisabled = _ref2.isDisabled,
-    size = _ref2.size,
-    theme = _ref2.theme,
+var getTextColorToken = function getTextColorToken(_ref2) {
+  var property = _ref2.property,
     variant = _ref2.variant,
-    color = _ref2.color,
-    hasIcon = _ref2.hasIcon;
-  if (variant === 'tertiary' && color !== 'default' && color !== 'white') {
+    state = _ref2.state,
+    color = _ref2.color;
+  var tokens = textColor(property);
+  var _state = state === 'focus' || state === 'hover' ? 'highlighted' : state;
+  if (color === 'white') {
+    return tokens.white[variant][_state];
+  }
+  if (color && color !== 'primary') {
+    if (variant === 'tertiary') {
+      throw new Error("Tertiary variant can only be used with color: \"primary\" or \"white\" but received \"".concat(color, "\""));
+    }
+    return tokens.color(color)[variant][_state];
+  }
+  return tokens.base[variant][_state];
+};
+var getProps = function getProps(_ref3) {
+  var buttonTypographyTokens = _ref3.buttonTypographyTokens,
+    children = _ref3.children,
+    isDisabled = _ref3.isDisabled,
+    size = _ref3.size,
+    theme = _ref3.theme,
+    variant = _ref3.variant,
+    color = _ref3.color,
+    hasIcon = _ref3.hasIcon;
+  if (variant === 'tertiary' && color !== 'primary' && color !== 'white') {
     throwBladeError({
       moduleName: 'BaseButton',
       message: "Tertiary variant can only be used with color: \"default\" or \"white\" but received \"".concat(color, "\"")
@@ -89,13 +112,13 @@ var getProps = function getProps(_ref2) {
     lineHeight: buttonTypographyTokens.lineHeights[size],
     minHeight: makeSize(minHeight[size]),
     iconPadding: hasIcon && children !== null && children !== void 0 && children.trim() ? "spacing.".concat(buttonIconPadding[size]) : undefined,
-    iconColor: getColorToken({
+    iconColor: getTextColorToken({
       property: 'icon',
       variant: variant,
       color: color,
       state: 'default'
     }),
-    textColor: getColorToken({
+    textColor: getTextColorToken({
       property: 'text',
       variant: variant,
       color: color,
@@ -106,80 +129,68 @@ var getProps = function getProps(_ref2) {
     buttonPaddingLeft: isIconOnly ? makeSpace(theme.spacing[buttonIconOnlyPadding[size].left]) : makeSpace(theme.spacing[buttonPadding[size].left]),
     buttonPaddingRight: isIconOnly ? makeSpace(theme.spacing[buttonIconOnlyPadding[size].right]) : makeSpace(theme.spacing[buttonPadding[size].right]),
     text: size === 'xsmall' ? children === null || children === void 0 ? void 0 : children.trim().toUpperCase() : children === null || children === void 0 ? void 0 : children.trim(),
-    defaultBackgroundColor: getIn(theme.colors, getColorToken({
+    defaultBackgroundColor: getIn(theme.colors, getBackgroundColorToken({
       property: 'background',
       variant: variant,
       color: color,
       state: 'default'
     })),
-    defaultBorderColor: getIn(theme.colors, getColorToken({
+    defaultBorderColor: getIn(theme.colors, getBackgroundColorToken({
       property: 'border',
       variant: variant,
       color: color,
       state: 'default'
     })),
-    hoverBackgroundColor: getIn(theme.colors, getColorToken({
+    hoverBackgroundColor: getIn(theme.colors, getBackgroundColorToken({
       property: 'background',
       variant: variant,
       color: color,
       state: 'hover'
     })),
-    hoverBorderColor: getIn(theme.colors, getColorToken({
+    hoverBorderColor: getIn(theme.colors, getBackgroundColorToken({
       property: 'border',
       variant: variant,
       color: color,
       state: 'hover'
     })),
-    activeBackgroundColor: getIn(theme.colors, getColorToken({
-      property: 'background',
-      variant: variant,
-      color: color,
-      state: 'active'
-    })),
-    activeBorderColor: getIn(theme.colors, getColorToken({
-      property: 'border',
-      variant: variant,
-      color: color,
-      state: 'active'
-    })),
-    focusBackgroundColor: getIn(theme.colors, getColorToken({
+    focusBackgroundColor: getIn(theme.colors, getBackgroundColorToken({
       property: 'background',
       variant: variant,
       color: color,
       state: 'focus'
     })),
-    focusBorderColor: getIn(theme.colors, getColorToken({
+    focusBorderColor: getIn(theme.colors, getBackgroundColorToken({
       property: 'border',
       variant: variant,
       color: color,
       state: 'focus'
     })),
-    focusRingColor: getIn(theme.colors, 'brand.primary.400'),
-    borderWidth: makeBorderSize(theme.border.width.thin),
-    borderRadius: makeBorderSize(theme.border.radius.small),
+    focusRingColor: getIn(theme.colors, 'surface.border.primary.muted'),
+    borderWidth: variant == 'secondary' ? makeBorderSize(theme.border.width.thin) : '0px',
+    borderRadius: makeBorderSize(theme.border.radius.medium),
     motionDuration: 'duration.xquick',
     motionEasing: 'easing.standard.effective'
   };
   if (isDisabled) {
-    var disabledBackgroundColor = getIn(theme.colors, getColorToken({
+    var disabledBackgroundColor = getIn(theme.colors, getBackgroundColorToken({
       property: 'background',
       variant: variant,
       color: color,
       state: 'disabled'
     }));
-    var disabledBorderColor = getIn(theme.colors, getColorToken({
+    var disabledBorderColor = getIn(theme.colors, getBackgroundColorToken({
       property: 'border',
       variant: variant,
       color: color,
       state: 'disabled'
     }));
-    props.iconColor = getColorToken({
+    props.iconColor = getTextColorToken({
       property: 'icon',
       variant: variant,
       color: color,
       state: 'disabled'
     });
-    props.textColor = getColorToken({
+    props.textColor = getTextColorToken({
       property: 'text',
       variant: variant,
       color: color,
@@ -189,8 +200,6 @@ var getProps = function getProps(_ref2) {
     props.defaultBorderColor = disabledBorderColor;
     props.hoverBackgroundColor = disabledBackgroundColor;
     props.hoverBorderColor = disabledBorderColor;
-    props.activeBackgroundColor = disabledBackgroundColor;
-    props.activeBorderColor = disabledBorderColor;
     props.focusBackgroundColor = disabledBackgroundColor;
     props.focusBorderColor = disabledBorderColor;
   }
@@ -199,53 +208,53 @@ var getProps = function getProps(_ref2) {
 var ButtonContent = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "BaseButton__ButtonContent",
   componentId: "zf1huq-0"
-})(function (_ref3) {
-  var isHidden = _ref3.isHidden;
+})(function (_ref4) {
+  var isHidden = _ref4.isHidden;
   return {
     opacity: isHidden ? 0 : 1
   };
 });
-var _BaseButton = function _BaseButton(_ref4, ref) {
-  var href = _ref4.href,
-    target = _ref4.target,
-    rel = _ref4.rel,
-    _ref4$variant = _ref4.variant,
-    variant = _ref4$variant === void 0 ? 'primary' : _ref4$variant,
-    _ref4$color = _ref4.color,
-    color = _ref4$color === void 0 ? 'default' : _ref4$color,
-    _ref4$size = _ref4.size,
-    size = _ref4$size === void 0 ? 'medium' : _ref4$size,
-    Icon = _ref4.icon,
-    _ref4$iconPosition = _ref4.iconPosition,
-    iconPosition = _ref4$iconPosition === void 0 ? 'left' : _ref4$iconPosition,
-    _ref4$isDisabled = _ref4.isDisabled,
-    isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled,
-    _ref4$isFullWidth = _ref4.isFullWidth,
-    isFullWidth = _ref4$isFullWidth === void 0 ? false : _ref4$isFullWidth,
-    _ref4$isLoading = _ref4.isLoading,
-    isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
-    onClick = _ref4.onClick,
-    onBlur = _ref4.onBlur,
-    onKeyDown = _ref4.onKeyDown,
-    _ref4$type = _ref4.type,
-    type = _ref4$type === void 0 ? 'button' : _ref4$type,
-    children = _ref4.children,
-    testID = _ref4.testID,
-    onFocus = _ref4.onFocus,
-    onMouseLeave = _ref4.onMouseLeave,
-    onMouseMove = _ref4.onMouseMove,
-    onPointerDown = _ref4.onPointerDown,
-    onPointerEnter = _ref4.onPointerEnter,
-    accessibilityProps = _ref4.accessibilityProps,
-    onTouchEnd = _ref4.onTouchEnd,
-    onTouchStart = _ref4.onTouchStart,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+var _BaseButton = function _BaseButton(_ref5, ref) {
+  var href = _ref5.href,
+    target = _ref5.target,
+    rel = _ref5.rel,
+    _ref5$variant = _ref5.variant,
+    variant = _ref5$variant === void 0 ? 'primary' : _ref5$variant,
+    _ref5$color = _ref5.color,
+    color = _ref5$color === void 0 ? 'primary' : _ref5$color,
+    _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 'medium' : _ref5$size,
+    Icon = _ref5.icon,
+    _ref5$iconPosition = _ref5.iconPosition,
+    iconPosition = _ref5$iconPosition === void 0 ? 'left' : _ref5$iconPosition,
+    _ref5$isDisabled = _ref5.isDisabled,
+    isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
+    _ref5$isFullWidth = _ref5.isFullWidth,
+    isFullWidth = _ref5$isFullWidth === void 0 ? false : _ref5$isFullWidth,
+    _ref5$isLoading = _ref5.isLoading,
+    isLoading = _ref5$isLoading === void 0 ? false : _ref5$isLoading,
+    onClick = _ref5.onClick,
+    onBlur = _ref5.onBlur,
+    onKeyDown = _ref5.onKeyDown,
+    _ref5$type = _ref5.type,
+    type = _ref5$type === void 0 ? 'button' : _ref5$type,
+    children = _ref5.children,
+    testID = _ref5.testID,
+    onFocus = _ref5.onFocus,
+    onMouseLeave = _ref5.onMouseLeave,
+    onMouseMove = _ref5.onMouseMove,
+    onPointerDown = _ref5.onPointerDown,
+    onPointerEnter = _ref5.onPointerEnter,
+    accessibilityProps = _ref5.accessibilityProps,
+    onTouchEnd = _ref5.onTouchEnd,
+    onTouchStart = _ref5.onTouchStart,
+    rest = _objectWithoutProperties(_ref5, _excluded);
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
   var isLink = Boolean(href);
   var childrenString = getStringFromReactText(children);
   // Button cannot be disabled when its rendered as Link
   var disabled = isLoading || isDisabled && !isLink;
-  var _useTheme = useTheme(),
-    theme = _useTheme.theme;
   if (true) {
     if (!Icon && !(childrenString !== null && childrenString !== void 0 && childrenString.trim())) {
       throwBladeError({
@@ -269,8 +278,6 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
       color: color,
       hasIcon: Boolean(Icon)
     }),
-    activeBorderColor = _getProps.activeBorderColor,
-    activeBackgroundColor = _getProps.activeBackgroundColor,
     defaultBorderColor = _getProps.defaultBorderColor,
     defaultBackgroundColor = _getProps.defaultBackgroundColor,
     minHeight = _getProps.minHeight,
@@ -314,8 +321,6 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
     variant: variant,
     isLoading: isLoading,
     disabled: disabled,
-    activeBorderColor: activeBorderColor,
-    activeBackgroundColor: activeBackgroundColor,
     defaultBorderColor: defaultBorderColor,
     minHeight: minHeight,
     buttonPaddingTop: buttonPaddingTop,
@@ -357,6 +362,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
       left: "0px",
       bottom: "0px",
       right: "0px",
+      zIndex: 1,
       children: /*#__PURE__*/jsx(BaseSpinner, {
         accessibilityLabel: "Loading",
         size: spinnerSize,
@@ -369,6 +375,7 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
       justifyContent: "center",
       flex: 1,
       isHidden: isLoading,
+      zIndex: 1,
       children: [Icon && iconPosition == 'left' ? /*#__PURE__*/jsx(BaseBox, {
         paddingRight: iconPadding,
         display: "flex",
@@ -380,8 +387,13 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
         })
       }) : null, text ? /*#__PURE__*/jsx(BaseText, {
         lineHeight: lineHeight,
-        fontSize: fontSize,
-        fontWeight: "bold",
+        fontSize: fontSize
+        // figma and web have different font-smoothing properties
+        // which causes web version of button text to look much bolder
+        // than figma version. To fix this we are changing font-weight from 600 to 500
+        // https://forum.figma.com/t/why-does-a-font-weight-in-figma-seem-lighter-than-the-same-weight-in-the-browser/2207
+        ,
+        fontWeight: "medium",
         textAlign: "center",
         color: textColor,
         children: text