npm - @razorpay/blade - Versions diffs - 11.8.2 → 11.9.1 - Mend

@razorpay/blade 11.8.2 → 11.9.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.

Files changed (230) hide show

package/build/lib/native/components/Checkbox/Checkbox.js CHANGED Viewed

@@ -3,7 +3,7 @@ import React__default from 'react';
 import { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext.js';
 import { CheckboxIcon } from './CheckboxIcon/CheckboxIcon.js';
 import { useCheckbox } from './useCheckbox.js';
-import { checkboxHoverTokens } from './checkboxTokens.js';
+import { checkboxSizes, checkboxHoverTokens } from './checkboxTokens.js';
 import isEmpty from '../../utils/lodashButBetter/isEmpty.js';
 import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
@@ -14,7 +14,8 @@ import 'react-native';
 import '../../tokens/global/typography.js';
 import '../../tokens/global/motion.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
-import '../BladeProvider/useTheme.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import useTheme from '../BladeProvider/useTheme.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
 import { FormHint } from '../Form/FormHint.js';
 import '../VisuallyHidden/VisuallyHidden.native.js';
@@ -37,7 +38,7 @@ var _excluded=["defaultChecked","validationState","isChecked","isDisabled","isIn
         <Checkbox value="apple">Apple</Checkbox>
         <Checkbox value="mango">Mango</Checkbox>
       </CheckboxGroup>
-      `);}}var _validationState=validationState!=null?validationState:groupProps==null?void 0:groupProps.validationState;var _hasError=_validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=Boolean(isRequired||(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required');var _name=name!=null?name:groupProps==null?void 0:groupProps.name;var _isChecked=isChecked!=null?isChecked:groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var isSmall=_size==='small';var showSupportingText=validationState!=='error'&&helpText;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,event=_ref2.event,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}onChange==null?void 0:onChange({isChecked:isChecked,event:event,value:value});};var _useCheckbox=useCheckbox({defaultChecked:defaultChecked,isChecked:_isChecked,isIndeterminate:isIndeterminate,hasError:_hasError,hasHelperText:Boolean(showSupportingText),isDisabled:_isDisabled,isRequired:_isRequired,name:_name,value:value,onChange:handleChange}),state=_useCheckbox.state,ids=_useCheckbox.ids,inputProps=_useCheckbox.inputProps;return jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.Checkbox,testID:testID}),getStyledProps(styledProps),{children:[jsx(SelectorLabel,{componentName:MetaConstants.CheckboxLabel,inputProps:state.isReactNative?inputProps:{},children:jsxs(BaseBox,{display:"flex",flexDirection:"column",children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",children:[jsx(SelectorInput,{hoverTokens:checkboxHoverTokens,isChecked:state.isChecked||Boolean(isIndeterminate),isDisabled:_isDisabled,hasError:_hasError,inputProps:inputProps,tabIndex:tabIndex,ref:ref}),jsx(CheckboxIcon,{size:_size,isChecked:state.isChecked,isIndeterminate:isIndeterminate,isDisabled:_isDisabled,isNegative:_hasError}),children?jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children}):null]}),showSupportingText?jsx(BaseBox,{marginLeft:isSmall?'spacing.6':'spacing.7',children:jsx(SelectorSupportText,{id:ids==null?void 0:ids.helpTextId,children:helpText})}):null]})}),jsx(FormHint,{errorText:errorText,errorTextId:ids==null?void 0:ids.errorTextId,type:validationState==='error'?'error':'help'})]}));};var Checkbox=assignWithoutSideEffects(React__default.forwardRef(_Checkbox),{displayName:'Checkbox'});
+      `);}}var _validationState=validationState!=null?validationState:groupProps==null?void 0:groupProps.validationState;var _hasError=_validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=Boolean(isRequired||(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required');var _name=name!=null?name:groupProps==null?void 0:groupProps.name;var _isChecked=isChecked!=null?isChecked:groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var _useTheme=useTheme(),theme=_useTheme.theme;var formHintSize={small:'medium',medium:'medium',large:'large'};var showSupportingText=validationState!=='error'&&helpText;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,event=_ref2.event,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}onChange==null?void 0:onChange({isChecked:isChecked,event:event,value:value});};var _useCheckbox=useCheckbox({defaultChecked:defaultChecked,isChecked:_isChecked,isIndeterminate:isIndeterminate,hasError:_hasError,hasHelperText:Boolean(showSupportingText),isDisabled:_isDisabled,isRequired:_isRequired,name:_name,value:value,onChange:handleChange}),state=_useCheckbox.state,ids=_useCheckbox.ids,inputProps=_useCheckbox.inputProps;var helpTextLeftSpacing=makeSize(checkboxSizes.icon[size].width+theme.spacing[3]);return jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.Checkbox,testID:testID}),getStyledProps(styledProps),{children:[jsx(SelectorLabel,{componentName:MetaConstants.CheckboxLabel,inputProps:state.isReactNative?inputProps:{},children:jsxs(BaseBox,{display:"flex",flexDirection:"column",children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",children:[jsx(SelectorInput,{hoverTokens:checkboxHoverTokens,isChecked:state.isChecked||Boolean(isIndeterminate),isDisabled:_isDisabled,hasError:_hasError,inputProps:inputProps,tabIndex:tabIndex,ref:ref}),jsx(CheckboxIcon,{size:_size,isChecked:state.isChecked,isIndeterminate:isIndeterminate,isDisabled:_isDisabled,isNegative:_hasError}),children?jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children}):null]}),showSupportingText?jsx(BaseBox,{marginLeft:helpTextLeftSpacing,children:jsx(SelectorSupportText,{size:_size,id:ids==null?void 0:ids.helpTextId,children:helpText})}):null]})}),jsx(FormHint,{size:formHintSize[_size],errorText:errorText,errorTextId:ids==null?void 0:ids.errorTextId,type:validationState==='error'?'error':'help'})]}));};var Checkbox=assignWithoutSideEffects(React__default.forwardRef(_Checkbox),{displayName:'Checkbox'});
 export { Checkbox };
 //# sourceMappingURL=Checkbox.js.map

package/build/lib/native/components/Checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-shadow /\nimport React from 'react';\nimport { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport { useCheckbox } from './useCheckbox';\nimport { checkboxHoverTokens } from './checkboxTokens';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint } from '~components/Form';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport { SelectorTitle } from '~components/Form/Selector/SelectorTitle';\nimport { SelectorSupportText } from '~components/Form/Selector/SelectorSupportText';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport type { BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\ntype OnChange = ({\n isChecked,\n event,\n value,\n}: {\n isChecked: boolean;\n event?: React.ChangeEvent;\n value?: string;\n}) => void;\n\ntype CheckboxProps = {\n /\n If `true`, The checkbox will be checked. This also makes the checkbox controlled\n * Use `onChange` to update its value\n \n @default false\n /\n isChecked?: boolean;\n /\n If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled\n \n @default false\n /\n defaultChecked?: boolean;\n /\n The callback invoked when the checked state of the `Checkbox` changes.\n /\n onChange?: OnChange;\n /\n Sets the label of the checkbox\n /\n children?: React.ReactNode;\n /\n Help text for the checkbox\n /\n helpText?: string;\n /\n Error text for the checkbox\n \n Renders when `validationState` is set to 'error'\n /\n errorText?: string;\n /\n If `true`, the checkbox will be indeterminate.\n * This does not modify the isChecked property.\n \n @default false\n /\n isIndeterminate?: boolean;\n /\n The name of the input field in a checkbox\n * (Useful for form submission).\n /\n name?: string;\n /\n The value to be used in the checkbox input.\n * This is the value that will be returned on form submission.\n /\n value?: string;\n /\n If `true`, the checkbox will be disabled\n \n @default false\n /\n isDisabled?: boolean;\n /\n If `true`, the checkbox input is marked as required,\n * and `required` attribute will be added\n \n @default false\n /\n isRequired?: boolean;\n /\n If `error`, the checkbox input is marked as invalid,\n * and `invalid` attribute will be added\n /\n validationState?: 'error' \| 'none';\n /\n Size of the checkbox\n \n @default \"medium\"\n /\n size?: 'small' \| 'medium';\n /\n Sets the tab-index property on checkbox element\n \n /\n tabIndex?: number;\n} & TestID &\n StyledPropsBlade;\n\nconst _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps> = (\n {\n defaultChecked,\n validationState,\n isChecked,\n isDisabled,\n isIndeterminate,\n isRequired,\n name,\n onChange,\n value,\n children,\n helpText,\n errorText,\n size = 'medium',\n tabIndex,\n testID,\n ...styledProps\n },\n ref,\n) => {\n const groupProps = useCheckboxGroupContext();\n\n // ban certain props in checkbox while inside group\n const hasValidationState = !isUndefined(validationState);\n const hasName = !isUndefined(name);\n const hasDefaultChecked = !isUndefined(defaultChecked);\n const hasIsChecked = !isUndefined(isChecked);\n const hasOnChange = !isUndefined(onChange);\n\n if (__DEV__) {\n if (\n (hasValidationState \|\| hasName \|\| hasDefaultChecked \|\| hasIsChecked \|\| hasOnChange) &&\n !isEmpty(groupProps)\n ) {\n const props = [\n hasValidationState ? 'validationState' : undefined,\n hasName ? 'name' : undefined,\n hasDefaultChecked ? 'defaultChecked' : undefined,\n hasIsChecked ? 'isChecked' : undefined,\n hasOnChange ? 'onChange' : undefined,\n ]\n .filter(Boolean)\n .join(',');\n\n throwBladeError({\n message: `Cannot set \\`${props}\\` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself`,\n moduleName: 'Checkbox',\n });\n }\n\n // mandate value prop when using inside group\n if (!value && !isEmpty(groupProps)) {\n throw new Error(\n `[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique \"value\" prop to each <Checkbox />\n <CheckboxGroup>\n <Checkbox value=\"apple\">Apple</Checkbox>\n <Checkbox value=\"mango\">Mango</Checkbox>\n </CheckboxGroup>\n `,\n );\n }\n }\n\n const _validationState = validationState ?? groupProps?.validationState;\n const _hasError = _validationState === 'error';\n const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n const _isRequired = Boolean(\n isRequired \|\| groupProps?.isRequired \|\| groupProps?.necessityIndicator === 'required',\n );\n const _name = name ?? groupProps?.name;\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n const _isChecked = isChecked ?? groupProps?.state?.isChecked(value!);\n const _size = groupProps.size ?? size;\n const isSmall = _size === 'small';\n\n // only show error when the self validation is set to error\n // Since we don't want to show errorText inside the group\n const showSupportingText = validationState !== 'error' && helpText;\n\n const handleChange: OnChange = ({ isChecked, event, value }) => {\n if (isChecked) {\n groupProps?.state?.addValue(value!);\n } else {\n groupProps?.state?.removeValue(value!);\n }\n\n onChange?.({ isChecked, event, value });\n };\n\n const { state, ids, inputProps } = useCheckbox({\n defaultChecked,\n isChecked: _isChecked,\n isIndeterminate,\n hasError: _hasError,\n hasHelperText: Boolean(showSupportingText),\n isDisabled: _isDisabled,\n isRequired: _isRequired,\n name: _name,\n value,\n onChange: handleChange,\n });\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.Checkbox, testID })}\n {...getStyledProps(styledProps)}\n >\n <SelectorLabel\n componentName={MetaConstants.CheckboxLabel}\n inputProps={state.isReactNative ? inputProps : {}}\n >\n <BaseBox display=\"flex\" flexDirection=\"column\">\n <BaseBox display=\"flex\" flexDirection=\"row\">\n <SelectorInput\n hoverTokens={checkboxHoverTokens}\n isChecked={state.isChecked \|\| Boolean(isIndeterminate)}\n isDisabled={_isDisabled}\n hasError={_hasError}\n inputProps={inputProps}\n tabIndex={tabIndex}\n ref={ref}\n />\n <CheckboxIcon\n size={_size}\n isChecked={state.isChecked}\n isIndeterminate={isIndeterminate}\n isDisabled={_isDisabled}\n isNegative={_hasError}\n />\n {children ? (\n <SelectorTitle size={_size} isDisabled={_isDisabled}>\n {children}\n </SelectorTitle>\n ) : null}\n </BaseBox>\n {showSupportingText ? (\n <BaseBox marginLeft={isSmall ? 'spacing.6' : 'spacing.7'}>\n <SelectorSupportText id={ids?.helpTextId}>{helpText}</SelectorSupportText>\n </BaseBox>\n ) : null}\n </BaseBox>\n </SelectorLabel>\n <FormHint\n errorText={errorText}\n errorTextId={ids?.errorTextId}\n type={validationState === 'error' ? 'error' : 'help'}\n />\n </BaseBox>\n );\n};\n\nconst Checkbox = assignWithoutSideEffects(React.forwardRef(_Checkbox), {\n displayName: 'Checkbox',\n});\n\nexport type { CheckboxProps };\nexport { Checkbox };\n"],"names":["_Checkbox","_ref","ref","_groupProps$state","_groupProps$size","defaultChecked","validationState","isChecked","isDisabled","isIndeterminate","isRequired","name","onChange","value","children","helpText","errorText","_ref$size","size","tabIndex","testID","styledProps","_objectWithoutProperties","_excluded","groupProps","useCheckboxGroupContext","hasValidationState","isUndefined","hasName","hasDefaultChecked","hasIsChecked","hasOnChange","__DEV__","isEmpty","props","undefined","filter","Boolean","join","throwBladeError","message","moduleName","Error","_validationState","_hasError","_isDisabled","_isRequired","necessityIndicator","_name","_isChecked","state","_size","isSmall","showSupportingText","handleChange","_ref2","event","_groupProps$state2","addValue","_groupProps$state3","removeValue","_useCheckbox","useCheckbox","hasError","hasHelperText","ids","inputProps","_jsxs","BaseBox","Object","assign","metaAttribute","MetaConstants","Checkbox","getStyledProps","_jsx","SelectorLabel","componentName","CheckboxLabel","isReactNative","display","flexDirection","SelectorInput","hoverTokens","checkboxHoverTokens","CheckboxIcon","isNegative","SelectorTitle","marginLeft","SelectorSupportText","id","helpTextId","FormHint","errorTextId","type","assignWithoutSideEffects","React","forwardRef","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands /\n/ eslint-disable @typescript-eslint/no-shadow /\nimport React from 'react';\nimport { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport { useCheckbox } from './useCheckbox';\nimport { checkboxHoverTokens, checkboxSizes } from './checkboxTokens';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint } from '~components/Form';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport { SelectorTitle } from '~components/Form/Selector/SelectorTitle';\nimport { SelectorSupportText } from '~components/Form/Selector/SelectorSupportText';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport type { BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { makeSize, useTheme } from '~utils';\n\ntype OnChange = ({\n isChecked,\n event,\n value,\n}: {\n isChecked: boolean;\n event?: React.ChangeEvent;\n value?: string;\n}) => void;\n\ntype CheckboxProps = {\n /\n If `true`, The checkbox will be checked. This also makes the checkbox controlled\n * Use `onChange` to update its value\n \n @default false\n /\n isChecked?: boolean;\n /\n If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled\n \n @default false\n /\n defaultChecked?: boolean;\n /\n The callback invoked when the checked state of the `Checkbox` changes.\n /\n onChange?: OnChange;\n /\n Sets the label of the checkbox\n /\n children?: React.ReactNode;\n /\n Help text for the checkbox\n /\n helpText?: string;\n /\n Error text for the checkbox\n \n Renders when `validationState` is set to 'error'\n /\n errorText?: string;\n /\n If `true`, the checkbox will be indeterminate.\n * This does not modify the isChecked property.\n \n @default false\n /\n isIndeterminate?: boolean;\n /\n The name of the input field in a checkbox\n * (Useful for form submission).\n /\n name?: string;\n /\n The value to be used in the checkbox input.\n * This is the value that will be returned on form submission.\n /\n value?: string;\n /\n If `true`, the checkbox will be disabled\n \n @default false\n /\n isDisabled?: boolean;\n /\n If `true`, the checkbox input is marked as required,\n * and `required` attribute will be added\n \n @default false\n /\n isRequired?: boolean;\n /\n If `error`, the checkbox input is marked as invalid,\n * and `invalid` attribute will be added\n /\n validationState?: 'error' \| 'none';\n /\n Size of the checkbox\n \n @default \"medium\"\n /\n size?: 'small' \| 'medium' \| 'large';\n /\n Sets the tab-index property on checkbox element\n \n /\n tabIndex?: number;\n} & TestID &\n StyledPropsBlade;\n\nconst _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps> = (\n {\n defaultChecked,\n validationState,\n isChecked,\n isDisabled,\n isIndeterminate,\n isRequired,\n name,\n onChange,\n value,\n children,\n helpText,\n errorText,\n size = 'medium',\n tabIndex,\n testID,\n ...styledProps\n },\n ref,\n) => {\n const groupProps = useCheckboxGroupContext();\n\n // ban certain props in checkbox while inside group\n const hasValidationState = !isUndefined(validationState);\n const hasName = !isUndefined(name);\n const hasDefaultChecked = !isUndefined(defaultChecked);\n const hasIsChecked = !isUndefined(isChecked);\n const hasOnChange = !isUndefined(onChange);\n\n if (__DEV__) {\n if (\n (hasValidationState \|\| hasName \|\| hasDefaultChecked \|\| hasIsChecked \|\| hasOnChange) &&\n !isEmpty(groupProps)\n ) {\n const props = [\n hasValidationState ? 'validationState' : undefined,\n hasName ? 'name' : undefined,\n hasDefaultChecked ? 'defaultChecked' : undefined,\n hasIsChecked ? 'isChecked' : undefined,\n hasOnChange ? 'onChange' : undefined,\n ]\n .filter(Boolean)\n .join(',');\n\n throwBladeError({\n message: `Cannot set \\`${props}\\` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself`,\n moduleName: 'Checkbox',\n });\n }\n\n // mandate value prop when using inside group\n if (!value && !isEmpty(groupProps)) {\n throw new Error(\n `[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique \"value\" prop to each <Checkbox />\n <CheckboxGroup>\n <Checkbox value=\"apple\">Apple</Checkbox>\n <Checkbox value=\"mango\">Mango</Checkbox>\n </CheckboxGroup>\n `,\n );\n }\n }\n\n const _validationState = validationState ?? groupProps?.validationState;\n const _hasError = _validationState === 'error';\n const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n const _isRequired = Boolean(\n isRequired \|\| groupProps?.isRequired \|\| groupProps?.necessityIndicator === 'required',\n );\n const _name = name ?? groupProps?.name;\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n const _isChecked = isChecked ?? groupProps?.state?.isChecked(value!);\n const _size = groupProps.size ?? size;\n const { theme } = useTheme();\n const formHintSize = {\n small: 'medium',\n medium: 'medium',\n large: 'large',\n } as const;\n\n // only show error when the self validation is set to error\n // Since we don't want to show errorText inside the group\n const showSupportingText = validationState !== 'error' && helpText;\n\n const handleChange: OnChange = ({ isChecked, event, value }) => {\n if (isChecked) {\n groupProps?.state?.addValue(value!);\n } else {\n groupProps?.state?.removeValue(value!);\n }\n\n onChange?.({ isChecked, event, value });\n };\n\n const { state, ids, inputProps } = useCheckbox({\n defaultChecked,\n isChecked: _isChecked,\n isIndeterminate,\n hasError: _hasError,\n hasHelperText: Boolean(showSupportingText),\n isDisabled: _isDisabled,\n isRequired: _isRequired,\n name: _name,\n value,\n onChange: handleChange,\n });\n\n // Checkbox icon's size & margin + margin-left of SelectorTitle which is 2\n const helpTextLeftSpacing = makeSize(checkboxSizes.icon[size].width + theme.spacing[3]);\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.Checkbox, testID })}\n {...getStyledProps(styledProps)}\n >\n <SelectorLabel\n componentName={MetaConstants.CheckboxLabel}\n inputProps={state.isReactNative ? inputProps : {}}\n >\n <BaseBox display=\"flex\" flexDirection=\"column\">\n <BaseBox display=\"flex\" flexDirection=\"row\">\n <SelectorInput\n hoverTokens={checkboxHoverTokens}\n isChecked={state.isChecked \|\| Boolean(isIndeterminate)}\n isDisabled={_isDisabled}\n hasError={_hasError}\n inputProps={inputProps}\n tabIndex={tabIndex}\n ref={ref}\n />\n <CheckboxIcon\n size={_size}\n isChecked={state.isChecked}\n isIndeterminate={isIndeterminate}\n isDisabled={_isDisabled}\n isNegative={_hasError}\n />\n {children ? (\n <SelectorTitle size={_size} isDisabled={_isDisabled}>\n {children}\n </SelectorTitle>\n ) : null}\n </BaseBox>\n {showSupportingText ? (\n <BaseBox marginLeft={helpTextLeftSpacing}>\n <SelectorSupportText size={_size} id={ids?.helpTextId}>\n {helpText}\n </SelectorSupportText>\n </BaseBox>\n ) : null}\n </BaseBox>\n </SelectorLabel>\n <FormHint\n size={formHintSize[_size]}\n errorText={errorText}\n errorTextId={ids?.errorTextId}\n type={validationState === 'error' ? 'error' : 'help'}\n />\n </BaseBox>\n );\n};\n\nconst Checkbox = assignWithoutSideEffects(React.forwardRef(_Checkbox), {\n displayName: 'Checkbox',\n});\n\nexport type { CheckboxProps };\nexport { Checkbox };\n"],"names":["_Checkbox","_ref","ref","_groupProps$state","_groupProps$size","defaultChecked","validationState","isChecked","isDisabled","isIndeterminate","isRequired","name","onChange","value","children","helpText","errorText","_ref$size","size","tabIndex","testID","styledProps","_objectWithoutProperties","_excluded","groupProps","useCheckboxGroupContext","hasValidationState","isUndefined","hasName","hasDefaultChecked","hasIsChecked","hasOnChange","__DEV__","isEmpty","props","undefined","filter","Boolean","join","throwBladeError","message","moduleName","Error","_validationState","_hasError","_isDisabled","_isRequired","necessityIndicator","_name","_isChecked","state","_size","_useTheme","useTheme","theme","formHintSize","small","medium","large","showSupportingText","handleChange","_ref2","event","_groupProps$state2","addValue","_groupProps$state3","removeValue","_useCheckbox","useCheckbox","hasError","hasHelperText","ids","inputProps","helpTextLeftSpacing","makeSize","checkboxSizes","icon","width","spacing","_jsxs","BaseBox","Object","assign","metaAttribute","MetaConstants","Checkbox","getStyledProps","_jsx","SelectorLabel","componentName","CheckboxLabel","isReactNative","display","flexDirection","SelectorInput","hoverTokens","checkboxHoverTokens","CheckboxIcon","isNegative","SelectorTitle","marginLeft","SelectorSupportText","id","helpTextId","FormHint","errorTextId","type","assignWithoutSideEffects","React","forwardRef","displayName"],"mappings":"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"}

package/build/lib/native/components/Checkbox/CheckboxGroup/CheckboxGroup.js CHANGED Viewed

@@ -21,7 +21,7 @@ import 'react-native-gesture-handler';
 import '../../BottomSheet/BottomSheetStack.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","testID"];var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,name:name,labelPosition:labelPosition,validationState:validationState,size:size}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`,${showError?errorText:''} ${showHelpText?helpText:''}`;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var gap=checkboxSizes.group.gap[size][matchedDeviceType];var childCount=React__default.Children.count(children);return jsx(CheckboxGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({},getStyledProps(styledProps),{children:jsxs(SelectorGroupField,{position:labelPosition,labelledBy:ids.labelId,componentName:"checkbox-group",testID:testID,children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,children:label}):null,jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:"column",children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{marginBottom:index===childCount-1?makeSize(0):gap,children:child},index);})}),jsx(FormHint,{errorText:errorText,helpText:helpText,type:validationState==='error'?'error':'help'})]})]})}))});};
+var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","testID"];var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,name:name,labelPosition:labelPosition,validationState:validationState,size:size}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`,${showError?errorText:''} ${showHelpText?helpText:''}`;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var gap=checkboxSizes.group.gap[size][matchedDeviceType];var childCount=React__default.Children.count(children);return jsx(CheckboxGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({},getStyledProps(styledProps),{children:jsxs(SelectorGroupField,{position:labelPosition,labelledBy:ids.labelId,componentName:"checkbox-group",testID:testID,children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,size:size,children:label}):null,jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:"column",children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{marginBottom:index===childCount-1?makeSize(0):gap,children:child},index);})}),jsx(FormHint,{size:size,errorText:errorText,helpText:helpText,type:validationState==='error'?'error':'help'})]})]})}))});};
 export { CheckboxGroup };
 //# sourceMappingURL=CheckboxGroup.js.map

package/build/lib/native/components/Checkbox/CheckboxGroup/CheckboxGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\n\ntype CheckboxGroupProps = {\n /*\n Accepts multiple checkboxes as children\n /\n children: React.ReactNode;\n /\n Help text of the checkbox group\n /\n helpText?: string;\n /\n Error text of the checkbox group\n * Renders when `validationState` is set to 'error'\n \n Overrides helpText\n /\n errorText?: string;\n /\n Sets the error state of the CheckboxGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every checkbox\n /\n validationState?: 'error' \| 'none';\n /\n Renders a necessity indicator after CheckboxGroup label\n \n If set to `undefined` it renders nothing.\n /\n necessityIndicator?: 'required' \| 'optional' \| 'none';\n /\n Sets the disabled state of the CheckboxGroup\n * If set to `true` it propagate down to all the checkboxes\n \n @default false\n /\n isDisabled?: boolean;\n /\n Sets the required state of the CheckboxGroup\n * @default false\n /\n isRequired?: boolean;\n /\n Renders the label of the checkbox group\n /\n label?: string;\n /\n Sets the position of the label\n \n @default 'top'\n /\n labelPosition?: 'top' \| 'left';\n /\n Initial value of the checkbox group\n /\n defaultValue?: string[];\n /\n value of the checkbox group\n \n Use `onChange` to update its value\n /\n value?: string[];\n /\n The callback invoked when any of the checkbox's state changes\n /\n onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n /\n The name of the input field in a checkbox\n * (Useful for form submission).\n /\n name?: string;\n /\n Size of the checkbox\n \n @default \"medium\"\n */\n size?: 'small' \| 'medium';\n} & TestID &\n StyledPropsBlade;\n\nconst CheckboxGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState,\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n testID,\n ...styledProps\n}: CheckboxGroupProps): React.ReactElement => {\n const { contextValue, ids } = useCheckboxGroup({\n defaultValue,\n onChange,\n value,\n isDisabled,\n necessityIndicator,\n isRequired,\n name,\n labelPosition,\n validationState,\n size,\n });\n\n const { theme } = useTheme();\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n const childCount = React.Children.count(children);\n\n return (\n <CheckboxGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(styledProps)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n componentName=\"checkbox-group\"\n testID={testID}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox display=\"flex\" flexDirection=\"column\">\n {React.Children.map(children, (child, index) => {\n return (\n <BaseBox\n key={index}\n {...{ marginBottom: index === childCount - 1 ? makeSize(0) : gap }}\n >\n {child}\n </BaseBox>\n );\n })}\n </BaseBox>\n <FormHint\n errorText={errorText}\n helpText={helpText}\n type={validationState === 'error' ? 'error' : 'help'}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </CheckboxGroupProvider>\n );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","childCount","React","Children","count","_jsx","CheckboxGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","FormLabel","as","id","display","flexDirection","map","child","index","marginBottom","makeSize","FormHint","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,UAAA,CAAA,OAAA,CAAA,UAAA,CAAA,YAAA,CAAA,YAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,iBAAA,CAAA,WAAA,CAAA,MAAA,CAAA,cAAA,CAAA,UAAA,CAAA,OAAA,CAAA,MAAA,CAAA,QAAA,CAAA,CA6FM,IAAAA,aAAa,CAAG,SAAhBA,aAAaA,CAAAC,IAAA,CAiB2B,~~CAhB5C~~,~~IAAAC~~,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,KAAK,CAAAF,IAAA,CAALE,KAAK,CACLC,QAAQ,CAAAH,IAAA,CAARG,QAAQ,CAAAC,eAAA,CAAAJ,IAAA,CACRK,UAAU,CAAVA,UAAU,CAAAD,eAAA,~~GAAA~~,KAAA,CAAA,~~CAAG~~,KAAK,CAAAA,eAAA,CAAAE,eAAA,CAAAN,IAAA,CAClBO,UAAU,CAAVA,UAAU,CAAAD,eAAA,GAAG,KAAA,CAAA,CAAA,KAAK,CAAAA,eAAA,CAAAE,qBAAA,CAAAR,IAAA,CAClBS,kBAAkB,CAAlBA,kBAAkB,CAAAD,qBAAA,~~UAAG~~,MAAM,CAAAA,qBAAA,CAAAE,kBAAA,CAAAV,IAAA,CAC3BW,aAAa,CAAbA,aAAa,CAAAD,kBAAA,GAAG,KAAA,CAAA,CAAA,KAAK,CAAAA,kBAAA,CACrBE,eAAe,CAAAZ,IAAA,CAAfY,eAAe,CACfC,SAAS,CAAAb,IAAA,CAATa,SAAS,CACTC,IAAI,CAAAd,IAAA,CAAJc,IAAI,CACJC,YAAY,CAAAf,IAAA,CAAZe,YAAY,CACZC,QAAQ,CAAAhB,IAAA,CAARgB,QAAQ,CACRC,KAAK,CAAAjB,IAAA,CAALiB,KAAK,CAAAC,SAAA,CAAAlB,IAAA,CACLmB,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAA,KAAA,CAAA,CAAG,QAAQ,CAAAA,SAAA,CACfE,MAAM,CAAApB,IAAA,CAANoB,MAAM,CACHC,WAAW,CAAAC,wBAAA,CAAAtB,IAAA,CAAAuB,SAAA,CAEd,~~CAAA,~~IAAAC,iBAAA,CAA8BC,gBAAgB,CAAC,CAC7CV,YAAY,CAAZA,YAAY,CACZC,QAAQ,CAARA,QAAQ,CACRC,KAAK,CAALA,KAAK,CACLZ,UAAU,CAAVA,UAAU,CACVI,kBAAkB,CAAlBA,kBAAkB,CAClBF,UAAU,CAAVA,UAAU,CACVO,IAAI,CAAJA,IAAI,CACJH,aAAa,CAAbA,aAAa,CACbC,eAAe,CAAfA,eAAe,CACfO,IAAI,CAAJA,IACF,CAAC,CAAC,CAXMO,YAAY,CAAAF,iBAAA,CAAZE,YAAY,CAAEC,GAAG,CAAAH,iBAAA,CAAHG,GAAG,CAazB,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,SAAS,CAAGnB,eAAe,GAAK,OAAO,EAAIC,SAAS,CAC1D,IAAMmB,YAAY,CAAG,CAACD,SAAS,EAAI5B,QAAQ,CAC3C,IAAM8B,iBAAiB,CAAI,CAAGF,CAAAA,EAAAA,SAAS,CAAGlB,SAAS,CAAG,EAAG,CAAGmB,CAAAA,EAAAA,YAAY,CAAG7B,QAAQ,CAAG,EAAG,CAAA,~~CAAC,~~CAC1F,IAAA+B,cAAA,CAA8BC,aAAa,CAAC,CAAEC,WAAW,CAAEN,KAAK,CAACM,WAAY,CAAC,CAAC,CAAvEC,iBAAiB,CAAAH,cAAA,CAAjBG,iBAAiB,CACzB,IAAMC,GAAG,CAAGC,aAAa,CAACC,KAAK,CAACF,GAAG,CAACnB,IAAI,CAAC,CAACkB,iBAAiB,CAAC,CAC5D,IAAMI,UAAU,CAAGC,cAAK,CAACC,QAAQ,CAACC,KAAK,CAAC3C,QAAQ,CAAC,CAEjD,OACE4C,GAAA,CAACC,qBAAqB,CAAC7B,~~CAAAA,~~KAAK,CAAES,YAAa,CAAAzB,QAAA,CACzC4C,GAAA,CAACE,OAAO,CAAAC,MAAA,CAAAC,MAAA,~~CAAA~~,~~EAAA~~,~~CAAKC~~,cAAc,CAAC7B,WAAW,CAAC,CAAApB,CAAAA,QAAA,CACtCkD,IAAA,CAACC,kBAAkB,CACjBC,CAAAA,QAAQ,CAAE1C,aAAc,CACxB2C,UAAU,CAAE3B,GAAG,CAAC4B,OAAQ,CACxBC,aAAa,CAAC,gBAAgB,CAC9BpC,MAAM,CAAEA,MAAO,CAAAnB,QAAA,~~EAEdC~~,KAAK,CACJ2C,GAAA,CAACY,SAAS,~~CAAA~~,~~CACRC,~~EAAE,CAAC,MAAM,CACTjD,kBAAkB,CAAEA,kBAAmB,CACvC4C,QAAQ,CAAE1C,aAAc,CACxBgD,EAAE,CAAEhC,GAAG,CAAC4B,OAAQ,CAChBtB,iBAAiB,CAAEA,iBAAkB,~~CAAAhC~~,QAAA,~~CAEpCC~~,KAAK,CACG,CAAC,CACV,IAAI,CACRiD,IAAA,CAACJ,OAAO,~~CAAA,~~CAAA9C,QAAA,~~CAAA,~~CACN4C,GAAA,CAACE,OAAO,~~CAAA,~~CAACa,OAAO,CAAC,MAAM,CAACC,aAAa,CAAC,QAAQ,CAAA5D,QAAA,CAC3CyC,cAAK,CAACC,QAAQ,CAACmB,GAAG,CAAC7D,QAAQ,CAAE,SAAC8D,KAAK,CAAEC,KAAK,CAAK,CAC9C,OACEnB,GAAA,CAACE,OAAO,CAEAkB,~~CAAAA,~~YAAY,CAAED,KAAK,GAAKvB,UAAU,CAAG,CAAC,CAAGyB,QAAQ,CAAC,CAAC,CAAC,CAAG5B,GAAG,CAAArC,QAAA,CAE/D8D,KAAK,CAHDC,~~CAAAA,~~KAIE,CAAC,CAEd,CAAC,CAAC,CACK,CAAC,CACVnB,GAAA,CAACsB,QAAQ,~~CAAA~~,~~CACPtD~~,SAAS,CAAEA,SAAU,CACrBV,QAAQ,CAAEA,QAAS,CACnBiE,IAAI,CAAExD,eAAe,GAAK,OAAO,CAAG,OAAO,CAAG,MAAO,CACtD,CAAC,CACK,CAAA,CAAC,EACQ,CAAC,CAAA,CACd,CAAC,CACW,CAAC,CAE5B;;;;"}
1	+ {"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\n\ntype CheckboxGroupProps = {\n /*\n Accepts multiple checkboxes as children\n /\n children: React.ReactNode;\n /\n Help text of the checkbox group\n /\n helpText?: string;\n /\n Error text of the checkbox group\n * Renders when `validationState` is set to 'error'\n \n Overrides helpText\n /\n errorText?: string;\n /\n Sets the error state of the CheckboxGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every checkbox\n /\n validationState?: 'error' \| 'none';\n /\n Renders a necessity indicator after CheckboxGroup label\n \n If set to `undefined` it renders nothing.\n /\n necessityIndicator?: 'required' \| 'optional' \| 'none';\n /\n Sets the disabled state of the CheckboxGroup\n * If set to `true` it propagate down to all the checkboxes\n \n @default false\n /\n isDisabled?: boolean;\n /\n Sets the required state of the CheckboxGroup\n * @default false\n /\n isRequired?: boolean;\n /\n Renders the label of the checkbox group\n /\n label?: string;\n /\n Sets the position of the label\n \n @default 'top'\n /\n labelPosition?: 'top' \| 'left';\n /\n Initial value of the checkbox group\n /\n defaultValue?: string[];\n /\n value of the checkbox group\n \n Use `onChange` to update its value\n /\n value?: string[];\n /\n The callback invoked when any of the checkbox's state changes\n /\n onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n /\n The name of the input field in a checkbox\n * (Useful for form submission).\n /\n name?: string;\n /\n Size of the checkbox\n \n @default \"medium\"\n */\n size?: 'small' \| 'medium' \| 'large';\n} & TestID &\n StyledPropsBlade;\n\nconst CheckboxGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState,\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n testID,\n ...styledProps\n}: CheckboxGroupProps): React.ReactElement => {\n const { contextValue, ids } = useCheckboxGroup({\n defaultValue,\n onChange,\n value,\n isDisabled,\n necessityIndicator,\n isRequired,\n name,\n labelPosition,\n validationState,\n size,\n });\n\n const { theme } = useTheme();\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n const childCount = React.Children.count(children);\n\n return (\n <CheckboxGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(styledProps)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n componentName=\"checkbox-group\"\n testID={testID}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox display=\"flex\" flexDirection=\"column\">\n {React.Children.map(children, (child, index) => {\n return (\n <BaseBox\n key={index}\n {...{ marginBottom: index === childCount - 1 ? makeSize(0) : gap }}\n >\n {child}\n </BaseBox>\n );\n })}\n </BaseBox>\n <FormHint\n size={size}\n errorText={errorText}\n helpText={helpText}\n type={validationState === 'error' ? 'error' : 'help'}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </CheckboxGroupProvider>\n );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","childCount","React","Children","count","_jsx","CheckboxGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","FormLabel","as","id","display","flexDirection","map","child","index","marginBottom","makeSize","FormHint","type"],"mappings":"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"}

