@razorpay/blade 12.59.0 → 12.60.1

package/build/lib/native/components/Box/BaseBox/types/propsTypes.js.map

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

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

@@ -0,0 +1,12 @@
+import 'react';
+import '../Typography/Heading/Heading.js';
+import { Text } from '../Typography/Text/Text.js';
+import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
+import { jsx } from 'react/jsx-runtime';
+
+var CounterInput=function CounterInput(_props){throwBladeError({message:'CounterInput is not yet implemented for native',moduleName:'CounterInput'});return jsx(Text,{children:"CounterInput Component is not available for Native mobile apps."});};
+
+export { CounterInput };
+//# sourceMappingURL=CounterInput.native.js.map

package/build/lib/native/components/CounterInput/CounterInput.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CounterInput.native.js","sources":["../../../../../src/components/CounterInput/CounterInput.native.tsx"],"sourcesContent":["import React from 'react';\n/* eslint-disable react/jsx-no-useless-fragment */\nimport type { CounterInputProps } from './types';\nimport { Text } from '~components/Typography';\nimport { throwBladeError } from '~utils/logger';\n\nconst CounterInput = (_props: CounterInputProps): React.ReactElement => {\n  throwBladeError({\n    message: 'CounterInput is not yet implemented for native',\n    moduleName: 'CounterInput',\n  });\n\n  return <Text>CounterInput Component is not available for Native mobile apps.</Text>;\n};\n\nexport { CounterInput };\n"],"names":["CounterInput","_props","throwBladeError","message","moduleName","_jsx","Text","children"],"mappings":";;;;;;;;AAMM,IAAAA,YAAY,CAAG,SAAfA,YAAYA,CAAIC,MAAyB,CAAyB,CACtEC,eAAe,CAAC,CACdC,OAAO,CAAE,gDAAgD,CACzDC,UAAU,CAAE,cACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAACC,IAAI,CAAAC,CAAAA,QAAA,CAAC,iEAA+D,CAAM,CAAC,CACrF;;;;"}

package/build/lib/native/components/CounterInput/CounterInputContext.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+var CounterInputContext=React__default.createContext({isInsideCounterInput:false});CounterInputContext.Provider;var useCounterInputContext=function useCounterInputContext(){return React__default.useContext(CounterInputContext);};
+
+export { useCounterInputContext };
+//# sourceMappingURL=CounterInputContext.js.map

package/build/lib/native/components/CounterInput/CounterInputContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CounterInputContext.js","sources":["../../../../../src/components/CounterInput/CounterInputContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { CounterInputContextType } from './types';\n\nconst CounterInputContext = React.createContext<CounterInputContextType>({\n  isInsideCounterInput: false,\n});\nconst CounterInputProvider = CounterInputContext.Provider;\n\nconst useCounterInputContext = (): CounterInputContextType => {\n  return React.useContext(CounterInputContext);\n};\n\nexport { useCounterInputContext, CounterInputProvider };\n"],"names":["CounterInputContext","React","createContext","isInsideCounterInput","Provider","useCounterInputContext","useContext"],"mappings":";;AAGA,IAAMA,mBAAmB,CAAGC,cAAK,CAACC,aAAa,CAA0B,CACvEC,oBAAoB,CAAE,KACxB,CAAC,CAAC,CAC2BH,mBAAmB,CAACI,SAE3C,IAAAC,sBAAsB,CAAG,SAAzBA,sBAAsBA,EAAkC,CAC5D,OAAOJ,cAAK,CAACK,UAAU,CAACN,mBAAmB,CAAC,CAC9C;;;;"}

package/build/lib/native/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 { 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;;;;"}
+{"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?: 'xsmall' | '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.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 { 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 type { IconComponent } from '~components/Icons';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\nimport { Box } from '~components/Box';\n\ntype HintTextProps = {\n  icon?: IconComponent;\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 ? (\n          // offset block element 2px down to align with text\n          <Box flexShrink={0} marginTop=\"spacing.1\">\n            <Icon />\n          </Box>\n        ) : null}\n        <Text\n          as={isReactNative ? undefined : 'span'}\n          color={color}\n          size={hintTextSize[size]}\n          variant=\"caption\"\n          wordBreak=\"break-word\"\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    <InfoIcon\n      display={'block' as never}\n      color=\"feedback.icon.negative.intense\"\n      size={hintIconSize[size]}\n    />\n  ),\n  success: ({ size }: { size: 'small' | 'medium' | 'large' }): ReactElement => (\n    <CheckIcon\n      display={'block' as never}\n      color=\"feedback.icon.positive.intense\"\n      size={hintIconSize[size]}\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","Box","flexShrink","Text","as","undefined","hintTextSize","variant","wordBreak","Icons","error","_ref2","InfoIcon","display","hintIconSize","success","_ref3","CheckIcon","FormHint","_ref4","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","_ref4$size","colors","help","showError","showSuccess","showHelp","_Fragment"],"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 type { IconComponent } from '~components/Icons';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\nimport { Box } from '~components/Box';\n\ntype HintTextProps = {\n  icon?: IconComponent;\n  children: string;\n  id?: string;\n  color: TextProps<{ variant: 'caption' }>['color'];\n  size: 'xsmall' | '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 ? (\n          // offset block element 2px down to align with text\n          <Box flexShrink={0} marginTop=\"spacing.1\">\n            <Icon />\n          </Box>\n        ) : null}\n        <Text\n          as={isReactNative ? undefined : 'span'}\n          color={color}\n          size={hintTextSize[size]}\n          variant=\"caption\"\n          wordBreak=\"break-word\"\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?: 'xsmall' | 'small' | 'medium' | 'large';\n};\n\nconst Icons = {\n  error: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <InfoIcon\n      display={'block' as never}\n      color=\"feedback.icon.negative.intense\"\n      size={hintIconSize[size]}\n    />\n  ),\n  success: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <CheckIcon\n      display={'block' as never}\n      color=\"feedback.icon.positive.intense\"\n      size={hintIconSize[size]}\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","Box","flexShrink","Text","as","undefined","hintTextSize","variant","wordBreak","Icons","error","_ref2","InfoIcon","display","hintIconSize","success","_ref3","CheckIcon","FormHint","_ref4","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","_ref4$size","colors","help","showError","showSuccess","showHelp","_Fragment"],"mappings":"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"}

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

