@razorpay/blade 11.8.2 → 11.9.1

package/build/lib/native/components/index.js

@@ -354,7 +354,7 @@ export { Tooltip } from './Tooltip/Tooltip.native.js';
 export { TooltipInteractiveWrapper } from './Tooltip/TooltipInteractiveWrapper.native.js';
 export { ToastContainer } from './Toast/ToastContainer.native.js';
 export { useToast } from './Toast/useToast.js';
-export { Heading } from './Typography/Heading/Heading.js';
+export { Heading, getHeadingProps } from './Typography/Heading/Heading.js';
 export { Text, getTextProps } from './Typography/Text/Text.js';
 export { Code } from './Typography/Code/Code.js';
 export { Display } from './Typography/Display/Display.js';

package/build/lib/native/tokens/global/size.js

@@ -1,4 +1,4 @@
-var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,8:8,10:10,12:12,16:16,18:18,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,56:56,100:100,120:120,140:140,160:160,200:200,240:240,300:300,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
+var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,8:8,10:10,12:12,16:16,18:18,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,56:56,100:100,120:120,140:140,160:160,176:176,200:200,240:240,300:300,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
 
 export { size };
 //# sourceMappingURL=size.js.map

package/build/lib/native/tokens/global/size.js.map

@@ -1 +1 @@
-{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  32: 32,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 60 px */\n  56: 56,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 300 px */\n  300: 300,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}
+{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  32: 32,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 60 px */\n  56: 56,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 300 px */\n  300: 300,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}