package/build/lib/native/components/Checkbox/CheckboxIcon/CheckboxIcon.js CHANGED Viewed

@@ -19,7 +19,7 @@ import '../../../tokens/global/typography.js';
 import '../../../tokens/global/motion.js';
 import { size } from '../../../tokens/global/size.js';
-var svgSize={small:{width:size[8],height:size[8]},medium:{width:size[12],height:size[12]}};var CheckedIcon=function CheckedIcon(_ref){var color=_ref.color,size=_ref.size;var width=makeSpace(svgSize[size].width);var height=makeSpace(svgSize[size].height);return jsx(Svg,{width:width,height:height,viewBox:"0 0 8 8",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z",fill:color,stroke:color,strokeWidth:"0.5",strokeLinecap:"round",strokeLinejoin:"round"})});};var IndeterminateIcon=function IndeterminateIcon(_ref2){var color=_ref2.color,size=_ref2.size;var width=makeSpace(svgSize[size].width);var height=makeSpace(svgSize[size].height);return jsx(Svg,{width:width,height:height,viewBox:"0 0 8 8",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z",fill:color,stroke:color,strokeWidth:"0.5",strokeLinecap:"round",strokeLinejoin:"round"})});};var CheckboxIcon=function CheckboxIcon(_ref3){var isChecked=_ref3.isChecked,isIndeterminate=_ref3.isIndeterminate,isDisabled=_ref3.isDisabled,isNegative=_ref3.isNegative,size=_ref3.size;var _useTheme=useTheme(),theme=_useTheme.theme;var iconColor=getIn(theme,'colors.interactive.icon.onPrimary.normal');return jsxs(CheckboxIconWrapper,Object.assign({size:size,isIndeterminate:isIndeterminate,isDisabled:isDisabled,isNegative:isNegative,isChecked:!!(isChecked||isIndeterminate)},metaAttribute({name:'checkbox-icon-wrapper'}),{children:[jsx(Fade,{show:isIndeterminate,styles:{position:'absolute',display:'flex'},children:jsx(IndeterminateIcon,{size:size,color:iconColor})}),jsx(Fade,{show:Boolean(isChecked)&&!isIndeterminate,styles:{position:'absolute',display:'flex'},children:isChecked?jsx(CheckedIcon,{size:size,color:iconColor}):null})]}));};
+var svgSize={small:{width:size[8],height:size[8]},medium:{width:size[12],height:size[12]},large:{width:size[16],height:size[16]}};var CheckedIcon=function CheckedIcon(_ref){var color=_ref.color,size=_ref.size;var width=makeSpace(svgSize[size].width);var height=makeSpace(svgSize[size].height);return jsx(Svg,{width:width,height:height,viewBox:"0 0 8 8",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z",fill:color,stroke:color,strokeWidth:"0.5",strokeLinecap:"round",strokeLinejoin:"round"})});};var IndeterminateIcon=function IndeterminateIcon(_ref2){var color=_ref2.color,size=_ref2.size;var width=makeSpace(svgSize[size].width);var height=makeSpace(svgSize[size].height);return jsx(Svg,{width:width,height:height,viewBox:"0 0 8 8",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z",fill:color,stroke:color,strokeWidth:"0.5",strokeLinecap:"round",strokeLinejoin:"round"})});};var CheckboxIcon=function CheckboxIcon(_ref3){var isChecked=_ref3.isChecked,isIndeterminate=_ref3.isIndeterminate,isDisabled=_ref3.isDisabled,isNegative=_ref3.isNegative,size=_ref3.size;var _useTheme=useTheme(),theme=_useTheme.theme;var iconColor=getIn(theme,'colors.interactive.icon.onPrimary.normal');return jsxs(CheckboxIconWrapper,Object.assign({size:size,isIndeterminate:isIndeterminate,isDisabled:isDisabled,isNegative:isNegative,isChecked:!!(isChecked||isIndeterminate)},metaAttribute({name:'checkbox-icon-wrapper'}),{children:[jsx(Fade,{show:isIndeterminate,styles:{position:'absolute',display:'flex'},children:jsx(IndeterminateIcon,{size:size,color:iconColor})}),jsx(Fade,{show:Boolean(isChecked)&&!isIndeterminate,styles:{position:'absolute',display:'flex'},children:isChecked?jsx(CheckedIcon,{size:size,color:iconColor}):null})]}));};
 export { CheckboxIcon };
 //# sourceMappingURL=CheckboxIcon.js.map