@@ -1 +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  labelSuffix?: React.ReactNode;\n  labelTrailing?: React.ReactNode;\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  /**\n   * Suffix element to be shown for the input field\n   *\n   * @example\n   * ```jsx\n   * labelSuffix={\n   *  <Tooltip content=\"This is a tooltip\" placement=\"right\">\n   *    <TooltipInteractiveWrapper>\n   *        <InfoIcon size=\"small\" color=\"surface.icon.gray.subtle\" />\n   *    </TooltipInteractiveWrapper>\n   *  </Tooltip>\n   * }\n   * ```\n   */\n  labelSuffix?: React.ReactNode;\n\n  /**\n   * Trailing element to be shown for the input field\n   */\n  labelTrailing?: React.ReactNode;\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  labelSuffix,\n  labelTrailing,\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        alignSelf=\"flex-start\"\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={isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted'}\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]) : '100%';\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\n        width=\"100%\"\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'column' : 'row'}\n        alignItems={isLabelLeftPositioned ? 'flex-start' : 'center'}\n        marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" gap=\"spacing.2\">\n          <BaseBox>{textNode}</BaseBox>\n          {labelSuffix ? <BaseBox display=\"flex\">{labelSuffix}</BaseBox> : null}\n        </BaseBox>\n        {labelTrailing ? (\n          <BaseBox marginLeft={isLabelLeftPositioned ? 'spacing.0' : 'auto'}>\n            {labelTrailing}\n          </BaseBox>\n        ) : null}\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","labelSuffix","labelTrailing","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","Object","assign","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom","marginLeft"],"mappings":"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"}
+{"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?: 'xsmall' | 'small' | 'medium' | 'large';\n  labelSuffix?: React.ReactNode;\n  labelTrailing?: React.ReactNode;\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  /**\n   * Suffix element to be shown for the input field\n   *\n   * @example\n   * ```jsx\n   * labelSuffix={\n   *  <Tooltip content=\"This is a tooltip\" placement=\"right\">\n   *    <TooltipInteractiveWrapper>\n   *        <InfoIcon size=\"small\" color=\"surface.icon.gray.subtle\" />\n   *    </TooltipInteractiveWrapper>\n   *  </Tooltip>\n   * }\n   * ```\n   */\n  labelSuffix?: React.ReactNode;\n\n  /**\n   * Trailing element to be shown for the input field\n   */\n  labelTrailing?: React.ReactNode;\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  labelSuffix,\n  labelTrailing,\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        alignSelf=\"flex-start\"\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={isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted'}\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]) : '100%';\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\n        width=\"100%\"\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'column' : 'row'}\n        alignItems={isLabelLeftPositioned ? 'flex-start' : 'center'}\n        marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" gap=\"spacing.2\">\n          <BaseBox>{textNode}</BaseBox>\n          {labelSuffix ? <BaseBox display=\"flex\">{labelSuffix}</BaseBox> : null}\n        </BaseBox>\n        {labelTrailing ? (\n          <BaseBox marginLeft={isLabelLeftPositioned ? 'spacing.0' : 'auto'}>\n            {labelTrailing}\n          </BaseBox>\n        ) : null}\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","labelSuffix","labelTrailing","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","Object","assign","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom","marginLeft"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ 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'};
+var labelTextSize={top:{xsmall:'small',small:'small',medium:'small',large:'medium'},left:{xsmall:'small',small:'small',medium:'medium',large:'large'}};var labelOptionalIndicatorTextSize={xsmall:'small',small:'small',medium:'small',large:'medium'};var hintTextSize={xsmall:'small',small:'small',medium:'small',large:'medium'};var hintIconSize={xsmall:'small',small:'small',medium:'small',large:'medium'};var hintMarginTop={xsmall:'spacing.2',small:'spacing.2',medium:'spacing.2',large:'spacing.3'};var labelMarginBottom={xsmall:'spacing.2',small:'spacing.2',medium:'spacing.2',large:'spacing.3'};var labelWidth={xsmall:size[120],small:size[120],medium:size[120],large:size[176]};var labelLeftMarginRight={xsmall:'spacing.3',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

@@ -1 +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;;;;"}
+{"version":3,"file":"formTokens.js","sources":["../../../../../src/components/Form/formTokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nconst labelTextSize = {\n  top: {\n    xsmall: 'small',\n    small: 'small',\n    medium: 'small',\n    large: 'medium',\n  },\n  left: {\n    xsmall: 'small',\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n  },\n} as const;\n\nconst labelOptionalIndicatorTextSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintTextSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintIconSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintMarginTop = {\n  xsmall: 'spacing.2',\n  small: 'spacing.2',\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nconst labelMarginBottom = {\n  xsmall: 'spacing.2',\n  small: 'spacing.2',\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nconst labelWidth = {\n  xsmall: size[120],\n  small: size[120],\n  medium: size[120],\n  large: size[176],\n} as const;\n\nconst labelLeftMarginRight = {\n  xsmall: 'spacing.3',\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","xsmall","small","medium","large","left","labelOptionalIndicatorTextSize","hintTextSize","hintIconSize","hintMarginTop","labelMarginBottom","labelWidth","size","labelLeftMarginRight"],"mappings":";;;;AAEM,IAAAA,aAAa,CAAG,CACpBC,GAAG,CAAE,CACHC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,QACT,CAAC,CACDC,IAAI,CAAE,CACJJ,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,QAAQ,CAChBC,KAAK,CAAE,OACT,CACF,EAEM,IAAAE,8BAA8B,CAAG,CACrCL,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,QACT,EAEM,IAAAG,YAAY,CAAG,CACnBN,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,QACT,EAEM,IAAAI,YAAY,CAAG,CACnBP,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,OAAO,CACdC,MAAM,CAAE,OAAO,CACfC,KAAK,CAAE,QACT,EAEM,IAAAK,aAAa,CAAG,CACpBR,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WAAW,CAClBC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,EAEM,IAAAM,iBAAiB,CAAG,CACxBT,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WAAW,CAClBC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT,EAEM,IAAAO,UAAU,CAAG,CACjBV,MAAM,CAAEW,IAAI,CAAC,GAAG,CAAC,CACjBV,KAAK,CAAEU,IAAI,CAAC,GAAG,CAAC,CAChBT,MAAM,CAAES,IAAI,CAAC,GAAG,CAAC,CACjBR,KAAK,CAAEQ,IAAI,CAAC,GAAG,CACjB,EAEM,IAAAC,oBAAoB,CAAG,CAC3BZ,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WAAW,CAClBC,MAAM,CAAE,WAAW,CACnBC,KAAK,CAAE,WACT;;;;"}

package/build/lib/native/components/Input/BaseInput/BaseInput.js

@@ -40,8 +40,9 @@ import { useMergeRefs } from '../../../utils/useMergeRefs.js';
 import { getOuterMotionRef, getInnerMotionRef } from '../../../utils/getMotionRefs.js';
 import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { useInputGroupContext } from '../../InputGroup/InputGroupContext.js';
+import { useCounterInputContext } from '../../CounterInput/CounterInputContext.js';
 
-var _excluded=["as","label","labelPosition","placeholder","type","defaultValue","tags","showAllTags","activeTagIndex","setActiveTagIndex","name","value","onFocus","onChange","onInput","onBlur","onSubmit","onClick","onKeyDown","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","leadingIcon","prefix","trailingInteractionElement","onTrailingInteractionElementClick","leadingInteractionElement","suffix","trailingIcon","maxCharacters","textAlign","autoFocus","keyboardReturnKeyType","keyboardType","autoCompleteSuggestionType","trailingHeaderSlot","trailingFooterSlot","numberOfLines","id","componentName","accessibilityLabel","labelId","activeDescendant","hideLabelText","hideFormHint","hasPopup","popupId","isPopupExpanded","maxTagRows","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","autoCapitalize","setInputWrapperRef","testID","isDropdownTrigger","isLabelInsideInput","size","trailingButton","valueComponentType","isTableInputCell","showHintsAsTooltip","_motionMeta","role","tabIndex","leadingDropDown","trailingDropDown","labelSuffix","labelTrailing","valueSuffix","children"];var autoCompleteSuggestionTypeValues=['none','on','name','email','username','password','newPassword','oneTimeCode','telephone','postalCode','countryName','creditCardNumber','creditCardCSC','creditCardExpiry','creditCardExpiryMonth','creditCardExpiryYear'];var useTags=function useTags(tags,activeTagIndex,setActiveTagIndex){var visibleTagsCountRef=React__default.useRef(0);React__default.useEffect(function(){if(tags&&activeTagIndex>=0&&activeTagIndex<tags.length){var _tags$activeTagIndex,_tags$activeTagIndex$;var tagTitle=(_tags$activeTagIndex=tags[activeTagIndex])==null?void 0:(_tags$activeTagIndex$=_tags$activeTagIndex.props)==null?void 0:_tags$activeTagIndex$.children;if(tagTitle){announce(`Close ${tagTitle} Tag`);}}},[activeTagIndex,tags==null?void 0:tags.length]);var onTagLeft=function onTagLeft(){if(activeTagIndex<0){setActiveTagIndex==null?void 0:setActiveTagIndex(visibleTagsCountRef.current-1);}if(activeTagIndex>0){setActiveTagIndex==null?void 0:setActiveTagIndex(activeTagIndex-1);}};var onTagRight=function onTagRight(){if(activeTagIndex<visibleTagsCountRef.current-1){setActiveTagIndex==null?void 0:setActiveTagIndex(activeTagIndex+1);}};var onTagRemove=function onTagRemove(){if(activeTagIndex>=0&&activeTagIndex<visibleTagsCountRef.current&&tags){tags[activeTagIndex].props.onDismiss({tagIndex:activeTagIndex});}};var onInputKeydownTagHandler=function onInputKeydownTagHandler(key){if(tags&&tags.length>0){if(key==='ArrowRight'){onTagRight();}if(key==='ArrowLeft'){onTagLeft();}if(key==='Backspace'){onTagRemove();}}};return {onInputKeydownTagHandler:onInputKeydownTagHandler,visibleTagsCountRef:visibleTagsCountRef};};var useInput=function useInput(_ref){var value=_ref.value,defaultValue=_ref.defaultValue,onClick=_ref.onClick,onFocus=_ref.onFocus,onChange=_ref.onChange,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,onInput=_ref.onInput,onKeyDown=_ref.onKeyDown,onInputKeydownTagHandler=_ref.onInputKeydownTagHandler;if(__DEV__){if(value&&defaultValue){throwBladeError({message:`Either 'value' or 'defaultValue' shall be passed. This decides if the input field is controlled or uncontrolled`,moduleName:'Input'});}}var _React$useState=React__default.useState(defaultValue!=null?defaultValue:value),_React$useState2=_slicedToArray(_React$useState,2),inputValue=_React$useState2[0],setInputValue=_React$useState2[1];var handleOnFocus=React__default.useCallback(function(_ref2){var name=_ref2.name,value=_ref2.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value;_value=(_value$target$value=value==null?void 0:value.target.value)!=null?_value$target$value:'';}onFocus==null?void 0:onFocus({name:name,value:_value});},[onFocus]);var handleOnClick=React__default.useCallback(function(_ref3){var name=_ref3.name,value=_ref3.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$currentTarget$;_value=(_value$currentTarget$=value==null?void 0:value.currentTarget.value)!=null?_value$currentTarget$:'';}onClick==null?void 0:onClick({name:name,value:_value});},[onClick]);var handleOnSubmit=React__default.useCallback(function(_ref4){var name=_ref4.name,value=_ref4.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value2;_value=(_value$target$value2=value==null?void 0:value.target.value)!=null?_value$target$value2:'';}if(isReactNative()){onSubmit==null?void 0:onSubmit({name:name,value:_value});}},[onSubmit]);var handleOnBlur=React__default.useCallback(function(_ref5){var name=_ref5.name,value=_ref5.value;var _value='';if(getPlatformType()==='react-native'&&typeof value=='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value3;_value=(_value$target$value3=value==null?void 0:value.target.value)!=null?_value$target$value3:'';}onBlur==null?void 0:onBlur({name:name,value:_value});},[onBlur]);var handleOnChange=React__default.useCallback(function(_ref6){var name=_ref6.name,value=_ref6.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value4;_value=(_value$target$value4=value==null?void 0:value.target.value)!=null?_value$target$value4:'';}onChange==null?void 0:onChange({name:name,value:_value});setInputValue(_value);},[onChange]);var handleOnInput=React__default.useCallback(function(_ref7){var name=_ref7.name,value=_ref7.value;var _value='';if(getPlatformType()==='react-native'&&typeof value=='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value5;_value=(_value$target$value5=value==null?void 0:value.target.value)!=null?_value$target$value5:'';}onInput==null?void 0:onInput({name:name,value:_value});},[onInput]);var handleOnKeyDown=React__default.useCallback(function(_ref8){var name=_ref8.name,key=_ref8.key,code=_ref8.code,event=_ref8.event;onInputKeydownTagHandler(key);onKeyDown==null?void 0:onKeyDown({name:name,key:key,code:code,event:event});},[onKeyDown]);return {handleOnFocus:handleOnFocus,handleOnClick:handleOnClick,handleOnChange:handleOnChange,handleOnBlur:handleOnBlur,handleOnSubmit:handleOnSubmit,handleOnInput:handleOnInput,handleOnKeyDown:handleOnKeyDown,inputValue:inputValue};};var getHintType=function getHintType(_ref9){var validationState=_ref9.validationState,hasHelpText=_ref9.hasHelpText;if(validationState==='error'){return 'error';}if(validationState==='success'){return 'success';}if(hasHelpText){return 'help';}return 'help';};var getDescribedByElementId=function getDescribedByElementId(_ref0){var validationState=_ref0.validationState,hasErrorText=_ref0.hasErrorText,hasSuccessText=_ref0.hasSuccessText,hasHelpText=_ref0.hasHelpText,errorTextId=_ref0.errorTextId,successTextId=_ref0.successTextId,helpTextId=_ref0.helpTextId;if(validationState==='error'&&hasErrorText){return errorTextId;}if(validationState==='success'&&hasSuccessText){return successTextId;}if(hasHelpText){return helpTextId;}return '';};var FocusRingWrapper=styled(BaseBox)(function(_ref1){var theme=_ref1.theme,currentInteraction=_ref1.currentInteraction,isTableInputCell=_ref1.isTableInputCell,shouldAddLimitedFocus=_ref1.shouldAddLimitedFocus;return {borderRadius:makeBorderSize(isTableInputCell?theme.border.radius.none:theme.border.radius.medium),width:'100%','&:focus-within':!isTableInputCell&&(shouldAddLimitedFocus?currentInteraction==='focus':true)?Object.assign({},getFocusRingStyles(),{transitionDuration:castWebType(makeMotionTime(getIn(theme.motion.duration,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].duration))),transitionTimingFunction:castWebType(theme.motion.easing[baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].easing])}):{}};});var _BaseInput=function _BaseInput(_ref10,ref){var _inputGroupProps$isDi,_inputGroupProps$size;var _ref10$as=_ref10.as,as=_ref10$as===void 0?'input':_ref10$as,label=_ref10.label,_ref10$labelPosition=_ref10.labelPosition,labelPosition=_ref10$labelPosition===void 0?'top':_ref10$labelPosition,placeholder=_ref10.placeholder,_ref10$type=_ref10.type,type=_ref10$type===void 0?'text':_ref10$type,defaultValue=_ref10.defaultValue,tags=_ref10.tags,_ref10$showAllTags=_ref10.showAllTags,showAllTags=_ref10$showAllTags===void 0?false:_ref10$showAllTags,_ref10$activeTagIndex=_ref10.activeTagIndex,activeTagIndex=_ref10$activeTagIndex===void 0?-1:_ref10$activeTagIndex,setActiveTagIndex=_ref10.setActiveTagIndex,name=_ref10.name,value=_ref10.value,onFocus=_ref10.onFocus,onChange=_ref10.onChange,onInput=_ref10.onInput,onBlur=_ref10.onBlur,onSubmit=_ref10.onSubmit,onClick=_ref10.onClick,onKeyDown=_ref10.onKeyDown,isDisabled=_ref10.isDisabled,necessityIndicator=_ref10.necessityIndicator,validationState=_ref10.validationState,errorText=_ref10.errorText,helpText=_ref10.helpText,successText=_ref10.successText,isRequired=_ref10.isRequired,leadingIcon=_ref10.leadingIcon,prefix=_ref10.prefix,trailingInteractionElement=_ref10.trailingInteractionElement,onTrailingInteractionElementClick=_ref10.onTrailingInteractionElementClick,leadingInteractionElement=_ref10.leadingInteractionElement,suffix=_ref10.suffix,trailingIcon=_ref10.trailingIcon,maxCharacters=_ref10.maxCharacters,textAlign=_ref10.textAlign,autoFocus=_ref10.autoFocus,keyboardReturnKeyType=_ref10.keyboardReturnKeyType,keyboardType=_ref10.keyboardType,autoCompleteSuggestionType=_ref10.autoCompleteSuggestionType,trailingHeaderSlot=_ref10.trailingHeaderSlot,trailingFooterSlot=_ref10.trailingFooterSlot,numberOfLines=_ref10.numberOfLines,id=_ref10.id,componentName=_ref10.componentName,accessibilityLabel=_ref10.accessibilityLabel,labelId=_ref10.labelId,activeDescendant=_ref10.activeDescendant,hideLabelText=_ref10.hideLabelText,hideFormHint=_ref10.hideFormHint,hasPopup=_ref10.hasPopup,popupId=_ref10.popupId,isPopupExpanded=_ref10.isPopupExpanded,maxTagRows=_ref10.maxTagRows,shouldIgnoreBlurAnimation=_ref10.shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation=_ref10.setShouldIgnoreBlurAnimation,autoCapitalize=_ref10.autoCapitalize,setInputWrapperRef=_ref10.setInputWrapperRef,testID=_ref10.testID,isDropdownTrigger=_ref10.isDropdownTrigger,isLabelInsideInput=_ref10.isLabelInsideInput,_ref10$size=_ref10.size,size=_ref10$size===void 0?'medium':_ref10$size,trailingButton=_ref10.trailingButton,_ref10$valueComponent=_ref10.valueComponentType,valueComponentType=_ref10$valueComponent===void 0?'text':_ref10$valueComponent,_ref10$isTableInputCe=_ref10.isTableInputCell,isTableInputCell=_ref10$isTableInputCe===void 0?false:_ref10$isTableInputCe,_ref10$showHintsAsToo=_ref10.showHintsAsTooltip,showHintsAsTooltip=_ref10$showHintsAsToo===void 0?false:_ref10$showHintsAsToo,_motionMeta=_ref10._motionMeta,role=_ref10.role,tabIndex=_ref10.tabIndex,leadingDropDown=_ref10.leadingDropDown,trailingDropDown=_ref10.trailingDropDown,labelSuffix=_ref10.labelSuffix,labelTrailing=_ref10.labelTrailing,valueSuffix=_ref10.valueSuffix,children=_ref10.children,rest=_objectWithoutProperties(_ref10,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var inputRef=React__default.useRef(null);var mergedInputRef=useMergeRefs(ref,inputRef);var inputWrapperRef=React__default.useRef(null);var _useTags=useTags(tags,activeTagIndex,setActiveTagIndex),onInputKeydownTagHandler=_useTags.onInputKeydownTagHandler,visibleTagsCountRef=_useTags.visibleTagsCountRef;var _React$useState3=React__default.useState(false),_React$useState4=_slicedToArray(_React$useState3,2),showAllTagsWithAnimation=_React$useState4[0],setShowAllTagsWithAnimation=_React$useState4[1];var isReactNative=getPlatformType()==='react-native';var defaultRole=hasPopup?'combobox':undefined;var inputGroupProps=useInputGroupContext();var isInsideInputGroup=inputGroupProps.isInsideInputGroup;var _isDisabled=(_inputGroupProps$isDi=inputGroupProps.isDisabled)!=null?_inputGroupProps$isDi:isDisabled;var _size=(_inputGroupProps$size=inputGroupProps.size)!=null?_inputGroupProps$size:size;React__default.useEffect(function(){if(showAllTags){setShowAllTagsWithAnimation(true);}else if(maxTagRows!=='expandable'){setShowAllTagsWithAnimation(false);}},[showAllTags,maxTagRows]);var _useInput=useInput({defaultValue:defaultValue,value:value,onFocus:onFocus,onClick:onClick,onChange:onChange,onBlur:onBlur,onSubmit:onSubmit,onInput:onInput,onKeyDown:onKeyDown,onInputKeydownTagHandler:onInputKeydownTagHandler}),handleOnFocus=_useInput.handleOnFocus,handleOnChange=_useInput.handleOnChange,handleOnClick=_useInput.handleOnClick,handleOnBlur=_useInput.handleOnBlur,handleOnSubmit=_useInput.handleOnSubmit,handleOnInput=_useInput.handleOnInput,handleOnKeyDown=_useInput.handleOnKeyDown,inputValue=_useInput.inputValue;var _useFormId=useFormId(id),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isLabelLeftPositioned=labelPosition==='left'&&matchedDeviceType==='desktop';var _useInteraction=useInteraction(),currentInteraction=_useInteraction.currentInteraction,setCurrentInteraction=_useInteraction.setCurrentInteraction;var _isRequired=isRequired||necessityIndicator==='required';var accessibilityProps=makeAccessible({required:Boolean(_isRequired),disabled:Boolean(_isDisabled),invalid:Boolean(validationState==='error'),describedBy:getDescribedByElementId({validationState:validationState,hasErrorText:Boolean(errorText),hasSuccessText:Boolean(successText),hasHelpText:Boolean(helpText),errorTextId:errorTextId,successTextId:successTextId,helpTextId:helpTextId}),label:accessibilityLabel,hasPopup:hasPopup,expanded:hasPopup?isPopupExpanded:undefined,controls:hasPopup?popupId:undefined,role:role!=null?role:defaultRole,activeDescendant:activeDescendant});var willRenderHintText=Boolean(helpText)||validationState==='success'&&Boolean(successText)||validationState==='error'&&Boolean(errorText);if(__DEV__){if(autoCompleteSuggestionType&&!autoCompleteSuggestionTypeValues.includes(autoCompleteSuggestionType)){throwBladeError({message:`Expected autoCompleteSuggestionType to be one of ${autoCompleteSuggestionTypeValues.join(', ')} but received ${autoCompleteSuggestionType}`,moduleName:'Input'});}}var isTextArea=as==='textarea';var hasLeadingDropdown=Boolean(leadingDropDown);var hasTrailingDropdown=Boolean(trailingDropDown);var shouldAddLimitedFocus=hasLeadingDropdown||hasTrailingDropdown;return jsxs(BaseBox,Object.assign({ref:getOuterMotionRef({_motionMeta:_motionMeta,ref:ref})},metaAttribute({name:componentName,testID:testID}),getStyledProps(rest),{children:[jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',justifyContent:isLabelLeftPositioned?'center':undefined,alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",width:"100%",children:[!hideLabelText&&!isLabelInsideInput&&label&&!isInsideInputGroup&&jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'column':'row',justifyContent:"space-between",alignSelf:isTextArea&&isLabelLeftPositioned?'flex-start':undefined,marginY:isTextArea&&isLabelLeftPositioned?'spacing.3':'spacing.0',children:[jsx(FormLabel,{as:"label",necessityIndicator:necessityIndicator,position:labelPosition,id:labelId,htmlFor:inputId,size:_size,labelSuffix:labelSuffix,labelTrailing:labelTrailing,children:label}),trailingHeaderSlot==null?void 0:trailingHeaderSlot(value!=null?value:inputValue)]}),jsx(FocusRingWrapper,{currentInteraction:currentInteraction,isTableInputCell:isTableInputCell,className:"focus-ring-wrapper",shouldAddLimitedFocus:shouldAddLimitedFocus,children:jsxs(BaseInputWrapper,{isDropdownTrigger:isDropdownTrigger,isTextArea:isTextArea,isDisabled:_isDisabled,validationState:validationState,currentInteraction:currentInteraction,isLabelLeftPositioned:isLabelLeftPositioned,showAllTags:showAllTags,setShowAllTagsWithAnimation:setShowAllTagsWithAnimation,ref:function ref(refNode){if(refNode){setInputWrapperRef==null?void 0:setInputWrapperRef(refNode);inputWrapperRef.current=refNode;}},maxTagRows:maxTagRows,size:_size,numberOfLines:numberOfLines,onClick:function onClick(){if(!isReactNative){var _inputRef$current;(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();}},isTableInputCell:isTableInputCell,children:[jsx(BaseInputVisuals,{size:_size,leadingIcon:leadingIcon,prefix:prefix,isDisabled:_isDisabled,leadingInteractionElement:leadingInteractionElement,leadingDropDown:leadingDropDown}),jsx(BaseInputTagSlot,{renderAs:as,tags:tags,isDisabled:_isDisabled,showAllTags:showAllTagsWithAnimation,setFocusOnInput:function setFocusOnInput(){var innerRef=getInnerMotionRef({_motionMeta:_motionMeta,ref:ref});if(innerRef&&!isReactNative&&'current'in innerRef){var _innerRef$current;(_innerRef$current=innerRef.current)==null?void 0:_innerRef$current.focus();}},labelPrefix:isLabelInsideInput?label:undefined,isDropdownTrigger:isDropdownTrigger,visibleTagsCountRef:visibleTagsCountRef,handleOnInputClick:function handleOnInputClick(e){handleOnClick({name:name,value:isReactNative?value:e});},setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,maxTagRows:maxTagRows,inputWrapperRef:inputWrapperRef,size:_size,numberOfLines:numberOfLines,isTextArea:isTextArea,children:jsx(StyledBaseInput,Object.assign({as:as,id:inputId,ref:getInnerMotionRef({_motionMeta:_motionMeta,ref:mergedInputRef}),name:name,type:type,defaultValue:defaultValue,value:value,placeholder:placeholder,isDisabled:_isDisabled,validationState:validationState,isRequired:_isRequired,handleOnFocus:handleOnFocus,handleOnChange:handleOnChange,handleOnBlur:handleOnBlur,handleOnSubmit:handleOnSubmit,handleOnInput:handleOnInput,handleOnKeyDown:handleOnKeyDown,handleOnClick:handleOnClick,leadingIcon:leadingIcon,prefix:prefix,trailingInteractionElement:trailingInteractionElement,leadingInteractionElement:leadingInteractionElement,suffix:suffix,valueSuffix:valueSuffix,trailingIcon:trailingIcon,maxCharacters:maxCharacters,textAlign:textAlign,autoFocus:autoFocus,keyboardReturnKeyType:keyboardReturnKeyType,keyboardType:keyboardType,autoCompleteSuggestionType:autoCompleteSuggestionType,accessibilityProps:accessibilityProps,currentInteraction:currentInteraction,setCurrentInteraction:setCurrentInteraction,numberOfLines:numberOfLines,isTextArea:isTextArea||maxTagRows==='multiple'||maxTagRows==='expandable',hasPopup:hasPopup,hasTags:!!(tags&&tags.length>0),shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,autoCapitalize:autoCapitalize,isDropdownTrigger:isDropdownTrigger,$size:_size,valueComponentType:valueComponentType,isTableInputCell:isTableInputCell,tabIndex:tabIndex,hasLeadingDropdown:Boolean(leadingDropDown),children:children},metaAttribute({name:MetaConstants.StyledBaseInput}),makeAnalyticsAttribute(rest)))}),jsx(BaseInputVisuals,{trailingInteractionElement:trailingInteractionElement,onTrailingInteractionElementClick:onTrailingInteractionElementClick,suffix:suffix,trailingIcon:trailingIcon,isDisabled:_isDisabled,validationState:validationState,trailingButton:trailingButton,size:_size,errorText:errorText,successText:successText,showHintsAsTooltip:showHintsAsTooltip,trailingDropDown:trailingDropDown})]})})]}),hideFormHint||showHintsAsTooltip||isInsideInputGroup?null:jsx(BaseBox,{marginLeft:makeSize(isLabelLeftPositioned&&!hideLabelText?formHintLeftLabelMarginLeft[_size]:0),children:jsxs(BaseBox,{display:"flex",flexDirection:"row",justifyContent:willRenderHintText?'space-between':'flex-end',children:[jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId,size:_size}),trailingFooterSlot==null?void 0:trailingFooterSlot(value!=null?value:inputValue)]})})]}));};var BaseInputWithRef=React__default.forwardRef(_BaseInput);var BaseInput=assignWithoutSideEffects(BaseInputWithRef,{displayName:'BaseInput'});
+var _excluded=["as","label","labelPosition","placeholder","type","defaultValue","tags","showAllTags","activeTagIndex","setActiveTagIndex","name","value","onFocus","onChange","onInput","onBlur","onSubmit","onClick","onKeyDown","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","leadingIcon","prefix","trailingInteractionElement","onTrailingInteractionElementClick","leadingInteractionElement","suffix","trailingIcon","maxCharacters","textAlign","autoFocus","keyboardReturnKeyType","keyboardType","autoCompleteSuggestionType","trailingHeaderSlot","trailingFooterSlot","numberOfLines","id","componentName","accessibilityLabel","labelId","activeDescendant","hideLabelText","hideFormHint","hasPopup","popupId","isPopupExpanded","maxTagRows","shouldIgnoreBlurAnimation","setShouldIgnoreBlurAnimation","autoCapitalize","setInputWrapperRef","testID","isDropdownTrigger","isLabelInsideInput","size","trailingButton","valueComponentType","isTableInputCell","showHintsAsTooltip","_motionMeta","role","tabIndex","leadingDropDown","trailingDropDown","labelSuffix","labelTrailing","valueSuffix","children"];var autoCompleteSuggestionTypeValues=['none','on','name','email','username','password','newPassword','oneTimeCode','telephone','postalCode','countryName','creditCardNumber','creditCardCSC','creditCardExpiry','creditCardExpiryMonth','creditCardExpiryYear'];var useTags=function useTags(tags,activeTagIndex,setActiveTagIndex){var visibleTagsCountRef=React__default.useRef(0);React__default.useEffect(function(){if(tags&&activeTagIndex>=0&&activeTagIndex<tags.length){var _tags$activeTagIndex,_tags$activeTagIndex$;var tagTitle=(_tags$activeTagIndex=tags[activeTagIndex])==null?void 0:(_tags$activeTagIndex$=_tags$activeTagIndex.props)==null?void 0:_tags$activeTagIndex$.children;if(tagTitle){announce(`Close ${tagTitle} Tag`);}}},[activeTagIndex,tags==null?void 0:tags.length]);var onTagLeft=function onTagLeft(){if(activeTagIndex<0){setActiveTagIndex==null?void 0:setActiveTagIndex(visibleTagsCountRef.current-1);}if(activeTagIndex>0){setActiveTagIndex==null?void 0:setActiveTagIndex(activeTagIndex-1);}};var onTagRight=function onTagRight(){if(activeTagIndex<visibleTagsCountRef.current-1){setActiveTagIndex==null?void 0:setActiveTagIndex(activeTagIndex+1);}};var onTagRemove=function onTagRemove(){if(activeTagIndex>=0&&activeTagIndex<visibleTagsCountRef.current&&tags){tags[activeTagIndex].props.onDismiss({tagIndex:activeTagIndex});}};var onInputKeydownTagHandler=function onInputKeydownTagHandler(key){if(tags&&tags.length>0){if(key==='ArrowRight'){onTagRight();}if(key==='ArrowLeft'){onTagLeft();}if(key==='Backspace'){onTagRemove();}}};return {onInputKeydownTagHandler:onInputKeydownTagHandler,visibleTagsCountRef:visibleTagsCountRef};};var useInput=function useInput(_ref){var value=_ref.value,defaultValue=_ref.defaultValue,onClick=_ref.onClick,onFocus=_ref.onFocus,onChange=_ref.onChange,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,onInput=_ref.onInput,onKeyDown=_ref.onKeyDown,onInputKeydownTagHandler=_ref.onInputKeydownTagHandler;if(__DEV__){if(value&&defaultValue){throwBladeError({message:`Either 'value' or 'defaultValue' shall be passed. This decides if the input field is controlled or uncontrolled`,moduleName:'Input'});}}var _React$useState=React__default.useState(defaultValue!=null?defaultValue:value),_React$useState2=_slicedToArray(_React$useState,2),inputValue=_React$useState2[0],setInputValue=_React$useState2[1];var handleOnFocus=React__default.useCallback(function(_ref2){var name=_ref2.name,value=_ref2.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value;_value=(_value$target$value=value==null?void 0:value.target.value)!=null?_value$target$value:'';}onFocus==null?void 0:onFocus({name:name,value:_value});},[onFocus]);var handleOnClick=React__default.useCallback(function(_ref3){var name=_ref3.name,value=_ref3.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$currentTarget$;_value=(_value$currentTarget$=value==null?void 0:value.currentTarget.value)!=null?_value$currentTarget$:'';}onClick==null?void 0:onClick({name:name,value:_value});},[onClick]);var handleOnSubmit=React__default.useCallback(function(_ref4){var name=_ref4.name,value=_ref4.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value2;_value=(_value$target$value2=value==null?void 0:value.target.value)!=null?_value$target$value2:'';}if(isReactNative()){onSubmit==null?void 0:onSubmit({name:name,value:_value});}},[onSubmit]);var handleOnBlur=React__default.useCallback(function(_ref5){var name=_ref5.name,value=_ref5.value;var _value='';if(getPlatformType()==='react-native'&&typeof value=='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value3;_value=(_value$target$value3=value==null?void 0:value.target.value)!=null?_value$target$value3:'';}onBlur==null?void 0:onBlur({name:name,value:_value});},[onBlur]);var handleOnChange=React__default.useCallback(function(_ref6){var name=_ref6.name,value=_ref6.value;var _value='';if(getPlatformType()==='react-native'&&typeof value==='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value4;_value=(_value$target$value4=value==null?void 0:value.target.value)!=null?_value$target$value4:'';}onChange==null?void 0:onChange({name:name,value:_value});setInputValue(_value);},[onChange]);var handleOnInput=React__default.useCallback(function(_ref7){var name=_ref7.name,value=_ref7.value;var _value='';if(getPlatformType()==='react-native'&&typeof value=='string'){_value=value;}else if(typeof value!=='string'){var _value$target$value5;_value=(_value$target$value5=value==null?void 0:value.target.value)!=null?_value$target$value5:'';}onInput==null?void 0:onInput({name:name,value:_value});},[onInput]);var handleOnKeyDown=React__default.useCallback(function(_ref8){var name=_ref8.name,key=_ref8.key,code=_ref8.code,event=_ref8.event;onInputKeydownTagHandler(key);onKeyDown==null?void 0:onKeyDown({name:name,key:key,code:code,event:event});},[onKeyDown]);return {handleOnFocus:handleOnFocus,handleOnClick:handleOnClick,handleOnChange:handleOnChange,handleOnBlur:handleOnBlur,handleOnSubmit:handleOnSubmit,handleOnInput:handleOnInput,handleOnKeyDown:handleOnKeyDown,inputValue:inputValue};};var getHintType=function getHintType(_ref9){var validationState=_ref9.validationState,hasHelpText=_ref9.hasHelpText;if(validationState==='error'){return 'error';}if(validationState==='success'){return 'success';}if(hasHelpText){return 'help';}return 'help';};var getDescribedByElementId=function getDescribedByElementId(_ref0){var validationState=_ref0.validationState,hasErrorText=_ref0.hasErrorText,hasSuccessText=_ref0.hasSuccessText,hasHelpText=_ref0.hasHelpText,errorTextId=_ref0.errorTextId,successTextId=_ref0.successTextId,helpTextId=_ref0.helpTextId;if(validationState==='error'&&hasErrorText){return errorTextId;}if(validationState==='success'&&hasSuccessText){return successTextId;}if(hasHelpText){return helpTextId;}return '';};var FocusRingWrapper=styled(BaseBox)(function(_ref1){var theme=_ref1.theme,currentInteraction=_ref1.currentInteraction,isTableInputCell=_ref1.isTableInputCell,shouldAddLimitedFocus=_ref1.shouldAddLimitedFocus;return {borderRadius:makeBorderSize(isTableInputCell?theme.border.radius.none:theme.border.radius.medium),width:'100%','&:focus-within':!isTableInputCell&&(shouldAddLimitedFocus?currentInteraction==='focus':true)?Object.assign({},getFocusRingStyles(),{transitionDuration:castWebType(makeMotionTime(getIn(theme.motion.duration,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].duration))),transitionTimingFunction:castWebType(theme.motion.easing[baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].easing])}):{}};});var _BaseInput=function _BaseInput(_ref10,ref){var _ref11,_inputGroupProps$isDi,_inputGroupProps$size;var _ref10$as=_ref10.as,as=_ref10$as===void 0?'input':_ref10$as,label=_ref10.label,_ref10$labelPosition=_ref10.labelPosition,labelPosition=_ref10$labelPosition===void 0?'top':_ref10$labelPosition,placeholder=_ref10.placeholder,_ref10$type=_ref10.type,type=_ref10$type===void 0?'text':_ref10$type,defaultValue=_ref10.defaultValue,tags=_ref10.tags,_ref10$showAllTags=_ref10.showAllTags,showAllTags=_ref10$showAllTags===void 0?false:_ref10$showAllTags,_ref10$activeTagIndex=_ref10.activeTagIndex,activeTagIndex=_ref10$activeTagIndex===void 0?-1:_ref10$activeTagIndex,setActiveTagIndex=_ref10.setActiveTagIndex,name=_ref10.name,value=_ref10.value,onFocus=_ref10.onFocus,onChange=_ref10.onChange,onInput=_ref10.onInput,onBlur=_ref10.onBlur,onSubmit=_ref10.onSubmit,onClick=_ref10.onClick,onKeyDown=_ref10.onKeyDown,isDisabled=_ref10.isDisabled,necessityIndicator=_ref10.necessityIndicator,validationState=_ref10.validationState,errorText=_ref10.errorText,helpText=_ref10.helpText,successText=_ref10.successText,isRequired=_ref10.isRequired,leadingIcon=_ref10.leadingIcon,prefix=_ref10.prefix,trailingInteractionElement=_ref10.trailingInteractionElement,onTrailingInteractionElementClick=_ref10.onTrailingInteractionElementClick,leadingInteractionElement=_ref10.leadingInteractionElement,suffix=_ref10.suffix,trailingIcon=_ref10.trailingIcon,maxCharacters=_ref10.maxCharacters,textAlign=_ref10.textAlign,autoFocus=_ref10.autoFocus,keyboardReturnKeyType=_ref10.keyboardReturnKeyType,keyboardType=_ref10.keyboardType,autoCompleteSuggestionType=_ref10.autoCompleteSuggestionType,trailingHeaderSlot=_ref10.trailingHeaderSlot,trailingFooterSlot=_ref10.trailingFooterSlot,numberOfLines=_ref10.numberOfLines,id=_ref10.id,componentName=_ref10.componentName,accessibilityLabel=_ref10.accessibilityLabel,labelId=_ref10.labelId,activeDescendant=_ref10.activeDescendant,hideLabelText=_ref10.hideLabelText,hideFormHint=_ref10.hideFormHint,hasPopup=_ref10.hasPopup,popupId=_ref10.popupId,isPopupExpanded=_ref10.isPopupExpanded,maxTagRows=_ref10.maxTagRows,shouldIgnoreBlurAnimation=_ref10.shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation=_ref10.setShouldIgnoreBlurAnimation,autoCapitalize=_ref10.autoCapitalize,setInputWrapperRef=_ref10.setInputWrapperRef,testID=_ref10.testID,isDropdownTrigger=_ref10.isDropdownTrigger,isLabelInsideInput=_ref10.isLabelInsideInput,_ref10$size=_ref10.size,size=_ref10$size===void 0?'medium':_ref10$size,trailingButton=_ref10.trailingButton,_ref10$valueComponent=_ref10.valueComponentType,valueComponentType=_ref10$valueComponent===void 0?'text':_ref10$valueComponent,_ref10$isTableInputCe=_ref10.isTableInputCell,isTableInputCell=_ref10$isTableInputCe===void 0?false:_ref10$isTableInputCe,_ref10$showHintsAsToo=_ref10.showHintsAsTooltip,showHintsAsTooltip=_ref10$showHintsAsToo===void 0?false:_ref10$showHintsAsToo,_motionMeta=_ref10._motionMeta,role=_ref10.role,tabIndex=_ref10.tabIndex,leadingDropDown=_ref10.leadingDropDown,trailingDropDown=_ref10.trailingDropDown,labelSuffix=_ref10.labelSuffix,labelTrailing=_ref10.labelTrailing,valueSuffix=_ref10.valueSuffix,children=_ref10.children,rest=_objectWithoutProperties(_ref10,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var inputRef=React__default.useRef(null);var mergedInputRef=useMergeRefs(ref,inputRef);var inputWrapperRef=React__default.useRef(null);var _useTags=useTags(tags,activeTagIndex,setActiveTagIndex),onInputKeydownTagHandler=_useTags.onInputKeydownTagHandler,visibleTagsCountRef=_useTags.visibleTagsCountRef;var _React$useState3=React__default.useState(false),_React$useState4=_slicedToArray(_React$useState3,2),showAllTagsWithAnimation=_React$useState4[0],setShowAllTagsWithAnimation=_React$useState4[1];var isReactNative=getPlatformType()==='react-native';var defaultRole=hasPopup?'combobox':undefined;var inputGroupProps=useInputGroupContext();var isInsideInputGroup=inputGroupProps.isInsideInputGroup;var counterInputProps=useCounterInputContext();var color=counterInputProps.color,disabledColor=counterInputProps.disabledTextColor,isCounterInputDisabled=counterInputProps.isDisabled,isCounterInputLoading=counterInputProps.isLoading,isInsideCounterInput=counterInputProps.isInsideCounterInput;var _isDisabled=(_ref11=(_inputGroupProps$isDi=inputGroupProps.isDisabled)!=null?_inputGroupProps$isDi:isCounterInputDisabled||isCounterInputLoading)!=null?_ref11:isDisabled;var _size=(_inputGroupProps$size=inputGroupProps.size)!=null?_inputGroupProps$size:size;React__default.useEffect(function(){if(showAllTags){setShowAllTagsWithAnimation(true);}else if(maxTagRows!=='expandable'){setShowAllTagsWithAnimation(false);}},[showAllTags,maxTagRows]);var _useInput=useInput({defaultValue:defaultValue,value:value,onFocus:onFocus,onClick:onClick,onChange:onChange,onBlur:onBlur,onSubmit:onSubmit,onInput:onInput,onKeyDown:onKeyDown,onInputKeydownTagHandler:onInputKeydownTagHandler}),handleOnFocus=_useInput.handleOnFocus,handleOnChange=_useInput.handleOnChange,handleOnClick=_useInput.handleOnClick,handleOnBlur=_useInput.handleOnBlur,handleOnSubmit=_useInput.handleOnSubmit,handleOnInput=_useInput.handleOnInput,handleOnKeyDown=_useInput.handleOnKeyDown,inputValue=_useInput.inputValue;var _useFormId=useFormId(id),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isLabelLeftPositioned=labelPosition==='left'&&matchedDeviceType==='desktop';var _useInteraction=useInteraction(),currentInteraction=_useInteraction.currentInteraction,setCurrentInteraction=_useInteraction.setCurrentInteraction;var _isRequired=isRequired||necessityIndicator==='required';var accessibilityProps=makeAccessible({required:Boolean(_isRequired),disabled:Boolean(_isDisabled),invalid:Boolean(validationState==='error'),describedBy:getDescribedByElementId({validationState:validationState,hasErrorText:Boolean(errorText),hasSuccessText:Boolean(successText),hasHelpText:Boolean(helpText),errorTextId:errorTextId,successTextId:successTextId,helpTextId:helpTextId}),label:accessibilityLabel,hasPopup:hasPopup,expanded:hasPopup?isPopupExpanded:undefined,controls:hasPopup?popupId:undefined,role:role!=null?role:defaultRole,activeDescendant:activeDescendant});var willRenderHintText=Boolean(helpText)||validationState==='success'&&Boolean(successText)||validationState==='error'&&Boolean(errorText);if(__DEV__){if(autoCompleteSuggestionType&&!autoCompleteSuggestionTypeValues.includes(autoCompleteSuggestionType)){throwBladeError({message:`Expected autoCompleteSuggestionType to be one of ${autoCompleteSuggestionTypeValues.join(', ')} but received ${autoCompleteSuggestionType}`,moduleName:'Input'});}}var isTextArea=as==='textarea';var hasLeadingDropdown=Boolean(leadingDropDown);var hasTrailingDropdown=Boolean(trailingDropDown);var shouldAddLimitedFocus=hasLeadingDropdown||hasTrailingDropdown;return jsxs(BaseBox,Object.assign({ref:getOuterMotionRef({_motionMeta:_motionMeta,ref:ref})},metaAttribute({name:componentName,testID:testID}),getStyledProps(rest),{children:[jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',justifyContent:isLabelLeftPositioned?'center':undefined,alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",width:"100%",children:[!hideLabelText&&!isLabelInsideInput&&label&&!isInsideInputGroup&&jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'column':'row',justifyContent:"space-between",alignSelf:isTextArea&&isLabelLeftPositioned?'flex-start':undefined,marginY:isTextArea&&isLabelLeftPositioned?'spacing.3':'spacing.0',children:[jsx(FormLabel,{as:"label",necessityIndicator:necessityIndicator,position:labelPosition,id:labelId,htmlFor:inputId,size:_size,labelSuffix:labelSuffix,labelTrailing:labelTrailing,children:label}),trailingHeaderSlot==null?void 0:trailingHeaderSlot(value!=null?value:inputValue)]}),jsx(FocusRingWrapper,{currentInteraction:currentInteraction,isTableInputCell:isTableInputCell,className:"focus-ring-wrapper",shouldAddLimitedFocus:shouldAddLimitedFocus,children:jsxs(BaseInputWrapper,{isDropdownTrigger:isDropdownTrigger,isTextArea:isTextArea,isDisabled:_isDisabled,validationState:validationState,currentInteraction:currentInteraction,isLabelLeftPositioned:isLabelLeftPositioned,showAllTags:showAllTags,setShowAllTagsWithAnimation:setShowAllTagsWithAnimation,ref:function ref(refNode){if(refNode){setInputWrapperRef==null?void 0:setInputWrapperRef(refNode);inputWrapperRef.current=refNode;}},maxTagRows:maxTagRows,size:_size,numberOfLines:numberOfLines,onClick:function onClick(){if(!isReactNative){var _inputRef$current;(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();}},isTableInputCell:isTableInputCell,children:[jsx(BaseInputVisuals,{size:_size,leadingIcon:leadingIcon,prefix:prefix,isDisabled:_isDisabled,leadingInteractionElement:leadingInteractionElement,leadingDropDown:leadingDropDown}),jsx(BaseInputTagSlot,{renderAs:as,tags:tags,isDisabled:_isDisabled,showAllTags:showAllTagsWithAnimation,setFocusOnInput:function setFocusOnInput(){var innerRef=getInnerMotionRef({_motionMeta:_motionMeta,ref:ref});if(innerRef&&!isReactNative&&'current'in innerRef){var _innerRef$current;(_innerRef$current=innerRef.current)==null?void 0:_innerRef$current.focus();}},labelPrefix:isLabelInsideInput?label:undefined,isDropdownTrigger:isDropdownTrigger,visibleTagsCountRef:visibleTagsCountRef,handleOnInputClick:function handleOnInputClick(e){handleOnClick({name:name,value:isReactNative?value:e});},setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,maxTagRows:maxTagRows,inputWrapperRef:inputWrapperRef,size:_size,numberOfLines:numberOfLines,isTextArea:isTextArea,children:jsx(StyledBaseInput,Object.assign({as:as,id:inputId,ref:getInnerMotionRef({_motionMeta:_motionMeta,ref:mergedInputRef}),name:name,type:type,defaultValue:defaultValue,value:value,placeholder:placeholder,isDisabled:_isDisabled,validationState:validationState,isRequired:_isRequired,handleOnFocus:handleOnFocus,handleOnChange:handleOnChange,handleOnBlur:handleOnBlur,handleOnSubmit:handleOnSubmit,handleOnInput:handleOnInput,handleOnKeyDown:handleOnKeyDown,handleOnClick:handleOnClick,leadingIcon:leadingIcon,prefix:prefix,trailingInteractionElement:trailingInteractionElement,leadingInteractionElement:leadingInteractionElement,suffix:suffix,valueSuffix:valueSuffix,trailingIcon:trailingIcon,maxCharacters:maxCharacters,textAlign:textAlign,autoFocus:autoFocus,keyboardReturnKeyType:keyboardReturnKeyType,keyboardType:keyboardType,autoCompleteSuggestionType:autoCompleteSuggestionType,accessibilityProps:accessibilityProps,currentInteraction:currentInteraction,setCurrentInteraction:setCurrentInteraction,numberOfLines:numberOfLines,isTextArea:isTextArea||maxTagRows==='multiple'||maxTagRows==='expandable',hasPopup:hasPopup,hasTags:!!(tags&&tags.length>0),shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,autoCapitalize:autoCapitalize,isDropdownTrigger:isDropdownTrigger,$size:_size,valueComponentType:valueComponentType,isTableInputCell:isTableInputCell,tabIndex:tabIndex,hasLeadingDropdown:Boolean(leadingDropDown),children:children,color:color,disabledColor:disabledColor,isInsideCounterInput:isInsideCounterInput},metaAttribute({name:MetaConstants.StyledBaseInput}),makeAnalyticsAttribute(rest)))}),jsx(BaseInputVisuals,{trailingInteractionElement:trailingInteractionElement,onTrailingInteractionElementClick:onTrailingInteractionElementClick,suffix:suffix,trailingIcon:trailingIcon,isDisabled:_isDisabled,validationState:validationState,trailingButton:trailingButton,size:_size,errorText:errorText,successText:successText,showHintsAsTooltip:showHintsAsTooltip,trailingDropDown:trailingDropDown})]})})]}),hideFormHint||showHintsAsTooltip||isInsideInputGroup?null:jsx(BaseBox,{marginLeft:makeSize(isLabelLeftPositioned&&!hideLabelText?formHintLeftLabelMarginLeft[_size]:0),children:jsxs(BaseBox,{display:"flex",flexDirection:"row",justifyContent:willRenderHintText?'space-between':'flex-end',children:[jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId,size:_size}),trailingFooterSlot==null?void 0:trailingFooterSlot(value!=null?value:inputValue)]})})]}));};var BaseInputWithRef=React__default.forwardRef(_BaseInput);var BaseInput=assignWithoutSideEffects(BaseInputWithRef,{displayName:'BaseInput'});
 
 export { BaseInput, getHintType };
 //# sourceMappingURL=BaseInput.js.map