package/build/lib/native/utils/getFocusRingStyles/getFocusRingStyles.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFocusRingStyles.native.js","sources":["../../../../../src/utils/getFocusRingStyles/getFocusRingStyles.native.ts"],"sourcesContent":["import type { CSSProperties } from 'styled-components';\nimport type { Theme } from '../../components/BladeProvider';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction getFocusRingStyles(_: { theme: Theme; negativeOffset?: boolean }): CSSProperties {\n  // React Native does not need focus rings\n  return {};\n}\n\nexport { getFocusRingStyles };\n"],"names":["getFocusRingStyles","_"],"mappings":"AAIA,SAASA,kBAAkBA,CAACC,CAA6C,CAAiB,CAExF,OAAO,EAAE,CACX;;;;"}
+{"version":3,"file":"getFocusRingStyles.native.js","sources":["../../../../../src/utils/getFocusRingStyles/getFocusRingStyles.native.ts"],"sourcesContent":["import type { CSSProperties } from 'styled-components';\nimport type { GetFocusRingArgs } from './types';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction getFocusRingStyles(_: GetFocusRingArgs): CSSProperties {\n  // React Native does not need focus rings\n  return {};\n}\n\nexport { getFocusRingStyles };\n"],"names":["getFocusRingStyles","_"],"mappings":"AAIA,SAASA,kBAAkBA,CAACC,CAAmB,CAAiB,CAE9D,OAAO,EAAE,CACX;;;;"}

package/build/lib/web/development/components/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import React__default from 'react';
 import { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext.js';
 import './CheckboxIcon/index.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 '../../utils/metaAttribute/index.js';
@@ -17,8 +17,11 @@ import { SelectorSupportText } from '../Form/Selector/SelectorSupportText.js';
 import { SelectorInput } from '../Form/Selector/SelectorInput.web.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/logger/index.js';
+import '../../utils/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { throwBladeError } from '../../utils/logger/logger.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
@@ -79,7 +82,13 @@ var _Checkbox = function _Checkbox(_ref, ref) {
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
   var _isChecked = isChecked !== null && isChecked !== void 0 ? isChecked : groupProps === null || groupProps === void 0 ? void 0 : (_groupProps$state = groupProps.state) === null || _groupProps$state === void 0 ? void 0 : _groupProps$state.isChecked(value);
   var _size = (_groupProps$size = groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
-  var isSmall = _size === 'small';
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var formHintSize = {
+    small: 'medium',
+    medium: 'medium',
+    large: 'large'
+  };
 
   // only show error when the self validation is set to error
   // Since we don't want to show errorText inside the group
@@ -116,6 +125,9 @@ var _Checkbox = function _Checkbox(_ref, ref) {
     state = _useCheckbox.state,
     ids = _useCheckbox.ids,
     inputProps = _useCheckbox.inputProps;
+
+  // Checkbox icon's size & margin + margin-left of SelectorTitle which is 2
+  var helpTextLeftSpacing = makeSize(checkboxSizes.icon[size].width + theme.spacing[3]);
   return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
     name: MetaConstants.Checkbox,
     testID: testID
@@ -149,14 +161,16 @@ var _Checkbox = function _Checkbox(_ref, ref) {
             children: children
           }) : null]
         }), showSupportingText ? /*#__PURE__*/jsx(BaseBox, {
-          marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
+          marginLeft: helpTextLeftSpacing,
           children: /*#__PURE__*/jsx(SelectorSupportText, {
+            size: _size,
             id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
             children: helpText
           })
         }) : null]
       })
     }), /*#__PURE__*/jsx(FormHint, {
+      size: formHintSize[_size],
       errorText: errorText,
       errorTextId: ids === null || ids === void 0 ? void 0 : ids.errorTextId,
       type: validationState === 'error' ? 'error' : 'help'

package/build/lib/web/development/components/Checkbox/Checkbox.js.map

@@ -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","isEmpty","props","undefined","filter","Boolean","join","throwBladeError","message","concat","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","_objectSpread","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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"}
+{"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","isEmpty","props","undefined","filter","Boolean","join","throwBladeError","message","concat","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","_objectSpread","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/web/development/components/Checkbox/CheckboxGroup/CheckboxGroup.js

@@ -84,6 +84,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
           position: labelPosition,
           id: ids.labelId,
           accessibilityText: accessibilityText,
+          size: size,
           children: label
         }) : null, /*#__PURE__*/jsxs(BaseBox, {
           children: [/*#__PURE__*/jsx(BaseBox, {
@@ -96,6 +97,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
               }, index);
             })
           }), /*#__PURE__*/jsx(FormHint, {
+            size: size,
             errorText: errorText,
             helpText: helpText,
             type: validationState === 'error' ? 'error' : 'help'

package/build/lib/web/development/components/Checkbox/CheckboxGroup/CheckboxGroup.js.map

@@ -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","concat","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","childCount","React","Children","count","_jsx","CheckboxGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","FormLabel","as","id","display","flexDirection","map","child","index","marginBottom","makeSize","FormHint","type"],"mappings":"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"}
+{"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","concat","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","childCount","React","Children","count","_jsx","CheckboxGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","FormLabel","as","id","display","flexDirection","map","child","index","marginBottom","makeSize","FormHint","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6FA,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAiB2B;AAAA,EAAA,IAhB5CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,eAAA,GAAAJ,IAAA,CACRK,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;IAAAE,eAAA,GAAAN,IAAA,CAClBO,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;IAAAE,qBAAA,GAAAR,IAAA,CAClBS,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,qBAAA;IAAAE,kBAAA,GAAAV,IAAA,CAC3BW,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,kBAAA;IACrBE,eAAe,GAAAZ,IAAA,CAAfY,eAAe;IACfC,SAAS,GAAAb,IAAA,CAATa,SAAS;IACTC,IAAI,GAAAd,IAAA,CAAJc,IAAI;IACJC,YAAY,GAAAf,IAAA,CAAZe,YAAY;IACZC,QAAQ,GAAAhB,IAAA,CAARgB,QAAQ;IACRC,KAAK,GAAAjB,IAAA,CAALiB,KAAK;IAAAC,SAAA,GAAAlB,IAAA,CACLmB,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IACfE,MAAM,GAAApB,IAAA,CAANoB,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,CAAAtB,IAAA,EAAAuB,SAAA,CAAA,CAAA;EAEd,IAAAC,iBAAA,GAA8BC,gBAAgB,CAAC;AAC7CV,MAAAA,YAAY,EAAZA,YAAY;AACZC,MAAAA,QAAQ,EAARA,QAAQ;AACRC,MAAAA,KAAK,EAALA,KAAK;AACLZ,MAAAA,UAAU,EAAVA,UAAU;AACVI,MAAAA,kBAAkB,EAAlBA,kBAAkB;AAClBF,MAAAA,UAAU,EAAVA,UAAU;AACVO,MAAAA,IAAI,EAAJA,IAAI;AACJH,MAAAA,aAAa,EAAbA,aAAa;AACbC,MAAAA,eAAe,EAAfA,eAAe;AACfO,MAAAA,IAAI,EAAJA,IAAAA;AACF,KAAC,CAAC;IAXMO,YAAY,GAAAF,iBAAA,CAAZE,YAAY;IAAEC,GAAG,GAAAH,iBAAA,CAAHG,GAAG,CAAA;AAazB,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,SAAS,GAAGnB,eAAe,KAAK,OAAO,IAAIC,SAAS,CAAA;AAC1D,EAAA,IAAMmB,YAAY,GAAG,CAACD,SAAS,IAAI5B,QAAQ,CAAA;AAC3C,EAAA,IAAM8B,iBAAiB,GAAAC,GAAAA,CAAAA,MAAA,CAAOH,SAAS,GAAGlB,SAAS,GAAG,EAAE,EAAA,GAAA,CAAA,CAAAqB,MAAA,CAAIF,YAAY,GAAG7B,QAAQ,GAAG,EAAE,CAAE,CAAA;EAC1F,IAAAgC,cAAA,GAA8BC,aAAa,CAAC;MAAEC,WAAW,EAAEP,KAAK,CAACO,WAAAA;AAAY,KAAC,CAAC;IAAvEC,iBAAiB,GAAAH,cAAA,CAAjBG,iBAAiB,CAAA;AACzB,EAAA,IAAMC,GAAG,GAAGC,aAAa,CAACC,KAAK,CAACF,GAAG,CAACpB,IAAI,CAAC,CAACmB,iBAAiB,CAAC,CAAA;EAC5D,IAAMI,UAAU,GAAGC,cAAK,CAACC,QAAQ,CAACC,KAAK,CAAC5C,QAAQ,CAAC,CAAA;EAEjD,oBACE6C,GAAA,CAACC,qBAAqB,EAAA;AAAC9B,IAAAA,KAAK,EAAES,YAAa;AAAAzB,IAAAA,QAAA,eACzC6C,GAAA,CAACE,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAKC,EAAAA,EAAAA,cAAc,CAAC7B,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;MAAApB,QAAA,eACtCkD,IAAA,CAACC,kBAAkB,EAAA;AACjBC,QAAAA,QAAQ,EAAE1C,aAAc;QACxB2C,UAAU,EAAE3B,GAAG,CAAC4B,OAAQ;AACxBC,QAAAA,aAAa,EAAC,gBAAgB;AAC9BpC,QAAAA,MAAM,EAAEA,MAAO;AAAAnB,QAAAA,QAAA,EAEdC,CAAAA,KAAK,gBACJ4C,GAAA,CAACW,SAAS,EAAA;AACRC,UAAAA,EAAE,EAAC,MAAM;AACTjD,UAAAA,kBAAkB,EAAEA,kBAAmB;AACvC4C,UAAAA,QAAQ,EAAE1C,aAAc;UACxBgD,EAAE,EAAEhC,GAAG,CAAC4B,OAAQ;AAChBtB,UAAAA,iBAAiB,EAAEA,iBAAkB;AACrCd,UAAAA,IAAI,EAAEA,IAAK;AAAAlB,UAAAA,QAAA,EAEVC,KAAAA;AAAK,SACG,CAAC,GACV,IAAI,eACRiD,IAAA,CAACH,OAAO,EAAA;UAAA/C,QAAA,EAAA,cACN6C,GAAA,CAACE,OAAO,EAAA;AAACY,YAAAA,OAAO,EAAC,MAAM;AAACC,YAAAA,aAAa,EAAC,QAAQ;AAAA5D,YAAAA,QAAA,EAC3C0C,cAAK,CAACC,QAAQ,CAACkB,GAAG,CAAC7D,QAAQ,EAAE,UAAC8D,KAAK,EAAEC,KAAK,EAAK;cAC9C,oBACElB,GAAA,CAACE,OAAO,EAAA;AAEAiB,gBAAAA,YAAY,EAAED,KAAK,KAAKtB,UAAU,GAAG,CAAC,GAAGwB,QAAQ,CAAC,CAAC,CAAC,GAAG3B,GAAG;AAAAtC,gBAAAA,QAAA,EAE/D8D,KAAAA;AAAK,eAAA,EAHDC,KAIE,CAAC,CAAA;aAEb,CAAA;AAAC,WACK,CAAC,eACVlB,GAAA,CAACqB,QAAQ,EAAA;AACPhD,YAAAA,IAAI,EAAEA,IAAK;AACXN,YAAAA,SAAS,EAAEA,SAAU;AACrBV,YAAAA,QAAQ,EAAEA,QAAS;AACnBiE,YAAAA,IAAI,EAAExD,eAAe,KAAK,OAAO,GAAG,OAAO,GAAG,MAAA;AAAO,WACtD,CAAC,CAAA;AAAA,SACK,CAAC,CAAA;OACQ,CAAA;KACb,CAAA,CAAA;AAAC,GACW,CAAC,CAAA;AAE5B;;;;"}

package/build/lib/web/development/components/Checkbox/CheckboxIcon/CheckboxIcon.js

@@ -26,6 +26,10 @@ var svgSize = {
   medium: {
     width: size[12],
     height: size[12]
+  },
+  large: {
+    width: size[16],
+    height: size[16]
   }
 };
 var CheckedIcon = function CheckedIcon(_ref) {

package/build/lib/web/development/components/Checkbox/CheckboxIcon/CheckboxIcon.js.map

@@ -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","_objectSpread","metaAttribute","name","Fade","show","styles","position","display","Boolean"],"mappings":"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"}
+{"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","_objectSpread","metaAttribute","name","Fade","show","styles","position","display","Boolean"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,OAAO,GAAG;AACdC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,IAAI,CAAC,CAAC,CAAC;IACdC,MAAM,EAAED,IAAI,CAAC,CAAC,CAAA;GACf;AACDE,EAAAA,MAAM,EAAE;AACNH,IAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;IACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;GAChB;AACDG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;IACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,GAAA;AACF,CAAC,CAAA;AAED,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAA+E;AAAA,EAAA,IAAzEC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEN,IAAI,GAAAK,IAAA,CAAJL,IAAI,CAAA;EAChC,IAAMD,KAAK,GAAGQ,SAAS,CAACV,OAAO,CAACG,IAAI,CAAC,CAACD,KAAK,CAAC,CAAA;EAC5C,IAAME,MAAM,GAAGM,SAAS,CAACV,OAAO,CAACG,IAAI,CAAC,CAACC,MAAM,CAAC,CAAA;EAE9C,oBACEO,GAAA,CAACC,GAAG,EAAA;AAACV,IAAAA,KAAK,EAAEA,KAAM;AAACE,IAAAA,MAAM,EAAEA,MAAO;AAACS,IAAAA,OAAO,EAAC,SAAS;AAACC,IAAAA,IAAI,EAAC,MAAM;IAAAC,QAAA,eAC9DJ,GAAA,CAACK,IAAI,EAAA;AACHC,MAAAA,QAAQ,EAAC,SAAS;AAClBC,MAAAA,QAAQ,EAAC,SAAS;AAClBC,MAAAA,CAAC,EAAC,4TAA4T;AAC9TL,MAAAA,IAAI,EAAEL,KAAM;AACZW,MAAAA,MAAM,EAAEX,KAAM;AACdY,MAAAA,WAAW,EAAC,KAAK;AACjBC,MAAAA,aAAa,EAAC,OAAO;AACrBC,MAAAA,cAAc,EAAC,OAAA;KAChB,CAAA;AAAC,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,KAAA,EAMjB;AAAA,EAAA,IALJhB,KAAK,GAAAgB,KAAA,CAALhB,KAAK;IACLN,IAAI,GAAAsB,KAAA,CAAJtB,IAAI,CAAA;EAKJ,IAAMD,KAAK,GAAGQ,SAAS,CAACV,OAAO,CAACG,IAAI,CAAC,CAACD,KAAK,CAAC,CAAA;EAC5C,IAAME,MAAM,GAAGM,SAAS,CAACV,OAAO,CAACG,IAAI,CAAC,CAACC,MAAM,CAAC,CAAA;EAE9C,oBACEO,GAAA,CAACC,GAAG,EAAA;AAACV,IAAAA,KAAK,EAAEA,KAAM;AAACE,IAAAA,MAAM,EAAEA,MAAO;AAACS,IAAAA,OAAO,EAAC,SAAS;AAACC,IAAAA,IAAI,EAAC,MAAM;IAAAC,QAAA,eAC9DJ,GAAA,CAACK,IAAI,EAAA;AACHC,MAAAA,QAAQ,EAAC,SAAS;AAClBC,MAAAA,QAAQ,EAAC,SAAS;AAClBC,MAAAA,CAAC,EAAC,0NAA0N;AAC5NL,MAAAA,IAAI,EAAEL,KAAM;AACZW,MAAAA,MAAM,EAAEX,KAAM;AACdY,MAAAA,WAAW,EAAC,KAAK;AACjBC,MAAAA,aAAa,EAAC,OAAO;AACrBC,MAAAA,cAAc,EAAC,OAAA;KAChB,CAAA;AAAC,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAUD,IAAMG,YAAY,GAAG,SAAfA,YAAYA,CAAAC,KAAA,EAMO;AAAA,EAAA,IALvBC,SAAS,GAAAD,KAAA,CAATC,SAAS;IACTC,eAAe,GAAAF,KAAA,CAAfE,eAAe;IACfC,UAAU,GAAAH,KAAA,CAAVG,UAAU;IACVC,UAAU,GAAAJ,KAAA,CAAVI,UAAU;IACV5B,IAAI,GAAAwB,KAAA,CAAJxB,IAAI,CAAA;AAEJ,EAAA,IAAA6B,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,SAAS,GAAGC,KAAK,CAACF,KAAK,EAAE,0CAA0C,CAAC,CAAA;AAC1E,EAAA,oBACEG,IAAA,CAACC,mBAAmB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AAClBpC,IAAAA,IAAI,EAAEA,IAAK;AACX0B,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,UAAU,EAAEA,UAAW;AACvBH,IAAAA,SAAS,EAAE,CAAC,EAAEA,SAAS,IAAIC,eAAe,CAAA;AAAE,GAAA,EACxCW,aAAa,CAAC;AAAEC,IAAAA,IAAI,EAAE,uBAAA;AAAwB,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAA1B,QAAA,EAAA,cAEpDJ,GAAA,CAAC+B,IAAI,EAAA;AAACC,MAAAA,IAAI,EAAEd,eAAgB;AAACe,MAAAA,MAAM,EAAE;AAAEC,QAAAA,QAAQ,EAAE,UAAU;AAAEC,QAAAA,OAAO,EAAE,MAAA;OAAS;MAAA/B,QAAA,eAC7EJ,GAAA,CAACa,iBAAiB,EAAA;AAACrB,QAAAA,IAAI,EAAEA,IAAK;AAACM,QAAAA,KAAK,EAAE0B,SAAAA;OAAY,CAAA;AAAC,KAC/C,CAAC,eACPxB,GAAA,CAAC+B,IAAI,EAAA;AACHC,MAAAA,IAAI,EAAEI,OAAO,CAACnB,SAAS,CAAC,IAAI,CAACC,eAAgB;AAC7Ce,MAAAA,MAAM,EAAE;AAAEC,QAAAA,QAAQ,EAAE,UAAU;AAAEC,QAAAA,OAAO,EAAE,MAAA;OAAS;AAAA/B,MAAAA,QAAA,EAEjDa,SAAS,gBAAGjB,GAAA,CAACJ,WAAW,EAAA;AAACJ,QAAAA,IAAI,EAAEA,IAAK;AAACM,QAAAA,KAAK,EAAE0B,SAAAA;AAAU,OAAE,CAAC,GAAG,IAAA;AAAI,KAC7D,CAAC,CAAA;AAAA,GAAA,CACY,CAAC,CAAA;AAE1B;;;;"}

package/build/lib/web/development/components/Checkbox/checkboxTokens.js

@@ -5,12 +5,16 @@ var checkboxSizes = {
   group: {
     gap: {
       small: {
-        mobile: 'spacing.2',
-        desktop: 'spacing.0'
-      },
-      medium: {
         mobile: 'spacing.3',
         desktop: 'spacing.2'
+      },
+      medium: {
+        mobile: 'spacing.4',
+        desktop: 'spacing.3'
+      },
+      large: {
+        mobile: 'spacing.5',
+        desktop: 'spacing.4'
       }
     }
   },
@@ -22,6 +26,10 @@ var checkboxSizes = {
     medium: {
       width: size[16],
       height: size[16]
+    },
+    large: {
+      width: size[20],
+      height: size[20]
     }
   }
 };

package/build/lib/web/development/components/Checkbox/checkboxTokens.js.map

@@ -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","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDE,EAAAA,IAAI,EAAE;AACJJ,IAAAA,KAAK,EAAE;AACLK,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDH,IAAAA,MAAM,EAAE;AACNE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,KAAA;AACF,GAAA;AACF,EAAU;AAsBV,IAAME,kBAAsC,GAAG;AAC7CC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMI,mBAA6C,GAAG;EACpD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVF,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDF,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
+{"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","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDE,MAAAA,KAAK,EAAE;AACLH,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDG,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE;AACLM,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDJ,IAAAA,MAAM,EAAE;AACNG,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDH,IAAAA,KAAK,EAAE;AACLE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,KAAA;AACF,GAAA;AACF,EAAU;AAsBV,IAAME,kBAAsC,GAAG;AAC7CC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMI,mBAA6C,GAAG;EACpD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVF,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDF,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}

package/build/lib/web/development/components/Form/CharacterCounter/CharacterCounter.js

@@ -1,12 +1,16 @@
+import { hintTextSize } from '../formTokens.js';
 import '../../Typography/index.js';
 import { jsxs } from 'react/jsx-runtime';
 import { Text } from '../../Typography/Text/Text.js';
 
 var CharacterCounter = function CharacterCounter(_ref) {
   var currentCount = _ref.currentCount,
-    maxCount = _ref.maxCount;
+    maxCount = _ref.maxCount,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size;
   return /*#__PURE__*/jsxs(Text, {
     variant: "caption",
+    size: hintTextSize[size],
     weight: "regular",
     color: "surface.text.gray.muted",
     children: [currentCount, "/", maxCount]

package/build/lib/web/development/components/Form/CharacterCounter/CharacterCounter.js.map

@@ -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":";;;;IAQaA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC3BC,YAAY,GAAAD,IAAA,CAAZC,YAAY;IACZC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAA;EAAA,oBAERC,IAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,OAAO,EAAC,SAAS;AAACC,IAAAA,MAAM,EAAC,SAAS;AAACC,IAAAA,KAAK,EAAC,yBAAyB;AAAAC,IAAAA,QAAA,EACrEP,CAAAA,YAAY,EAAC,GAAC,EAACC,QAAQ,CAAA;AAAA,GACpB,CAAC,CAAA;AAAA;;;;"}
+{"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":";;;;;IAUaA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC3BC,YAAY,GAAAD,IAAA,CAAZC,YAAY;IACZC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,SAAA,GAAAH,IAAA,CACRI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;EAAA,oBAEfE,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,OAAO,EAAC,SAAS;AACjBH,IAAAA,IAAI,EAAEI,YAAY,CAACJ,IAAI,CAAE;AACzBK,IAAAA,MAAM,EAAC,SAAS;AAChBC,IAAAA,KAAK,EAAC,yBAAyB;AAAAC,IAAAA,QAAA,EAE9BV,CAAAA,YAAY,EAAC,GAAC,EAACC,QAAQ,CAAA;AAAA,GACpB,CAAC,CAAA;AAAA;;;;"}

package/build/lib/web/development/components/Form/FormHint.js

@@ -1,5 +1,6 @@
 import 'react';
 import { FormHintWrapper } from './FormHintWrapper.web.js';
+import { hintMarginTop, hintTextSize, hintIconSize } from './formTokens.js';
 import '../Typography/Text/index.js';
 import '../Box/BaseBox/index.js';
 import '../Icons/index.js';
@@ -17,16 +18,17 @@ var HintText = function HintText(_ref) {
   var Icon = _ref.icon,
     children = _ref.children,
     id = _ref.id,
-    color = _ref.color;
+    color = _ref.color,
+    size = _ref.size;
   var isReactNative = getPlatformType() === 'react-native';
   return /*#__PURE__*/jsx(BaseBox, {
-    marginTop: "spacing.2",
+    marginTop: hintMarginTop[size],
     id: id,
     children: /*#__PURE__*/jsxs(FormHintWrapper, {
       children: [Icon ? /*#__PURE__*/jsx(Icon, {}) : null, /*#__PURE__*/jsx(Text, {
         as: isReactNative ? undefined : 'span',
         color: color,
-        size: "small",
+        size: hintTextSize[size],
         variant: "caption",
         children: children
       })]
@@ -34,35 +36,39 @@ var HintText = function HintText(_ref) {
   });
 };
 var Icons = {
-  error: function error() {
+  error: function error(_ref2) {
+    var size = _ref2.size;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(InfoIcon, {
         color: "feedback.icon.negative.intense",
-        size: "small"
+        size: hintIconSize[size]
       }), /*#__PURE__*/jsx(BaseBox, {
         marginRight: "spacing.2"
       })]
     });
   },
-  success: function success() {
+  success: function success(_ref3) {
+    var size = _ref3.size;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(CheckIcon, {
         color: "feedback.icon.positive.intense",
-        size: "small"
+        size: hintIconSize[size]
       }), /*#__PURE__*/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 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',
@@ -73,17 +79,28 @@ var FormHint = function FormHint(_ref2) {
   var showHelp = !showError && !showSuccess && helpText;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [showHelp && /*#__PURE__*/jsx(HintText, {
+      size: size,
       id: helpTextId,
       color: colors.help,
       children: helpText
     }), showError && /*#__PURE__*/jsx(HintText, {
+      size: size,
       id: errorTextId,
-      icon: Icons.error,
+      icon: function icon() {
+        return Icons.error({
+          size: size
+        });
+      },
       color: colors.error,
       children: errorText
     }), showSuccess && /*#__PURE__*/jsx(HintText, {
+      size: size,
       id: successTextId,
-      icon: Icons.success,
+      icon: function icon() {
+        return Icons.success({
+          size: size
+        });
+      },
       color: colors.success,
       children: successText
     })]

package/build/lib/web/development/components/Form/FormHint.js.map

@@ -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":"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"}
+{"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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"}