package/build/lib/native/components/Checkbox/CheckboxIcon/CheckboxIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxIcon.js","sources":["../../../../../../src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing /\n/ eslint-disable @typescript-eslint/explicit-function-return-type /\n/ eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { CheckboxIconWrapper } from './CheckboxIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg, { Path } from '~components/Icons/_Svg';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\n\nconst svgSize = {\n small: {\n width: size[8],\n height: size[8],\n },\n medium: {\n width: size[12],\n height: size[12],\n },\n};\n\nconst CheckedIcon = ({ color, size }: { color: string; size: 'small' \| 'medium' }) => {\n const width = makeSpace(svgSize[size].width);\n const height = makeSpace(svgSize[size].height);\n\n return (\n <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z\"\n fill={color}\n stroke={color}\n strokeWidth=\"0.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Svg>\n );\n};\n\nconst IndeterminateIcon = ({ color, size }: { color: string; size: 'small' \| 'medium' }) => {\n const width = makeSpace(svgSize[size].width);\n const height = makeSpace(svgSize[size].height);\n\n return (\n <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\"\n fill={color}\n stroke={color}\n strokeWidth=\"0.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Svg>\n );\n};\n\nexport type CheckboxIconProps = {\n isDisabled?: boolean;\n isNegative?: boolean;\n isChecked?: boolean;\n isIndeterminate?: boolean;\n size: 'small' \| 'medium';\n};\n\nconst CheckboxIcon = ({\n isChecked,\n isIndeterminate,\n isDisabled,\n isNegative,\n size,\n}: CheckboxIconProps) => {\n const { theme } = useTheme();\n const iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');\n return (\n <CheckboxIconWrapper\n size={size}\n isIndeterminate={isIndeterminate}\n isDisabled={isDisabled}\n isNegative={isNegative}\n isChecked={!!(isChecked \|\| isIndeterminate)}\n {...metaAttribute({ name: 'checkbox-icon-wrapper' })}\n >\n <Fade show={isIndeterminate} styles={{ position: 'absolute', display: 'flex' }}>\n <IndeterminateIcon size={size} color={iconColor} />\n </Fade>\n <Fade\n show={Boolean(isChecked) && !isIndeterminate}\n styles={{ position: 'absolute', display: 'flex' }}\n >\n {isChecked ? <CheckedIcon size={size} color={iconColor} /> : null}\n </Fade>\n </CheckboxIconWrapper>\n );\n};\n\nexport { CheckboxIcon };\n"],"names":["svgSize","small","width","size","height","medium","CheckedIcon","_ref","color","makeSpace","_jsx","Svg","viewBox","fill","children","Path","fillRule","clipRule","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","IndeterminateIcon","_ref2","CheckboxIcon","_ref3","isChecked","isIndeterminate","isDisabled","isNegative","_useTheme","useTheme","theme","iconColor","getIn","_jsxs","CheckboxIconWrapper","Object","assign","metaAttribute","name","Fade","show","styles","position","display","Boolean"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,OAAO,CAAG,CACdC,KAAK,CAAE,CACLC,KAAK,CAAEC,IAAI,CAAC,CAAC,CAAC,CACdC,MAAM,CAAED,IAAI,CAAC,CAAC,CAChB,CAAC,CACDE,MAAM,CAAE,CACNH,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CACF,CAAC,CAED,~~IAAMG~~,WAAW,CAAG,SAAdA,WAAWA,CAAAC,IAAA,~~CAAqE,~~CAA/D,IAAAC,KAAK,CAAAD,IAAA,CAALC,KAAK,~~CAAEL~~,IAAI,~~CAAAI~~,IAAA,~~CAAJJ~~,IAAI,CAChC,IAAMD,KAAK,~~CAAGO~~,SAAS,~~CAACT~~,OAAO,CAACG,IAAI,CAAC,CAACD,KAAK,CAAC,CAC5C,IAAME,MAAM,~~CAAGK~~,SAAS,~~CAACT~~,OAAO,CAACG,IAAI,CAAC,CAACC,MAAM,CAAC,CAE9C,~~OACEM~~,GAAA,CAACC,GAAG,~~CAACT~~,CAAAA,KAAK,CAAEA,KAAM,CAACE,MAAM,CAAEA,MAAO,~~CAACQ~~,OAAO,CAAC,SAAS,CAACC,IAAI,CAAC,MAAM,CAAAC,QAAA,CAC9DJ,GAAA,CAACK,IAAI,CAAA,CACHC,QAAQ,CAAC,SAAS,CAClBC,QAAQ,CAAC,SAAS,CAClBC,CAAC,CAAC,4TAA4T,CAC9TL,IAAI,CAAEL,KAAM,CACZW,MAAM,CAAEX,KAAM,CACdY,WAAW,CAAC,KAAK,CACjBC,aAAa,CAAC,OAAO,CACrBC,cAAc,CAAC,OAAO,CACvB,CAAC,CACC,CAAC,CAEV,CAAC,CAED,IAAMC,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAAC,KAAA,~~CAAqE~~,CAAA,~~IAA/DhB~~,KAAK,CAAAgB,KAAA,CAALhB,KAAK,~~CAAEL~~,IAAI,~~CAAAqB~~,KAAA,~~CAAJrB~~,IAAI,~~CACtC~~,IAAMD,KAAK,~~CAAGO~~,SAAS,~~CAACT~~,OAAO,CAACG,IAAI,CAAC,CAACD,KAAK,CAAC,CAC5C,IAAME,MAAM,~~CAAGK~~,SAAS,~~CAACT~~,OAAO,CAACG,IAAI,CAAC,CAACC,MAAM,CAAC,CAE9C,~~OACEM~~,GAAA,CAACC,GAAG,~~CAACT~~,~~CAAAA~~,KAAK,CAAEA,KAAM,CAACE,MAAM,CAAEA,MAAO,~~CAACQ~~,OAAO,CAAC,SAAS,CAACC,IAAI,CAAC,MAAM,CAAAC,QAAA,CAC9DJ,GAAA,CAACK,IAAI,CACHC,CAAAA,QAAQ,CAAC,SAAS,CAClBC,QAAQ,CAAC,SAAS,CAClBC,CAAC,CAAC,0NAA0N,CAC5NL,IAAI,CAAEL,KAAM,CACZW,MAAM,CAAEX,KAAM,CACdY,WAAW,CAAC,KAAK,CACjBC,aAAa,CAAC,OAAO,CACrBC,cAAc,CAAC,OAAO,CACvB,CAAC,CACC,CAAC,CAEV,CAAC,CAUK,IAAAG,YAAY,CAAG,SAAfA,YAAYA,CAAAC,KAAA,CAMO,~~CAAA~~,~~IALvBC~~,SAAS,CAAAD,KAAA,CAATC,SAAS,CACTC,eAAe,CAAAF,KAAA,CAAfE,eAAe,CACfC,UAAU,CAAAH,KAAA,CAAVG,UAAU,CACVC,UAAU,CAAAJ,KAAA,CAAVI,UAAU,~~CACV3B~~,IAAI,~~CAAAuB~~,KAAA,~~CAAJvB~~,IAAI,CAEJ,~~IAAA4B~~,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,SAAS,CAAGC,KAAK,CAACF,KAAK,CAAE,0CAA0C,CAAC,CAC1E,OACEG,IAAA,CAACC,mBAAmB,CAAAC,MAAA,CAAAC,MAAA,~~CAClBpC~~,~~CAAAA~~,IAAI,CAAEA,IAAK,~~CACXyB~~,eAAe,CAAEA,eAAgB,CACjCC,UAAU,CAAEA,UAAW,CACvBC,UAAU,CAAEA,UAAW,CACvBH,SAAS,CAAE,CAAC,EAAEA,SAAS,EAAIC,eAAe,CAAE,~~CAAA,~~CACxCY,aAAa,CAAC,CAAEC,IAAI,CAAE,uBAAwB,CAAC,CAAC,CAAA,CAAA3B,QAAA,CAAA,CAEpDJ,GAAA,CAACgC,IAAI,CAAA,CAACC,IAAI,CAAEf,eAAgB,CAACgB,MAAM,CAAE,CAAEC,QAAQ,CAAE,UAAU,CAAEC,OAAO,CAAE,MAAO,CAAE,CAAAhC,QAAA,CAC7EJ,GAAA,CAACa,iBAAiB,~~CAACpB~~,~~CAAAA~~,IAAI,CAAEA,IAAK,~~CAACK~~,KAAK,CAAE0B,SAAU,CAAE,CAAC,CAC/C,CAAC,CACPxB,GAAA,CAACgC,IAAI,CACHC,CAAAA,IAAI,CAAEI,OAAO,CAACpB,SAAS,CAAC,EAAI,CAACC,eAAgB,CAC7CgB,MAAM,CAAE,CAAEC,QAAQ,CAAE,UAAU,CAAEC,OAAO,CAAE,MAAO,CAAE,CAAAhC,QAAA,CAEjDa,SAAS,CAAGjB,GAAA,CAACJ,WAAW,CAAA,~~CAACH~~,IAAI,CAAEA,IAAK,~~CAACK~~,KAAK,CAAE0B,SAAU,CAAE,CAAC,CAAG,IAAI,CAC7D,CAAC,CAAA,CAAA,CACY,CAAC,CAE1B;;;;"}
1	+ {"version":3,"file":"CheckboxIcon.js","sources":["../../../../../../src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing /\n/ eslint-disable @typescript-eslint/explicit-function-return-type /\n/ eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { CheckboxIconWrapper } from './CheckboxIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg, { Path } from '~components/Icons/_Svg';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\n\nconst svgSize = {\n small: {\n width: size[8],\n height: size[8],\n },\n medium: {\n width: size[12],\n height: size[12],\n },\n large: {\n width: size[16],\n height: size[16],\n },\n};\n\nconst CheckedIcon = ({ color, size }: { color: string; size: 'small' \| 'medium' \| 'large' }) => {\n const width = makeSpace(svgSize[size].width);\n const height = makeSpace(svgSize[size].height);\n\n return (\n <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z\"\n fill={color}\n stroke={color}\n strokeWidth=\"0.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Svg>\n );\n};\n\nconst IndeterminateIcon = ({\n color,\n size,\n}: {\n color: string;\n size: 'small' \| 'medium' \| 'large';\n}) => {\n const width = makeSpace(svgSize[size].width);\n const height = makeSpace(svgSize[size].height);\n\n return (\n <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\"\n fill={color}\n stroke={color}\n strokeWidth=\"0.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </Svg>\n );\n};\n\nexport type CheckboxIconProps = {\n isDisabled?: boolean;\n isNegative?: boolean;\n isChecked?: boolean;\n isIndeterminate?: boolean;\n size: 'small' \| 'medium' \| 'large';\n};\n\nconst CheckboxIcon = ({\n isChecked,\n isIndeterminate,\n isDisabled,\n isNegative,\n size,\n}: CheckboxIconProps) => {\n const { theme } = useTheme();\n const iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');\n return (\n <CheckboxIconWrapper\n size={size}\n isIndeterminate={isIndeterminate}\n isDisabled={isDisabled}\n isNegative={isNegative}\n isChecked={!!(isChecked \|\| isIndeterminate)}\n {...metaAttribute({ name: 'checkbox-icon-wrapper' })}\n >\n <Fade show={isIndeterminate} styles={{ position: 'absolute', display: 'flex' }}>\n <IndeterminateIcon size={size} color={iconColor} />\n </Fade>\n <Fade\n show={Boolean(isChecked) && !isIndeterminate}\n styles={{ position: 'absolute', display: 'flex' }}\n >\n {isChecked ? <CheckedIcon size={size} color={iconColor} /> : null}\n </Fade>\n </CheckboxIconWrapper>\n );\n};\n\nexport { CheckboxIcon };\n"],"names":["svgSize","small","width","size","height","medium","large","CheckedIcon","_ref","color","makeSpace","_jsx","Svg","viewBox","fill","children","Path","fillRule","clipRule","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","IndeterminateIcon","_ref2","CheckboxIcon","_ref3","isChecked","isIndeterminate","isDisabled","isNegative","_useTheme","useTheme","theme","iconColor","getIn","_jsxs","CheckboxIconWrapper","Object","assign","metaAttribute","name","Fade","show","styles","position","display","Boolean"],"mappings":"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"}

package/build/lib/native/components/Checkbox/checkboxTokens.js CHANGED Viewed

@@ -2,7 +2,7 @@ import '../../tokens/global/typography.js';
 import '../../tokens/global/motion.js';
 import { size } from '../../tokens/global/size.js';
-var checkboxSizes={group:{gap:{small:{mobile:'spacing.2',desktop:'spacing.0'},medium:{mobile:'spacing.3',desktop:'spacing.2'}}},icon:{small:{width:size[12],height:size[12]},medium:{width:size[16],height:size[16]}}};var checkboxIconColors={variants:{default:{border:{checked:'colors.interactive.border.primary.default',unchecked:'colors.interactive.border.gray.default'},background:{checked:'colors.interactive.background.primary.default',unchecked:'colors.transparent'}},disabled:{border:{checked:'colors.interactive.border.primary.disabled',unchecked:'colors.interactive.border.gray.disabled'},background:{checked:'colors.interactive.background.primary.disabled',unchecked:'colors.transparent'}},negative:{border:{checked:'colors.interactive.border.negative.default',unchecked:'colors.interactive.border.negative.default'},background:{checked:'colors.interactive.background.negative.default',unchecked:'colors.transparent'}}}};var checkboxHoverTokens={default:{background:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.background.gray.faded'},border:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.border.gray.default'}}};
+var checkboxSizes={group:{gap:{small:{mobile:'spacing.3',desktop:'spacing.2'},medium:{mobile:'spacing.4',desktop:'spacing.3'},large:{mobile:'spacing.5',desktop:'spacing.4'}}},icon:{small:{width:size[12],height:size[12]},medium:{width:size[16],height:size[16]},large:{width:size[20],height:size[20]}}};var checkboxIconColors={variants:{default:{border:{checked:'colors.interactive.border.primary.default',unchecked:'colors.interactive.border.gray.default'},background:{checked:'colors.interactive.background.primary.default',unchecked:'colors.transparent'}},disabled:{border:{checked:'colors.interactive.border.primary.disabled',unchecked:'colors.interactive.border.gray.disabled'},background:{checked:'colors.interactive.background.primary.disabled',unchecked:'colors.transparent'}},negative:{border:{checked:'colors.interactive.border.negative.default',unchecked:'colors.interactive.border.negative.default'},background:{checked:'colors.interactive.background.negative.default',unchecked:'colors.transparent'}}}};var checkboxHoverTokens={default:{background:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.background.gray.faded'},border:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.border.gray.default'}}};
 export { checkboxHoverTokens, checkboxIconColors, checkboxSizes };
 //# sourceMappingURL=checkboxTokens.js.map

package/build/lib/native/components/Checkbox/checkboxTokens.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkboxTokens.js","sources":["../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.2',\n desktop: 'spacing.0',\n },\n medium: {\n mobile: 'spacing.3',\n desktop: 'spacing.2',\n },\n },\n },\n icon: {\n small: {\n width: size[12],\n height: size[12],\n },\n medium: {\n width: size[16],\n height: size[16],\n },\n },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n border: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n background: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n};\n\ntype CheckboxIconColors = {\n variants: {\n default: Variant;\n disabled: Variant;\n negative: Variant;\n };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n variants: {\n default: {\n border: {\n checked: 'colors.interactive.border.primary.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n background: {\n checked: 'colors.interactive.background.primary.default',\n unchecked: 'colors.transparent',\n },\n },\n disabled: {\n border: {\n checked: 'colors.interactive.border.primary.disabled',\n unchecked: 'colors.interactive.border.gray.disabled',\n },\n background: {\n checked: 'colors.interactive.background.primary.disabled',\n unchecked: 'colors.transparent',\n },\n },\n negative: {\n border: {\n checked: 'colors.interactive.border.negative.default',\n unchecked: 'colors.interactive.border.negative.default',\n },\n background: {\n checked: 'colors.interactive.background.negative.default',\n unchecked: 'colors.transparent',\n },\n },\n },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n default: {\n background: {\n checked: 'colors.interactive.background.primary.highlighted',\n unchecked: 'colors.interactive.background.gray.faded',\n },\n border: {\n checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","icon","width","size","height","checkboxIconColors","variants","default","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;;AAKM,IAAAA,aAAa,CAAG,CACpBC,KAAK,CAAE,CACLC,GAAG,CAAE,CACHC,KAAK,CAAE,CACLC,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CACF,CACF,CAAC,~~CACDE~~,IAAI,CAAE,~~CACJJ~~,KAAK,CAAE,~~CACLK~~,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CAAC,~~CACDH~~,MAAM,CAAE,~~CACNE~~,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CACF,CACF,EAsBM,IAAAE,kBAAsC,CAAG,CAC7CC,QAAQ,CAAE,CACRC,OAAO,CAAE,CACPC,MAAM,CAAE,CACNC,OAAO,CAAE,2CAA2C,CACpDC,SAAS,CAAE,wCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,+CAA+C,CACxDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,yCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDG,QAAQ,CAAE,CACRL,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,4CACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CACF,CACF,EAEM,IAAAI,mBAA6C,CAAG,CACpDP,OAAO,CAAE,CACPI,UAAU,CAAE,CACVF,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,0CACb,CAAC,CACDF,MAAM,CAAE,CACNC,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,wCACb,CACF,CACF;;;;"}
1	+ {"version":3,"file":"checkboxTokens.js","sources":["../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.3',\n desktop: 'spacing.2',\n },\n medium: {\n mobile: 'spacing.4',\n desktop: 'spacing.3',\n },\n large: {\n mobile: 'spacing.5',\n desktop: 'spacing.4',\n },\n },\n },\n icon: {\n small: {\n width: size[12],\n height: size[12],\n },\n medium: {\n width: size[16],\n height: size[16],\n },\n large: {\n width: size[20],\n height: size[20],\n },\n },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n border: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n background: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n};\n\ntype CheckboxIconColors = {\n variants: {\n default: Variant;\n disabled: Variant;\n negative: Variant;\n };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n variants: {\n default: {\n border: {\n checked: 'colors.interactive.border.primary.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n background: {\n checked: 'colors.interactive.background.primary.default',\n unchecked: 'colors.transparent',\n },\n },\n disabled: {\n border: {\n checked: 'colors.interactive.border.primary.disabled',\n unchecked: 'colors.interactive.border.gray.disabled',\n },\n background: {\n checked: 'colors.interactive.background.primary.disabled',\n unchecked: 'colors.transparent',\n },\n },\n negative: {\n border: {\n checked: 'colors.interactive.border.negative.default',\n unchecked: 'colors.interactive.border.negative.default',\n },\n background: {\n checked: 'colors.interactive.background.negative.default',\n unchecked: 'colors.transparent',\n },\n },\n },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n default: {\n background: {\n checked: 'colors.interactive.background.primary.highlighted',\n unchecked: 'colors.interactive.background.gray.faded',\n },\n border: {\n checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","default","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;;AAKM,IAAAA,aAAa,CAAG,CACpBC,KAAK,CAAE,CACLC,GAAG,CAAE,CACHC,KAAK,CAAE,CACLC,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDE,KAAK,CAAE,CACLH,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CACF,CACF,CAAC,CACDG,IAAI,CAAE,CACJL,KAAK,CAAE,CACLM,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CAAC,CACDJ,MAAM,CAAE,CACNG,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CAAC,CACDH,KAAK,CAAE,CACLE,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CACF,CACF,EAsBM,IAAAE,kBAAsC,CAAG,CAC7CC,QAAQ,CAAE,CACRC,OAAO,CAAE,CACPC,MAAM,CAAE,CACNC,OAAO,CAAE,2CAA2C,CACpDC,SAAS,CAAE,wCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,+CAA+C,CACxDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,yCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDG,QAAQ,CAAE,CACRL,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,4CACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CACF,CACF,EAEM,IAAAI,mBAA6C,CAAG,CACpDP,OAAO,CAAE,CACPI,UAAU,CAAE,CACVF,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,0CACb,CAAC,CACDF,MAAM,CAAE,CACNC,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,wCACb,CACF,CACF;;;;"}

package/build/lib/native/components/Form/CharacterCounter/CharacterCounter.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { hintTextSize } from '../formTokens.js';
 import '@babel/runtime/helpers/objectWithoutProperties';
 import '../../Typography/BaseText/BaseText.native.js';
 import 'react';
@@ -10,7 +11,7 @@ import { jsxs } from 'react/jsx-runtime';
 import { Text } from '../../Typography/Text/Text.js';
 import '../../Typography/Code/Code.js';
-var CharacterCounter=function CharacterCounter(_ref){var currentCount=_ref.currentCount,maxCount=_ref.maxCount;return jsxs(Text,{variant:"caption",weight:"regular",color:"surface.text.gray.muted",children:[currentCount,"/",maxCount]});};
+var CharacterCounter=function CharacterCounter(_ref){var currentCount=_ref.currentCount,maxCount=_ref.maxCount,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;return jsxs(Text,{variant:"caption",size:hintTextSize[size],weight:"regular",color:"surface.text.gray.muted",children:[currentCount,"/",maxCount]});};
 export { CharacterCounter };
 //# sourceMappingURL=CharacterCounter.js.map

package/build/lib/native/components/Form/CharacterCounter/CharacterCounter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CharacterCounter.js","sources":["../../../../../../src/components/Form/CharacterCounter/CharacterCounter.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { Text } from '~components/Typography';\n\ntype CharacterCounterProps = {\n currentCount: number;\n maxCount: number;\n};\n\nexport const CharacterCounter = ({\n currentCount,\n maxCount,\n}: CharacterCounterProps): ReactElement => (\n <Text variant=\"caption\" weight=\"regular\" color=\"surface.text.gray.muted\">\n {currentCount}/{maxCount}\n </Text>\n);\n"],"names":["CharacterCounter","_ref","currentCount","maxCount","_jsxs","Text","variant","weight","color","children"],"mappings":"~~;;;;;;;;;;;;AAQa~~,IAAAA,gBAAgB,CAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,CAAA,CAAA,IAC3BC,YAAY,CAAAD,IAAA,CAAZC,YAAY,CACZC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CAAA,~~OAERC~~,IAAA,CAACC,IAAI,~~CAACC~~,~~CAAAA,~~OAAO,CAAC,SAAS,~~CAACC~~,MAAM,CAAC,SAAS,~~CAACC~~,KAAK,CAAC,yBAAyB,CAAAC,QAAA,~~CACrEP~~,~~CAAAA~~,YAAY,CAAC,GAAC,CAACC,QAAQ,CACpB,~~CAAA,~~CAAC,CACR;;;;"}
1	+ {"version":3,"file":"CharacterCounter.js","sources":["../../../../../../src/components/Form/CharacterCounter/CharacterCounter.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { hintTextSize } from '../formTokens';\nimport { Text } from '~components/Typography';\n\ntype CharacterCounterProps = {\n currentCount: number;\n maxCount: number;\n size?: 'medium' \| 'large';\n};\n\nexport const CharacterCounter = ({\n currentCount,\n maxCount,\n size = 'medium',\n}: CharacterCounterProps): ReactElement => (\n <Text\n variant=\"caption\"\n size={hintTextSize[size]}\n weight=\"regular\"\n color=\"surface.text.gray.muted\"\n >\n {currentCount}/{maxCount}\n </Text>\n);\n"],"names":["CharacterCounter","_ref","currentCount","maxCount","_ref$size","size","_jsxs","Text","variant","hintTextSize","weight","color","children"],"mappings":";;;;;;;;;;;;;AAUa,IAAAA,gBAAgB,CAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,CAAA,CAAA,IAC3BC,YAAY,CAAAD,IAAA,CAAZC,YAAY,CACZC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CAAAC,SAAA,CAAAH,IAAA,CACRI,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAG,KAAA,CAAA,CAAA,QAAQ,CAAAA,SAAA,QAEfE,IAAA,CAACC,IAAI,EACHC,OAAO,CAAC,SAAS,CACjBH,IAAI,CAAEI,YAAY,CAACJ,IAAI,CAAE,CACzBK,MAAM,CAAC,SAAS,CAChBC,KAAK,CAAC,yBAAyB,CAAAC,QAAA,CAAA,CAE9BV,YAAY,CAAC,GAAC,CAACC,QAAQ,CAAA,CACpB,CAAC,CACR;;;;"}

package/build/lib/native/components/Form/FormHint.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import 'react';
 import { FormHintWrapper } from './FormHintWrapper.native.js';
+import { hintMarginTop, hintTextSize, hintIconSize } from './formTokens.js';
 import { Text } from '../Typography/Text/Text.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -20,7 +21,7 @@ import '../../tokens/global/motion.js';
 import CheckIcon from '../Icons/CheckIcon/CheckIcon.js';
 import InfoIcon from '../Icons/InfoIcon/InfoIcon.js';
-var HintText=function HintText(_ref){var Icon=_ref.icon,children=_ref.children,id=_ref.id,color=_ref.color;var isReactNative=getPlatformType()==='react-native';return jsx(BaseBox,{marginTop:"spacing.2",id:id,children:jsxs(FormHintWrapper,{children:[Icon?jsx(Icon,{}):null,jsx(Text,{as:isReactNative?undefined:'span',color:color,size:"small",variant:"caption",children:children})]})});};var Icons={error:function error(){return jsxs(Fragment,{children:[jsx(InfoIcon,{color:"feedback.icon.negative.intense",size:"small"}),jsx(BaseBox,{marginRight:"spacing.2"})]});},success:function success(){return jsxs(Fragment,{children:[jsx(CheckIcon,{color:"feedback.icon.positive.intense",size:"small"}),jsx(BaseBox,{marginRight:"spacing.2"})]});}};var FormHint=function FormHint(_ref2){var type=_ref2.type,helpText=_ref2.helpText,errorText=_ref2.errorText,successText=_ref2.successText,helpTextId=_ref2.helpTextId,errorTextId=_ref2.errorTextId,successTextId=_ref2.successTextId;var colors={help:'surface.text.gray.muted',error:'feedback.text.negative.intense',success:'feedback.text.positive.intense'};var showError=type==='error'&&errorText;var showSuccess=type==='success'&&successText;var showHelp=!showError&&!showSuccess&&helpText;return jsxs(Fragment,{children:[showHelp&&jsx(HintText,{id:helpTextId,color:colors.help,children:helpText}),showError&&jsx(HintText,{id:errorTextId,icon:Icons.error,color:colors.error,children:errorText}),showSuccess&&jsx(HintText,{id:successTextId,icon:Icons.success,color:colors.success,children:successText})]});};
+var HintText=function HintText(_ref){var Icon=_ref.icon,children=_ref.children,id=_ref.id,color=_ref.color,size=_ref.size;var isReactNative=getPlatformType()==='react-native';return jsx(BaseBox,{marginTop:hintMarginTop[size],id:id,children:jsxs(FormHintWrapper,{children:[Icon?jsx(Icon,{}):null,jsx(Text,{as:isReactNative?undefined:'span',color:color,size:hintTextSize[size],variant:"caption",children:children})]})});};var Icons={error:function error(_ref2){var size=_ref2.size;return jsxs(Fragment,{children:[jsx(InfoIcon,{color:"feedback.icon.negative.intense",size:hintIconSize[size]}),jsx(BaseBox,{marginRight:"spacing.2"})]});},success:function success(_ref3){var size=_ref3.size;return jsxs(Fragment,{children:[jsx(CheckIcon,{color:"feedback.icon.positive.intense",size:hintIconSize[size]}),jsx(BaseBox,{marginRight:"spacing.2"})]});}};var FormHint=function FormHint(_ref4){var type=_ref4.type,helpText=_ref4.helpText,errorText=_ref4.errorText,successText=_ref4.successText,helpTextId=_ref4.helpTextId,errorTextId=_ref4.errorTextId,successTextId=_ref4.successTextId,_ref4$size=_ref4.size,size=_ref4$size===void 0?'medium':_ref4$size;var colors={help:'surface.text.gray.muted',error:'feedback.text.negative.intense',success:'feedback.text.positive.intense'};var showError=type==='error'&&errorText;var showSuccess=type==='success'&&successText;var showHelp=!showError&&!showSuccess&&helpText;return jsxs(Fragment,{children:[showHelp&&jsx(HintText,{size:size,id:helpTextId,color:colors.help,children:helpText}),showError&&jsx(HintText,{size:size,id:errorTextId,icon:function icon(){return Icons.error({size:size});},color:colors.error,children:errorText}),showSuccess&&jsx(HintText,{size:size,id:successTextId,icon:function icon(){return Icons.success({size:size});},color:colors.success,children:successText})]});};
 export { FormHint };
 //# sourceMappingURL=FormHint.js.map

package/build/lib/native/components/Form/FormHint.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormHint.js","sources":["../../../../../src/components/Form/FormHint.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { FormHintWrapper } from './FormHintWrapper';\nimport type { TextProps } from '~components/Typography/Text';\nimport { Text } from '~components/Typography/Text';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\n\ntype HintTextProps = {\n icon?: React.ElementType;\n children: string;\n id?: string;\n color: TextProps<{ variant: 'caption' }>['color'];\n};\n\nconst HintText = ({ icon: Icon, children, id, color }: HintTextProps): ReactElement => {\n const isReactNative = getPlatformType() === 'react-native';\n\n return (\n <BaseBox marginTop~~=\"spacing.2\"~~ id={id}>\n <FormHintWrapper>\n {Icon ? <Icon /> : null}\n <Text as={isReactNative ? undefined : 'span'} color={color} size~~=\"small~~\" variant=\"caption\">\n {children}\n </Text>\n </FormHintWrapper>\n </BaseBox>\n );\n};\n\nexport type FormHintProps = {\n type: 'help' \| 'error' \| 'success';\n /\n Help text for the group\n /\n helpText?: string;\n /\n Error text for the group\n \n Renders when `state` is set to 'error'\n /\n errorText?: string;\n /\n Success text for the group\n \n Renders when `state` is set to 'success'\n /\n successText?: string;\n /\n Sets the id on errorText.\n * Needed for accessibility reasons.\n /\n errorTextId?: string;\n /\n Sets the id on helpText.\n * Needed for accessibility reasons.\n /\n helpTextId?: string;\n /\n Sets the id on successText.\n * Needed for accessibility reasons.\n */\n successTextId?: string;\n};\n\nconst Icons = {\n error: (): ReactElement => (\n <>\n <InfoIcon color=\"feedback.icon.negative.intense\" size~~=\"small\"~~ />\n <BaseBox marginRight=\"spacing.2\" />\n </>\n ),\n success: (): ReactElement => (\n <>\n <CheckIcon color=\"feedback.icon.positive.intense\" size~~=\"small\"~~ />\n <BaseBox marginRight=\"spacing.2\" />\n </>\n ),\n};\n\nconst FormHint = ({\n type,\n helpText,\n errorText,\n successText,\n helpTextId,\n errorTextId,\n successTextId,\n}: FormHintProps): React.ReactElement => {\n const colors: Record<string, TextProps<{ variant: 'caption' }>['color']> = {\n help: 'surface.text.gray.muted',\n error: 'feedback.text.negative.intense',\n success: 'feedback.text.positive.intense',\n };\n\n const showError = type === 'error' && errorText;\n const showSuccess = type === 'success' && successText;\n const showHelp = !showError && !showSuccess && helpText;\n\n return (\n <>\n {showHelp && (\n <HintText id={helpTextId} color={colors.help}>\n {helpText}\n </HintText>\n )}\n\n {showError && (\n <HintText id={errorTextId} icon={Icons.error} color={colors.error}>\n {errorText}\n </HintText>\n )}\n\n {showSuccess && (\n <HintText id={successTextId} icon={Icons.success} color={colors.success}>\n {successText}\n </HintText>\n )}\n </>\n );\n};\n\nexport { FormHint };\n"],"names":["HintText","_ref","Icon","icon","children","id","color","isReactNative","getPlatformType","_jsx","BaseBox","marginTop","_jsxs","FormHintWrapper","Text","as","undefined","~~size~~","variant","Icons","error","_Fragment","InfoIcon","marginRight","success","CheckIcon","FormHint","~~_ref2~~","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","colors","help","showError","showSuccess","showHelp"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;AAiBA~~,IAAMA,QAAQ,CAAG,SAAXA,QAAQA,CAAAC,IAAA,~~CAAyE~~,~~CAA7D~~,~~IAAAC~~,IAAI,CAAAD,IAAA,CAAVE,IAAI,CAAQC,QAAQ,CAAAH,IAAA,CAARG,QAAQ,CAAEC,EAAE,CAAAJ,IAAA,CAAFI,EAAE,CAAEC,KAAK,CAAAL,IAAA,CAALK,KAAK,~~CACjD~~,IAAMC,aAAa,CAAGC,eAAe,EAAE,GAAK,cAAc,CAE1D,OACEC,GAAA,CAACC,OAAO,~~CAAA,~~CAACC,SAAS,~~CAAC~~,~~WAAW~~,CAACN,EAAE,CAAEA,EAAG,CAAAD,QAAA,~~CACpCQ~~,IAAA,CAACC,eAAe,CAAA,~~CAAAT~~,QAAA,CAAA,CACbF,IAAI,~~CAAGO~~,GAAA,~~CAACP~~,IAAI,~~GAAE~~,CAAC,CAAG,IAAI,~~CACvBO~~,GAAA,~~CAACK~~,IAAI,~~CAACC~~,CAAAA,EAAE,~~CAAER~~,aAAa,~~CAAGS~~,SAAS,CAAG,MAAO,~~CAACV~~,KAAK,CAAEA,KAAM,~~CAACW~~,IAAI,~~CAAC~~,~~OAAO~~,~~CAACC~~,OAAO,CAAC,SAAS,~~CAAAd~~,QAAA,~~CACvFA~~,QAAQ,CACL,CAAC,CAAA,CACQ,CAAC,CACX,CAAC,CAEd,CAAC,~~CAqCD~~,~~IAAMe~~,KAAK,CAAG,CACZC,KAAK,CAAE,SAAAA,KAAA,~~EAAA~~,CAAA,~~OACLR~~,IAAA,~~CAAAS~~,QAAA,~~CAAAjB~~,~~CAAAA,~~QAAA,~~EACEK~~,GAAA,~~CAACa~~,QAAQ,CAAA,~~CAAChB~~,KAAK,CAAC,gCAAgC,~~CAACW~~,IAAI,~~CAAC~~,~~OAAO~~,CAAE,CAAC,~~CAChER~~,GAAA,CAACC,OAAO,~~CAAA~~,~~CAACa~~,WAAW,CAAC,WAAW,CAAE,CAAC,~~EACnC~~,CAAC,CAAA,~~CACJ,~~CACDC,OAAO,CAAE,SAAAA,~~OAAAA~~,~~EACP~~,CAAA,~~OAAAZ~~,IAAA,~~CAAAS~~,QAAA,~~CAAAjB~~,CAAAA,QAAA,~~CACEK~~,CAAAA,GAAA,~~CAACgB~~,SAAS,~~CAAA~~,~~CAACnB~~,KAAK,CAAC,gCAAgC,~~CAACW~~,IAAI,~~CAAC~~,~~OAAO~~,CAAE,CAAC,~~CACjER~~,GAAA,CAACC,OAAO,~~CAACa~~,CAAAA,WAAW,CAAC,WAAW,CAAE,CAAC,CAAA,~~CACnC,~~CAAC,CAAA,~~CAEP,~~CAAC,CAEK,~~IAAAG~~,QAAQ,CAAG,SAAXA,QAAQA,CAAAC,KAAA,~~CAQ2B~~,~~KAPvCC~~,IAAI,CAAAD,KAAA,CAAJC,IAAI,CACJC,QAAQ,CAAAF,KAAA,CAARE,QAAQ,CACRC,SAAS,CAAAH,KAAA,CAATG,SAAS,CACTC,WAAW,CAAAJ,KAAA,CAAXI,WAAW,CACXC,UAAU,CAAAL,KAAA,CAAVK,UAAU,CACVC,WAAW,CAAAN,KAAA,CAAXM,WAAW,CACXC,aAAa,CAAAP,KAAA,CAAbO,aAAa,~~CAEb~~,IAAMC,MAAkE,CAAG,CACzEC,IAAI,CAAE,yBAAyB,CAC/~~BhB~~,KAAK,CAAE,gCAAgC,~~CACvCI~~,OAAO,CAAE,gCACX,CAAC,CAED,~~IAAMa~~,SAAS,~~CAAGT~~,IAAI,GAAK,OAAO,EAAIE,SAAS,CAC/C,~~IAAMQ~~,WAAW,~~CAAGV~~,IAAI,GAAK,SAAS,EAAIG,WAAW,CACrD,~~IAAMQ~~,QAAQ,CAAG,CAACF,SAAS,EAAI,CAACC,WAAW,~~EAAIT~~,QAAQ,CAEvD,~~OACEjB~~,IAAA,~~CAAAS~~,QAAA,~~CAAAjB~~,~~CAAAA~~,QAAA,~~CACGmC~~,~~CAAAA~~,QAAQ,~~EACP9B~~,GAAA,~~CAACT~~,QAAQ,CAAA,~~CAACK~~,EAAE,~~CAAE2B~~,UAAW,~~CAAC1B~~,KAAK,~~CAAE6B~~,MAAM,CAACC,IAAK,~~CAAAhC~~,QAAA,~~CAC1CyB~~,QAAQ,CACD,CACX,~~CAEAQ~~,SAAS,~~EACR5B~~,GAAA,~~CAACT~~,QAAQ,CAAA,~~CAACK~~,EAAE,~~CAAE4B~~,WAAY,~~CAAC9B~~,IAAI,~~CAAEgB~~,KAAK,CAACC,~~KAAM~~,~~CAACd~~,KAAK,~~CAAE6B~~,MAAM,~~CAACf~~,KAAM,~~CAAAhB~~,QAAA,~~CAC/D0B~~,SAAS,CACF,CACX,~~CAEAQ~~,WAAW,~~EACV7B~~,GAAA,~~CAACT~~,QAAQ,~~CAACK~~,CAAAA,EAAE,~~CAAE6B~~,aAAc,~~CAAC/B~~,IAAI,~~CAAEgB~~,KAAK,~~CAACK~~,~~OAAQ~~,~~CAAClB~~,KAAK,~~CAAE6B~~,MAAM,~~CAACX~~,OAAQ,~~CAAApB~~,QAAA,~~CACrE2B~~,WAAW,CACJ,CACX,CAAA,CACD,CAAC,CAEP;;;;"}
1	+ {"version":3,"file":"FormHint.js","sources":["../../../../../src/components/Form/FormHint.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { FormHintWrapper } from './FormHintWrapper';\nimport { hintIconSize, hintMarginTop, hintTextSize } from './formTokens';\nimport type { TextProps } from '~components/Typography/Text';\nimport { Text } from '~components/Typography/Text';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\n\ntype HintTextProps = {\n icon?: React.ElementType;\n children: string;\n id?: string;\n color: TextProps<{ variant: 'caption' }>['color'];\n size: 'small' \| 'medium' \| 'large';\n};\n\nconst HintText = ({ icon: Icon, children, id, color, size }: HintTextProps): ReactElement => {\n const isReactNative = getPlatformType() === 'react-native';\n\n return (\n <BaseBox marginTop={hintMarginTop[size]} id={id}>\n <FormHintWrapper>\n {Icon ? <Icon /> : null}\n <Text\n as={isReactNative ? undefined : 'span'}\n color={color}\n size={hintTextSize[size]}\n variant=\"caption\"\n >\n {children}\n </Text>\n </FormHintWrapper>\n </BaseBox>\n );\n};\n\nexport type FormHintProps = {\n type: 'help' \| 'error' \| 'success';\n /\n Help text for the group\n /\n helpText?: string;\n /\n Error text for the group\n \n Renders when `state` is set to 'error'\n /\n errorText?: string;\n /\n Success text for the group\n \n Renders when `state` is set to 'success'\n /\n successText?: string;\n /\n Sets the id on errorText.\n * Needed for accessibility reasons.\n /\n errorTextId?: string;\n /\n Sets the id on helpText.\n * Needed for accessibility reasons.\n /\n helpTextId?: string;\n /\n Sets the id on successText.\n * Needed for accessibility reasons.\n /\n successTextId?: string;\n /\n Sets the size of the hint\n * @default medium\n */\n size?: 'small' \| 'medium' \| 'large';\n};\n\nconst Icons = {\n error: ({ size }: { size: 'small' \| 'medium' \| 'large' }): ReactElement => (\n <>\n <InfoIcon color=\"feedback.icon.negative.intense\" size={hintIconSize[size]} />\n <BaseBox marginRight=\"spacing.2\" />\n </>\n ),\n success: ({ size }: { size: 'small' \| 'medium' \| 'large' }): ReactElement => (\n <>\n <CheckIcon color=\"feedback.icon.positive.intense\" size={hintIconSize[size]} />\n <BaseBox marginRight=\"spacing.2\" />\n </>\n ),\n};\n\nconst FormHint = ({\n type,\n helpText,\n errorText,\n successText,\n helpTextId,\n errorTextId,\n successTextId,\n size = 'medium',\n}: FormHintProps): React.ReactElement => {\n const colors: Record<string, TextProps<{ variant: 'caption' }>['color']> = {\n help: 'surface.text.gray.muted',\n error: 'feedback.text.negative.intense',\n success: 'feedback.text.positive.intense',\n };\n\n const showError = type === 'error' && errorText;\n const showSuccess = type === 'success' && successText;\n const showHelp = !showError && !showSuccess && helpText;\n\n return (\n <>\n {showHelp && (\n <HintText size={size} id={helpTextId} color={colors.help}>\n {helpText}\n </HintText>\n )}\n\n {showError && (\n <HintText\n size={size}\n id={errorTextId}\n icon={() => Icons.error({ size })}\n color={colors.error}\n >\n {errorText}\n </HintText>\n )}\n\n {showSuccess && (\n <HintText\n size={size}\n id={successTextId}\n icon={() => Icons.success({ size })}\n color={colors.success}\n >\n {successText}\n </HintText>\n )}\n </>\n );\n};\n\nexport { FormHint };\n"],"names":["HintText","_ref","Icon","icon","children","id","color","size","isReactNative","getPlatformType","_jsx","BaseBox","marginTop","hintMarginTop","_jsxs","FormHintWrapper","Text","as","undefined","hintTextSize","variant","Icons","error","_ref2","_Fragment","InfoIcon","hintIconSize","marginRight","success","_ref3","CheckIcon","FormHint","_ref4","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","_ref4$size","colors","help","showError","showSuccess","showHelp"],"mappings":"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"}

package/build/lib/native/components/Form/FormLabel.js CHANGED Viewed

@@ -1,9 +1,11 @@
 import 'react';
+import { labelOptionalIndicatorTextSize, labelTextSize, labelLeftMarginRight, labelMarginBottom, labelWidth } from './formTokens.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.native.js';
 import '@babel/runtime/helpers/objectWithoutProperties';
 import '../Typography/BaseText/BaseText.native.js';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-native';
+import getIn from '../../utils/lodashButBetter/get.js';
 import '../../tokens/global/typography.js';
 import '../../tokens/global/motion.js';
 import { size } from '../../tokens/global/size.js';
@@ -23,7 +25,7 @@ import '@gorhom/portal';
 import 'react-native-gesture-handler';
 import '../BottomSheet/BottomSheetStack.js';
-var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",size:"small",color:"surface.text.gray.muted",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(Text,{variant:"body",size:isLabelLeftPositioned?'medium':'small',color:"feedback.text.negative.intense",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(BaseBox,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",maxHeight:makeSpace(size[36]),children:[jsx(Text,{variant:"body",size:isLabelLeftPositioned?'medium':'small',color:"surface.text.gray.subtle",truncateAfterLines:2,weight:"semibold",wordBreak:isLabelLeftPositioned?'break-word':undefined,children:children}),computedAccessibilityNode,necessityLabel]});if(isReactNative){return jsx(BaseBox,{marginRight:"spacing.5",marginBottom:"spacing.2",children:textNode});}var Component=as;var width=isLabelLeftPositioned&&isDesktop?makeSize(size[120]):'auto';return jsx(Component,Object.assign({htmlFor:htmlFor,style:{width:width,flexShrink:0,marginRight:makeSpace(theme.spacing[5])},id:id},metaAttribute({name:MetaConstants.FormLabel}),{children:jsx(BaseBox,{marginBottom:isLabelLeftPositioned?'spacing.0':'spacing.2',children:textNode})}));};
+var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",size:labelOptionalIndicatorTextSize[size$1],color:"surface.text.gray.muted",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(Text,{variant:"body",size:isLabelLeftPositioned?'medium':'small',color:"feedback.text.negative.intense",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(BaseBox,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",maxHeight:makeSpace(size[36]),children:[jsx(Text,{variant:"body",size:labelTextSize[isLabelLeftPositioned?'left':'top'][size$1],color:"surface.text.gray.subtle",truncateAfterLines:2,weight:"semibold",wordBreak:isLabelLeftPositioned?'break-word':undefined,children:children}),computedAccessibilityNode,necessityLabel]});if(isReactNative){return jsx(BaseBox,{marginRight:"spacing.5",marginBottom:"spacing.2",children:textNode});}var Component=as;var width=isLabelLeftPositioned&&isDesktop?makeSize(labelWidth[size$1]):'auto';return jsx(Component,Object.assign({htmlFor:htmlFor,style:{width:width,flexShrink:0,marginRight:isLabelLeftPositioned?makeSpace(getIn(theme,labelLeftMarginRight[size$1])):makeSpace(getIn(theme,'spacing.0'))},id:id},metaAttribute({name:MetaConstants.FormLabel}),{children:jsx(BaseBox,{marginBottom:isLabelLeftPositioned?'spacing.0':labelMarginBottom[size$1],children:textNode})}));};
 export { FormLabel };
 //# sourceMappingURL=FormLabel.js.map

package/build/lib/native/components/Form/FormLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { ~~makeSize~~ } from '~~~utils~~/~~makeSize~~';\nimport { ~~size }~~ from '~~~tokens~~/~~global~~';\n\ntype CommonProps = {\n as: 'span' \| 'label';\n position?: 'top' \| 'left';\n necessityIndicator?: 'required' \| 'optional' \| 'none';\n accessibilityText?: string;\n children: string \| undefined;\n id?: string;\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps \| SpanProps;\n\nexport type FormInputLabelProps = {\n /*\n Label to be shown for the input field\n /\n label?: string;\n /\n Desktop only prop. Default value on mobile will be `top`\n /\n labelPosition?: 'left' \| 'top';\n /\n Displays `(optional)` when `optional` is passed or `` when `required` is passed\n /\n necessityIndicator?: 'required' \| 'optional' \| 'none';\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text variant=\"caption\" size~~=\"small~~\" color=\"surface.text.gray.muted\">\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n >\n \n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n flexWrap=\"wrap\"\n maxHeight={makeSpace(~~size~~[36])}\n >\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? '~~medium~~' : '~~small~~'}\n color=\"surface.text.gray.subtle\"\n truncateAfterLines={2}\n weight=\"semibold\"\n wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n >\n {children}\n </Text>\n {computedAccessibilityNode}\n {/ TODO: Hide from screen readers to prevent double announcement */}\n {necessityLabel}\n </BaseBox>\n );\n\n // What harm can it do?\n if (isReactNative) {\n return (\n <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n {textNode}\n </BaseBox>\n );\n }\n\n const Component = as;\n // only set 120px label when device is desktop\n const width = isLabelLeftPositioned && isDesktop ? makeSize(size~~[120~~]) : 'auto';\n\n return (\n <Component\n htmlFor={htmlFor}\n style={{\n width,\n flexShrink: 0,\n marginRight: makeSpace(theme~~.spacing~~[5]),\n }}\n id={id}\n {...metaAttribute({ name: MetaConstants.FormLabel })}\n >\n <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : ~~'spacing.2'~~}>{textNode}</BaseBox>\n </Component>\n );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","~~size~~","color","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","flexWrap","maxHeight","makeSpace","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","Object","assign","style","flexShrink","~~spacing~~","metaAttribute","name","MetaConstants"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;AA+CM~~,IAAAA,SAAS,CAAG,SAAZA,SAASA,CAAAC,IAAA,~~CAQ2B~~,CAAAC,IAAAA,OAAA,CAAAD,IAAA,~~CAPxCE~~,EAAE,CAAFA,EAAE,CAAAD,OAAA,~~GAAG~~,KAAA,CAAA,~~CAAA~~,MAAM,CAAAA,OAAA,CAAAE,aAAA,CAAAH,IAAA,CACXI,QAAQ,CAARA,QAAQ,CAAAD,aAAA,~~GAAG~~,KAAA,CAAA,~~CAAA~~,KAAK,CAAAA,aAAA,CAAAE,qBAAA,CAAAL,IAAA,CAChBM,kBAAkB,CAAlBA,kBAAkB,CAAAD,qBAAA,~~GAAG~~,~~KAAA,CAAA,CAAA,~~MAAM,CAAAA,qBAAA,CAC3BE,iBAAiB,CAAAP,IAAA,CAAjBO,iBAAiB,CACjBC,QAAQ,CAAAR,IAAA,CAARQ,QAAQ,CACRC,EAAE,CAAAT,IAAA,CAAFS,EAAE,CACFC,OAAO,CAAAV,IAAA,CAAPU,OAAO,~~CAEP~~,~~IAAAC~~,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAAC,cAAA,CAA8BC,aAAa,CAAC,CAAEC,WAAW,CAAEH,KAAK,CAACG,WAAY,CAAC,CAAC,CAAvEC,iBAAiB,CAAAH,cAAA,CAAjBG,iBAAiB,CACzB,IAAMC,SAAS,CAAGD,iBAAiB,GAAK,SAAS,CACjD,IAAME,aAAa,CAAGC,eAAe,EAAE,GAAK,cAAc,CAE1D,IAAIC,cAA+B,CAAG,IAAI,CAE1C,IAAMC,qBAAqB,~~CAAGlB~~,QAAQ,GAAK,MAAM,~~EAAIc~~,SAAS,CAE9D,~~GAAIZ~~,kBAAkB,GAAK,UAAU,CAAE,~~CACrCe~~,cAAc,CACZE,GAAA,CAACC,IAAI,~~CAACC~~,~~CAAAA~~,OAAO,CAAC,SAAS,~~CAACC~~,IAAI,~~CAAC~~,~~OAAO~~,~~CAACC~~,KAAK,CAAC,yBAAyB,~~CAAAnB~~,QAAA,~~CAAC~~,~~YAErE~~,CAAM,CACP,CACH,CACA,GAAIF,kBAAkB,GAAK,UAAU,CAAE,~~CACrCe~~,cAAc,CACZE,GAAA,CAACC,IAAI,CAAA,CACHC,OAAO,CAAC,MAAM,~~CACdC~~,IAAI,~~CAAEJ~~,qBAAqB,CAAG,QAAQ,CAAG,OAAQ,CACjDK,KAAK,CAAC,gCAAgC,~~CAAAnB~~,QAAA,CACvC,GAED,CAAM,CACP,CACH,CAEA,~~IAAMoB~~,yBAAyB,CAC7BC,IAAA,CAACC,cAAc,CAAA,~~CAAAtB~~,QAAA,CAAA,CACZF,kBAAkB,GAAK,MAAM,~~EAAIiB~~,GAAA,CAACC,IAAI,~~CAAA~~,~~CAAAhB~~,QAAA,CAAEF,kBAAkB,CAAO,CAAC,~~CACnEiB~~,GAAA,CAACC,IAAI,CAAA,~~CAAAhB~~,QAAA,CAAED,iBAAiB,CAAO,CAAC,CAAA,~~CAClB,~~CACjB,CAED,~~IAAMwB~~,QAAQ,CACZF,IAAA,CAACG,OAAO,CAAA,CACNC,GAAG,~~CAAE3B~~,kBAAkB,GAAK,UAAU,CAAG,WAAW,CAAG,WAAY,~~CACnE4B~~,OAAO,CAAC,MAAM,CACdC,aAAa,CAAC,KAAK,CACnBC,UAAU,CAAC,QAAQ,CACnBC,QAAQ,CAAC,MAAM,CACfC,SAAS,CAAEC,SAAS,~~CAACb~~,~~IAAI~~,CAAC,EAAE,CAAC,CAAE,~~CAAAlB~~,QAAA,CAAA,~~CAE/Be~~,GAAA,CAACC,IAAI,~~CAAA,~~CACHC,OAAO,CAAC,MAAM,~~CACdC~~,IAAI,~~CAAEJ~~,qBAAqB,CAAG,~~QAAQ~~,CAAG,~~OAAQ~~,~~CACjDK~~,KAAK,CAAC,0BAA0B,~~CAChCa~~,kBAAkB,CAAE,CAAE,CACtBC,MAAM,CAAC,UAAU,CACjBC,SAAS,~~CAAEpB~~,qBAAqB,CAAG,YAAY,~~CAAGqB~~,SAAU,~~CAAAnC~~,QAAA,CAE3DA,QAAQ,CACL,CAAC,~~CACNoB~~,yBAAyB,CAEzBP,cAAc,CACR,~~CAAA,~~CACV,CAGD,GAAIF,aAAa,CAAE,CACjB,OACEI,GAAA,CAACS,OAAO,~~CAACY~~,~~CAAAA,~~WAAW,CAAC,WAAW,CAACC,YAAY,CAAC,WAAW,~~CAAArC~~,QAAA,~~CACtDuB~~,QAAQ,CACF,CAAC,CAEd,CAEA,~~IAAMe~~,SAAS,~~CAAG5C~~,EAAE,CAEpB,~~IAAM6C~~,KAAK,~~CAAGzB~~,qBAAqB,EAAIJ,SAAS,~~CAAG8B~~,QAAQ,~~CAACtB~~,~~IAAI~~,~~CAAC~~,~~GAAG~~,CAAC,CAAC,CAAG,MAAM,~~CAE/E~~,~~OACEH~~,GAAA,~~CAACuB~~,SAAS,~~CAAAG~~,MAAA,CAAAC,MAAA,CAAA,~~CACRxC~~,OAAO,CAAEA,OAAQ,~~CACjByC~~,KAAK,CAAE,~~CACLJ~~,KAAK,CAALA,KAAK,~~CACLK~~,UAAU,CAAE,CAAC,~~CACbR~~,WAAW,~~CAAEL~~,SAAS,~~CAAC1B~~,KAAK,~~CAACwC~~,~~OAAO~~,CAAC,CAAC,CAAC,CACzC,CAAE,~~CACF5C~~,EAAE,CAAEA,EAAG,~~CACH6C~~,~~CAAAA~~,aAAa,CAAC,CAAEC,IAAI,CAAEC,aAAa,~~CAACzD~~,SAAU,CAAC,CAAC,CAAA,CAAAS,QAAA,~~CAEpDe~~,GAAA,CAACS,OAAO,~~CAAA~~,~~CAACa~~,YAAY,~~CAAEvB~~,qBAAqB,CAAG,WAAW,~~CAAG~~,~~WAAY~~,~~CAAAd~~,QAAA,~~CAAEuB~~,QAAQ,~~CAAU~~,CAAC,CAAA,~~CACrF~~,CAAC,CAEhB;;;;"}
1	+ {"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n labelLeftMarginRight,\n labelMarginBottom,\n labelOptionalIndicatorTextSize,\n labelTextSize,\n labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n as: 'span' \| 'label';\n position?: 'top' \| 'left';\n necessityIndicator?: 'required' \| 'optional' \| 'none';\n accessibilityText?: string;\n children: string \| undefined;\n id?: string;\n /*\n Sets the size of the label\n * @default medium\n /\n size?: 'small' \| 'medium' \| 'large';\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps \| SpanProps;\n\nexport type FormInputLabelProps = {\n /\n Label to be shown for the input field\n /\n label?: string;\n /\n Desktop only prop. Default value on mobile will be `top`\n /\n labelPosition?: 'left' \| 'top';\n /\n Displays `(optional)` when `optional` is passed or `` when `required` is passed\n /\n necessityIndicator?: 'required' \| 'optional' \| 'none';\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n size = 'medium',\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text\n variant=\"caption\"\n size={labelOptionalIndicatorTextSize[size]}\n color=\"surface.text.gray.muted\"\n >\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n >\n \n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n flexWrap=\"wrap\"\n maxHeight={makeSpace(sizeToken[36])}\n >\n <Text\n variant=\"body\"\n size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n color=\"surface.text.gray.subtle\"\n truncateAfterLines={2}\n weight=\"semibold\"\n wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n >\n {children}\n </Text>\n {computedAccessibilityNode}\n {/ TODO: Hide from screen readers to prevent double announcement */}\n {necessityLabel}\n </BaseBox>\n );\n\n // What harm can it do?\n if (isReactNative) {\n return (\n <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n {textNode}\n </BaseBox>\n );\n }\n\n const Component = as;\n // only set 120px label when device is desktop\n const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : 'auto';\n\n return (\n <Component\n htmlFor={htmlFor}\n style={{\n width,\n flexShrink: 0,\n marginRight: isLabelLeftPositioned\n ? makeSpace(getIn(theme, labelLeftMarginRight[size]))\n : makeSpace(getIn(theme, 'spacing.0')),\n }}\n id={id}\n {...metaAttribute({ name: MetaConstants.FormLabel })}\n >\n <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}>\n {textNode}\n </BaseBox>\n </Component>\n );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$size","size","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","flexWrap","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","Object","assign","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom"],"mappings":"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"}

package/build/lib/native/components/Form/Selector/SelectorSupportText.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { castWebType } from '../../../utils/platform/castUtils.js';
 import '../../BladeProvider/useTheme.js';
 import { jsx } from 'react/jsx-runtime';
-var SelectorSupportText=function SelectorSupportText(_ref){var children=_ref.children,id=_ref.id,isNegative=_ref.isNegative;var isReactNative=getPlatformType()==='react-native';return jsx(Box,{id:id,display:isReactNative?undefined:castWebType('contents'),children:jsx(Text,{variant:"caption",size:"small",as:isReactNative?undefined:'span',color:isNegative?'feedback.text.negative.intense':'surface.text.gray.muted',children:children})});};
+var SelectorSupportText=function SelectorSupportText(_ref){var children=_ref.children,id=_ref.id,isNegative=_ref.isNegative,size=_ref.size;var isReactNative=getPlatformType()==='react-native';var sizeMapping={small:'small',medium:'small',large:'medium'};return jsx(Box,{id:id,display:isReactNative?undefined:castWebType('contents'),children:jsx(Text,{variant:"caption",size:sizeMapping[size],as:isReactNative?undefined:'span',color:isNegative?'feedback.text.negative.intense':'surface.text.gray.muted',children:children})});};
 export { SelectorSupportText };
 //# sourceMappingURL=SelectorSupportText.js.map

package/build/lib/native/components/Form/Selector/SelectorSupportText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectorSupportText.js","sources":["../../../../../../src/components/Form/Selector/SelectorSupportText.tsx"],"sourcesContent":["import { Box } from '~components/Box';\nimport { Text } from '~components/Typography/Text';\nimport { castWebType, getPlatformType } from '~utils';\n\nconst SelectorSupportText = ({\n children,\n id,\n isNegative,\n}: {\n children: React.ReactNode;\n id?: string;\n isNegative?: boolean;\n}): React.ReactElement => {\n const isReactNative = getPlatformType() === 'react-native';\n\n return (\n <Box id={id} display={isReactNative ? undefined : castWebType('contents')}>\n <Text\n variant=\"caption\"\n size~~=\"small~~\"\n as={isReactNative ? undefined : 'span'}\n color={isNegative ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'}\n >\n {children}\n </Text>\n </Box>\n );\n};\n\nexport { SelectorSupportText };\n"],"names":["SelectorSupportText","_ref","children","id","isNegative","isReactNative","getPlatformType","_jsx","Box","display","undefined","castWebType","Text","variant","~~size","~~as","color"],"mappings":";;;;;;;;;;AAIM,IAAAA,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,~~CAQC~~,~~CAAA~~,~~IAPxBC~~,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,EAAE,CAAAF,IAAA,CAAFE,EAAE,CACFC,UAAU,CAAAH,IAAA,CAAVG,UAAU,~~CAMV~~,IAAMC,aAAa,CAAGC,eAAe,EAAE,GAAK,cAAc,~~CAE1D~~,OACEC,GAAA,CAACC,GAAG,CAAA,~~CAACL~~,EAAE,CAAEA,EAAG,~~CAACM~~,OAAO,~~CAAEJ~~,aAAa,~~CAAGK~~,SAAS,CAAGC,WAAW,CAAC,UAAU,CAAE,~~CAAAT~~,QAAA,~~CACxEK~~,GAAA,CAACK,IAAI,CAAA,CACHC,OAAO,CAAC,SAAS,~~CACjBC~~,IAAI,~~CAAC~~,~~OAAO~~,~~CACZC~~,EAAE,~~CAAEV~~,aAAa,~~CAAGK~~,SAAS,CAAG,MAAO,~~CACvCM~~,KAAK,~~CAAEZ~~,UAAU,CAAG,gCAAgC,CAAG,yBAA0B,CAAAF,QAAA,CAEhFA,QAAQ,CACL,CAAC,CACJ,CAAC,CAEV;;;;"}
1	+ {"version":3,"file":"SelectorSupportText.js","sources":["../../../../../../src/components/Form/Selector/SelectorSupportText.tsx"],"sourcesContent":["import { Box } from '~components/Box';\nimport { Text } from '~components/Typography/Text';\nimport { castWebType, getPlatformType } from '~utils';\n\nconst SelectorSupportText = ({\n children,\n id,\n isNegative,\n size,\n}: {\n children: React.ReactNode;\n id?: string;\n isNegative?: boolean;\n size: 'small' \| 'medium' \| 'large';\n}): React.ReactElement => {\n const isReactNative = getPlatformType() === 'react-native';\n const sizeMapping = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n } as const;\n\n return (\n <Box id={id} display={isReactNative ? undefined : castWebType('contents')}>\n <Text\n variant=\"caption\"\n size={sizeMapping[size]}\n as={isReactNative ? undefined : 'span'}\n color={isNegative ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'}\n >\n {children}\n </Text>\n </Box>\n );\n};\n\nexport { SelectorSupportText };\n"],"names":["SelectorSupportText","_ref","children","id","isNegative","size","isReactNative","getPlatformType","sizeMapping","small","medium","large","_jsx","Box","display","undefined","castWebType","Text","variant","as","color"],"mappings":";;;;;;;;;;AAIM,IAAAA,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,CAUC,CATxB,IAAAC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,EAAE,CAAAF,IAAA,CAAFE,EAAE,CACFC,UAAU,CAAAH,IAAA,CAAVG,UAAU,CACVC,IAAI,CAAAJ,IAAA,CAAJI,IAAI,CAOJ,IAAMC,aAAa,CAAGC,eAAe,EAAE,GAAK,cAAc,CAC1D,IAAMC,WAAW,CAAG,CAClBC,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,QACT,CAAU,CAEV,OACEC,GAAA,CAACC,GAAG,CAAA,CAACV,EAAE,CAAEA,EAAG,CAACW,OAAO,CAAER,aAAa,CAAGS,SAAS,CAAGC,WAAW,CAAC,UAAU,CAAE,CAAAd,QAAA,CACxEU,GAAA,CAACK,IAAI,CAAA,CACHC,OAAO,CAAC,SAAS,CACjBb,IAAI,CAAEG,WAAW,CAACH,IAAI,CAAE,CACxBc,EAAE,CAAEb,aAAa,CAAGS,SAAS,CAAG,MAAO,CACvCK,KAAK,CAAEhB,UAAU,CAAG,gCAAgC,CAAG,yBAA0B,CAAAF,QAAA,CAEhFA,QAAQ,CACL,CAAC,CACJ,CAAC,CAEV;;;;"}

package/build/lib/native/components/Form/Selector/SelectorTitle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectorTitle.js","sources":["../../../../../../src/components/Form/Selector/SelectorTitle.tsx"],"sourcesContent":["import BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography/Text';\n\nconst SelectorTitle = ({\n children,\n isDisabled,\n size = 'medium',\n}: {\n children: React.ReactNode;\n isDisabled?: boolean;\n size: 'small' \| 'medium';\n}): React.ReactElement => {\n return (\n <>\n <BaseBox marginLeft=\"spacing.2\" />\n <Text\n size={size}\n color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n >\n {children}\n </Text>\n </>\n );\n};\n\nexport { SelectorTitle };\n"],"names":["SelectorTitle","_ref","children","isDisabled","_ref$size","size","_jsxs","_Fragment","_jsx","BaseBox","marginLeft","Text","color"],"mappings":";;;;AAGM,IAAAA,aAAa,CAAG,SAAhBA,aAAaA,CAAAC,IAAA,CAQO,CAAA,IAPxBC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,UAAU,CAAAF,IAAA,CAAVE,UAAU,CAAAC,SAAA,CAAAH,IAAA,CACVI,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAG,KAAA,CAAA,CAAA,QAAQ,CAAAA,SAAA,CAMf,OACEE,IAAA,CAAAC,QAAA,CAAAL,CAAAA,QAAA,EACEM,GAAA,CAACC,OAAO,CAACC,CAAAA,UAAU,CAAC,WAAW,CAAE,CAAC,CAClCF,GAAA,CAACG,IAAI,CACHN,CAAAA,IAAI,CAAEA,IAAK,CACXO,KAAK,CAAET,UAAU,CAAG,4BAA4B,CAAG,0BAA2B,CAAAD,QAAA,CAE7EA,QAAQ,CACL,CAAC,CAAA,CACP,CAAC,CAEP;;;;"}
1	+ {"version":3,"file":"SelectorTitle.js","sources":["../../../../../../src/components/Form/Selector/SelectorTitle.tsx"],"sourcesContent":["import BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography/Text';\n\nconst SelectorTitle = ({\n children,\n isDisabled,\n size = 'medium',\n}: {\n children: React.ReactNode;\n isDisabled?: boolean;\n size: 'small' \| 'medium' \| 'large';\n}): React.ReactElement => {\n return (\n <>\n <BaseBox marginLeft=\"spacing.2\" />\n <Text\n size={size}\n color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n >\n {children}\n </Text>\n </>\n );\n};\n\nexport { SelectorTitle };\n"],"names":["SelectorTitle","_ref","children","isDisabled","_ref$size","size","_jsxs","_Fragment","_jsx","BaseBox","marginLeft","Text","color"],"mappings":";;;;AAGM,IAAAA,aAAa,CAAG,SAAhBA,aAAaA,CAAAC,IAAA,CAQO,CAAA,IAPxBC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,UAAU,CAAAF,IAAA,CAAVE,UAAU,CAAAC,SAAA,CAAAH,IAAA,CACVI,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAG,KAAA,CAAA,CAAA,QAAQ,CAAAA,SAAA,CAMf,OACEE,IAAA,CAAAC,QAAA,CAAAL,CAAAA,QAAA,EACEM,GAAA,CAACC,OAAO,CAACC,CAAAA,UAAU,CAAC,WAAW,CAAE,CAAC,CAClCF,GAAA,CAACG,IAAI,CACHN,CAAAA,IAAI,CAAEA,IAAK,CACXO,KAAK,CAAET,UAAU,CAAG,4BAA4B,CAAG,0BAA2B,CAAAD,QAAA,CAE7EA,QAAQ,CACL,CAAC,CAAA,CACP,CAAC,CAEP;;;;"}

package/build/lib/native/components/Form/formTokens.js ADDED Viewed

@@ -0,0 +1,8 @@
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import { size } from '../../tokens/global/size.js';
+var labelTextSize={top:{small:'small',medium:'small',large:'medium'},left:{small:'small',medium:'medium',large:'large'}};var labelOptionalIndicatorTextSize={small:'small',medium:'small',large:'medium'};var hintTextSize={small:'small',medium:'small',large:'medium'};var hintIconSize={small:'small',medium:'small',large:'medium'};var hintMarginTop={small:'spacing.2',medium:'spacing.2',large:'spacing.3'};var labelMarginBottom={small:'spacing.2',medium:'spacing.2',large:'spacing.3'};var labelWidth={small:size[120],medium:size[120],large:size[176]};var labelLeftMarginRight={small:'spacing.3',medium:'spacing.4',large:'spacing.5'};
+export { hintIconSize, hintMarginTop, hintTextSize, labelLeftMarginRight, labelMarginBottom, labelOptionalIndicatorTextSize, labelTextSize, labelWidth };
+//# sourceMappingURL=formTokens.js.map

package/build/lib/native/components/Form/formTokens.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"formTokens.js","sources":["../../../../../src/components/Form/formTokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nconst labelTextSize = {\n top: {\n small: 'small',\n medium: 'small',\n large: 'medium',\n },\n left: {\n small: 'small',\n medium: 'medium',\n large: 'large',\n },\n} as const;\n\nconst labelOptionalIndicatorTextSize = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\nconst hintTextSize = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\nconst hintIconSize = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\nconst hintMarginTop = {\n small: 'spacing.2',\n medium: 'spacing.2',\n large: 'spacing.3',\n} as const;\n\nconst labelMarginBottom = {\n small: 'spacing.2',\n medium: 'spacing.2',\n large: 'spacing.3',\n} as const;\n\nconst labelWidth = {\n small: size[120],\n medium: size[120],\n large: size[176],\n} as const;\n\nconst labelLeftMarginRight = {\n small: 'spacing.3',\n medium: 'spacing.4',\n large: 'spacing.5',\n} as const;\n\nexport {\n labelTextSize,\n labelOptionalIndicatorTextSize,\n hintTextSize,\n hintIconSize,\n hintMarginTop,\n labelMarginBottom,\n labelWidth,\n labelLeftMarginRight,\n};\n"],"names":["labelTextSize","top","small","medium","large","left","labelOptionalIndicatorTextSize","hintTextSize","hintIconSize","hintMarginTop","labelMarginBottom","labelWidth","size","labelLeftMarginRight"],"mappings":";;;;AAEM,IAAAA,aAAa,CAAG,CACpBC,GAAG,CAAE,CACHC,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,QACT,CAAC,CACDC,IAAI,CAAE,CACJH,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,QAAQ,CAChBC,KAAK,CAAE,OACT,CACF,EAEM,IAAAE,8BAA8B,CAAG,CACrCJ,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,QACT,EAEM,IAAAG,YAAY,CAAG,CACnBL,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,QACT,EAEM,IAAAI,YAAY,CAAG,CACnBN,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,QACT,EAEM,IAAAK,aAAa,CAAG,CACpBP,KAAK,CAAE,WAAW,CAClBC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,EAEM,IAAAM,iBAAiB,CAAG,CACxBR,KAAK,CAAE,WAAW,CAClBC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,EAEM,IAAAO,UAAU,CAAG,CACjBT,KAAK,CAAEU,IAAI,CAAC,GAAG,CAAC,CAChBT,MAAM,CAAES,IAAI,CAAC,GAAG,CAAC,CACjBR,KAAK,CAAEQ,IAAI,CAAC,GAAG,CACjB,EAEM,IAAAC,oBAAoB,CAAG,CAC3BX,KAAK,CAAE,WAAW,CAClBC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT;;;;"}