@razorpay/blade 11.20.0 → 11.21.1

package/build/lib/native/components/Accordion/AccordionItem.js

@@ -19,7 +19,7 @@ import { CollapsibleBody } from '../Collapsible/CollapsibleBody.js';
 import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var AccordionItem=function AccordionItem(_ref){var title=_ref.title,description=_ref.description,icon=_ref.icon,children=_ref.children,isDisabled=_ref.isDisabled,_index=_ref._index,testID=_ref.testID;var _useAccordion=useAccordion(),expandedIndex=_useAccordion.expandedIndex,onExpandChange=_useAccordion.onExpandChange,defaultExpandedIndex=_useAccordion.defaultExpandedIndex,variant=_useAccordion.variant,numberOfItems=_useAccordion.numberOfItems;var isExpanded=expandedIndex===_index;var isDefaultExpanded=defaultExpandedIndex===_index;var isDeprecatedAPI=Boolean(title)||Boolean(description)||Boolean(icon);var _React$Children$toArr=React__default.Children.toArray(children),_React$Children$toArr2=_slicedToArray(_React$Children$toArr,2),header=_React$Children$toArr2[0],body=_React$Children$toArr2[1];if(!isDeprecatedAPI){var headerComponentId=getComponentId(header);var bodyComponentId=getComponentId(body);if(headerComponentId!==componentIds.AccordionItemHeader&&bodyComponentId!==componentIds.AccordionItemBody){throwBladeError({message:'AccordionItem only allows AccordionItemHeader as first component and AccordionItemBody as second. Check Accordion documentation',moduleName:'AccordionItem'});}}var isLastItem=_index!==undefined&&_index<numberOfItems-1;var handleExpandChange=function handleExpandChange(_ref2){var isExpanded=_ref2.isExpanded;if(isExpanded&&typeof _index!=='undefined'){onExpandChange(_index);}else {onExpandChange(-1);}};return jsx(AccordionItemContext.Provider,{value:{index:_index,isDisabled:isDisabled},children:jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.AccordionItem,testID:testID}),{children:[jsxs(Collapsible,{isExpanded:isExpanded,defaultIsExpanded:isDefaultExpanded,onExpandChange:handleExpandChange,_shouldApplyWidthRestrictions:false,children:[jsx(AccordionButton,{index:_index,icon:icon,title:title,header:header,isDisabled:isDisabled,isDeprecatedAPI:isDeprecatedAPI}),jsx(CollapsibleBody,{width:isReactNative()||!isDeprecatedAPI?'100%':undefined,children:isDeprecatedAPI?jsx(AccordionItemBody,{_description:description,children:children}):body})]}),isLastItem||variant==='transparent'?jsx(Divider,{}):null]}))});};
+var AccordionItem=function AccordionItem(_ref){var title=_ref.title,description=_ref.description,icon=_ref.icon,children=_ref.children,isDisabled=_ref.isDisabled,_index=_ref._index,testID=_ref.testID;var _useAccordion=useAccordion(),expandedIndex=_useAccordion.expandedIndex,onExpandChange=_useAccordion.onExpandChange,defaultExpandedIndex=_useAccordion.defaultExpandedIndex,variant=_useAccordion.variant,numberOfItems=_useAccordion.numberOfItems;var isExpanded=expandedIndex===_index;var isDefaultExpanded=defaultExpandedIndex===_index;var isDeprecatedAPI=Boolean(title)||Boolean(description)||Boolean(icon);var _React$Children$toArr=React__default.Children.toArray(children),_React$Children$toArr2=_slicedToArray(_React$Children$toArr,2),header=_React$Children$toArr2[0],body=_React$Children$toArr2[1];if(!isDeprecatedAPI){var headerComponentId=getComponentId(header);var bodyComponentId=getComponentId(body);if(headerComponentId!==componentIds.AccordionItemHeader&&bodyComponentId!==componentIds.AccordionItemBody){throwBladeError({message:'AccordionItem only allows AccordionItemHeader as first component and AccordionItemBody as second. Check Accordion documentation',moduleName:'AccordionItem'});}}var isLastItem=_index!==undefined&&_index<numberOfItems-1;var handleExpandChange=function handleExpandChange(_ref2){var isExpanded=_ref2.isExpanded;if(isExpanded&&typeof _index!=='undefined'){onExpandChange(_index);}else {onExpandChange(-1);}};return jsx(AccordionItemContext.Provider,{value:{index:_index,isDisabled:isDisabled},children:jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.AccordionItem,testID:testID}),{children:[jsxs(Collapsible,{isExpanded:isExpanded,defaultIsExpanded:isDefaultExpanded,onExpandChange:handleExpandChange,_shouldApplyWidthRestrictions:false,_dangerouslyDisableValidations:true,children:[jsx(AccordionButton,{index:_index,icon:icon,title:title,header:header,isDisabled:isDisabled,isDeprecatedAPI:isDeprecatedAPI}),jsx(CollapsibleBody,{width:isReactNative()||!isDeprecatedAPI?'100%':undefined,children:isDeprecatedAPI?jsx(AccordionItemBody,{_description:description,children:children}):body})]}),isLastItem||variant==='transparent'?jsx(Divider,{}):null]}))});};
 
 export { AccordionItem };
 //# sourceMappingURL=AccordionItem.js.map

package/build/lib/native/components/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { AccordionItemContext, useAccordion } from './AccordionContext';\nimport { AccordionItemBody } from './AccordionItemBody';\nimport { componentIds } from './componentIds';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID } from '~utils/types';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   *\n   * @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  title?: string;\n\n  /**\n   * Body text content\n   *\n   *  @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   *\n   * @deprecated Use `leading={<StarIcon size=\"large\" />}` on AccordionItemHeader instead\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode | ReactNode[];\n\n  /**\n   * Disabled state of the item\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID;\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  isDisabled,\n  _index,\n  testID,\n}: AccordionItemProps): ReactElement => {\n  const {\n    expandedIndex,\n    onExpandChange,\n    defaultExpandedIndex,\n    variant,\n    numberOfItems,\n  } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n  const isDeprecatedAPI = Boolean(title) || Boolean(description) || Boolean(icon);\n  const [header, body] = React.Children.toArray(children);\n\n  if (!isDeprecatedAPI) {\n    // Only doing validation in new API. Deprecated API allows everything as AccordionItem children\n    const headerComponentId = getComponentId(header);\n    const bodyComponentId = getComponentId(body);\n\n    if (\n      headerComponentId !== componentIds.AccordionItemHeader &&\n      bodyComponentId !== componentIds.AccordionItemBody\n    ) {\n      throwBladeError({\n        message:\n          'AccordionItem only allows AccordionItemHeader as first component and AccordionItemBody as second. Check Accordion documentation',\n        moduleName: 'AccordionItem',\n      });\n    }\n  }\n\n  const isLastItem = _index !== undefined && _index < numberOfItems - 1;\n\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  return (\n    <AccordionItemContext.Provider\n      value={{\n        index: _index,\n        isDisabled,\n      }}\n    >\n      <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>\n        <Collapsible\n          isExpanded={isExpanded}\n          defaultIsExpanded={isDefaultExpanded}\n          onExpandChange={handleExpandChange}\n          // Accordion has its own width restrictions\n          _shouldApplyWidthRestrictions={false}\n        >\n          <AccordionButton\n            index={_index}\n            icon={icon}\n            title={title}\n            header={header}\n            isDisabled={isDisabled}\n            isDeprecatedAPI={isDeprecatedAPI}\n          />\n          <CollapsibleBody\n            // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n            // In new API, AccordionItemBody takes 100% width to avoid issues like this - https://github.com/razorpay/blade/pull/1814\n            width={isReactNative() || !isDeprecatedAPI ? '100%' : undefined}\n          >\n            {isDeprecatedAPI ? (\n              <AccordionItemBody _description={description}>{children}</AccordionItemBody>\n            ) : (\n              body\n            )}\n          </CollapsibleBody>\n        </Collapsible>\n        {isLastItem || variant === 'transparent' ? <Divider /> : null}\n      </BaseBox>\n    </AccordionItemContext.Provider>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["AccordionItem","_ref","title","description","icon","children","isDisabled","_index","testID","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","variant","numberOfItems","isExpanded","isDefaultExpanded","isDeprecatedAPI","Boolean","_React$Children$toArr","React","Children","toArray","_React$Children$toArr2","_slicedToArray","header","body","headerComponentId","getComponentId","bodyComponentId","componentIds","AccordionItemHeader","AccordionItemBody","throwBladeError","message","moduleName","isLastItem","undefined","handleExpandChange","_ref2","_jsx","AccordionItemContext","Provider","value","index","_jsxs","BaseBox","Object","assign","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","AccordionButton","CollapsibleBody","width","isReactNative","_description","Divider"],"mappings":"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"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { AccordionItemContext, useAccordion } from './AccordionContext';\nimport { AccordionItemBody } from './AccordionItemBody';\nimport { componentIds } from './componentIds';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID } from '~utils/types';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   *\n   * @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  title?: string;\n\n  /**\n   * Body text content\n   *\n   *  @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   *\n   * @deprecated Use `leading={<StarIcon size=\"large\" />}` on AccordionItemHeader instead\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode | ReactNode[];\n\n  /**\n   * Disabled state of the item\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID;\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  isDisabled,\n  _index,\n  testID,\n}: AccordionItemProps): ReactElement => {\n  const {\n    expandedIndex,\n    onExpandChange,\n    defaultExpandedIndex,\n    variant,\n    numberOfItems,\n  } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n  const isDeprecatedAPI = Boolean(title) || Boolean(description) || Boolean(icon);\n  const [header, body] = React.Children.toArray(children);\n\n  if (!isDeprecatedAPI) {\n    // Only doing validation in new API. Deprecated API allows everything as AccordionItem children\n    const headerComponentId = getComponentId(header);\n    const bodyComponentId = getComponentId(body);\n\n    if (\n      headerComponentId !== componentIds.AccordionItemHeader &&\n      bodyComponentId !== componentIds.AccordionItemBody\n    ) {\n      throwBladeError({\n        message:\n          'AccordionItem only allows AccordionItemHeader as first component and AccordionItemBody as second. Check Accordion documentation',\n        moduleName: 'AccordionItem',\n      });\n    }\n  }\n\n  const isLastItem = _index !== undefined && _index < numberOfItems - 1;\n\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  return (\n    <AccordionItemContext.Provider\n      value={{\n        index: _index,\n        isDisabled,\n      }}\n    >\n      <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>\n        <Collapsible\n          isExpanded={isExpanded}\n          defaultIsExpanded={isDefaultExpanded}\n          onExpandChange={handleExpandChange}\n          // Accordion has its own width restrictions\n          _shouldApplyWidthRestrictions={false}\n          _dangerouslyDisableValidations={true}\n        >\n          <AccordionButton\n            index={_index}\n            icon={icon}\n            title={title}\n            header={header}\n            isDisabled={isDisabled}\n            isDeprecatedAPI={isDeprecatedAPI}\n          />\n          <CollapsibleBody\n            // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n            // In new API, AccordionItemBody takes 100% width to avoid issues like this - https://github.com/razorpay/blade/pull/1814\n            width={isReactNative() || !isDeprecatedAPI ? '100%' : undefined}\n          >\n            {isDeprecatedAPI ? (\n              <AccordionItemBody _description={description}>{children}</AccordionItemBody>\n            ) : (\n              body\n            )}\n          </CollapsibleBody>\n        </Collapsible>\n        {isLastItem || variant === 'transparent' ? <Divider /> : null}\n      </BaseBox>\n    </AccordionItemContext.Provider>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["AccordionItem","_ref","title","description","icon","children","isDisabled","_index","testID","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","variant","numberOfItems","isExpanded","isDefaultExpanded","isDeprecatedAPI","Boolean","_React$Children$toArr","React","Children","toArray","_React$Children$toArr2","_slicedToArray","header","body","headerComponentId","getComponentId","bodyComponentId","componentIds","AccordionItemHeader","AccordionItemBody","throwBladeError","message","moduleName","isLastItem","undefined","handleExpandChange","_ref2","_jsx","AccordionItemContext","Provider","value","index","_jsxs","BaseBox","Object","assign","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","_dangerouslyDisableValidations","AccordionButton","CollapsibleBody","width","isReactNative","_description","Divider"],"mappings":"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"}

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

@@ -18,7 +18,7 @@ import { useId } from '../../utils/useId.js';
 import { isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded=["children","direction","defaultIsExpanded","isExpanded","onExpandChange","testID","_shouldApplyWidthRestrictions"];var MIN_WIDTH=makeSize(size[200]);var Collapsible=function Collapsible(_ref){var children=_ref.children,_ref$direction=_ref.direction,direction=_ref$direction===void 0?'bottom':_ref$direction,_ref$defaultIsExpande=_ref.defaultIsExpanded,defaultIsExpanded=_ref$defaultIsExpande===void 0?false:_ref$defaultIsExpande,isExpanded=_ref.isExpanded,onExpandChange=_ref.onExpandChange,testID=_ref.testID,_ref$_shouldApplyWidt=_ref._shouldApplyWidthRestrictions,_shouldApplyWidthRestrictions=_ref$_shouldApplyWidt===void 0?true:_ref$_shouldApplyWidt,styledProps=_objectWithoutProperties(_ref,_excluded);var _useState=useState(isExpanded!=null?isExpanded:defaultIsExpanded),_useState2=_slicedToArray(_useState,2),isBodyExpanded=_useState2[0],setIsBodyExpanded=_useState2[1];var collapsibleBodyId=useId(MetaConstants.CollapsibleBody);var initialDefaultExpanded=useRef(Boolean(defaultIsExpanded||isExpanded));var handleExpandChange=useCallback(function(nextIsExpanded){if(typeof isExpanded!=='undefined'){onExpandChange==null?void 0:onExpandChange({isExpanded:nextIsExpanded});}else {setIsBodyExpanded(nextIsExpanded);onExpandChange==null?void 0:onExpandChange({isExpanded:nextIsExpanded});}},[onExpandChange,isExpanded]);var contextValue=useMemo(function(){return {isExpanded:isExpanded!=null?isExpanded:isBodyExpanded,onExpandChange:handleExpandChange,defaultIsExpanded:initialDefaultExpanded.current,direction:direction,collapsibleBodyId:collapsibleBodyId};},[isBodyExpanded,direction,handleExpandChange,isExpanded,collapsibleBodyId]);if(__DEV__){Children.forEach(children,function(child){if(!(isValidAllowedChildren(child,MetaConstants.CollapsibleBody)||isValidAllowedChildren(child,MetaConstants.CollapsibleButton)||isValidAllowedChildren(child,MetaConstants.CollapsibleLink)||isValidAllowedChildren(child,MetaConstants.AccordionButton))){throwBladeError({message:`only the following are supported as valid children: CollapsibleBody, CollapsibleButton, CollapsibleLink`,moduleName:'Collapsible'});}});}return jsx(CollapsibleContext.Provider,{value:contextValue,children:jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.Collapsible,testID:testID}),getStyledProps(styledProps),{children:jsx(BaseBox,{display:"flex",flexDirection:direction==='bottom'?'column':'column-reverse',alignItems:"flex-start",minWidth:_shouldApplyWidthRestrictions?MIN_WIDTH:makeSize(size[0]),maxWidth:_shouldApplyWidthRestrictions?MAX_WIDTH:MAX_WIDTH_NO_RESTRICTIONS,children:children})}))});};
+var _excluded=["children","direction","defaultIsExpanded","isExpanded","onExpandChange","testID","_shouldApplyWidthRestrictions","_dangerouslyDisableValidations"];var MIN_WIDTH=makeSize(size[200]);var Collapsible=function Collapsible(_ref){var children=_ref.children,_ref$direction=_ref.direction,direction=_ref$direction===void 0?'bottom':_ref$direction,_ref$defaultIsExpande=_ref.defaultIsExpanded,defaultIsExpanded=_ref$defaultIsExpande===void 0?false:_ref$defaultIsExpande,isExpanded=_ref.isExpanded,onExpandChange=_ref.onExpandChange,testID=_ref.testID,_ref$_shouldApplyWidt=_ref._shouldApplyWidthRestrictions,_shouldApplyWidthRestrictions=_ref$_shouldApplyWidt===void 0?true:_ref$_shouldApplyWidt,_ref$_dangerouslyDisa=_ref._dangerouslyDisableValidations,_dangerouslyDisableValidations=_ref$_dangerouslyDisa===void 0?false:_ref$_dangerouslyDisa,styledProps=_objectWithoutProperties(_ref,_excluded);var _useState=useState(isExpanded!=null?isExpanded:defaultIsExpanded),_useState2=_slicedToArray(_useState,2),isBodyExpanded=_useState2[0],setIsBodyExpanded=_useState2[1];var collapsibleBodyId=useId(MetaConstants.CollapsibleBody);var initialDefaultExpanded=useRef(Boolean(defaultIsExpanded||isExpanded));var handleExpandChange=useCallback(function(nextIsExpanded){if(typeof isExpanded!=='undefined'){onExpandChange==null?void 0:onExpandChange({isExpanded:nextIsExpanded});}else {setIsBodyExpanded(nextIsExpanded);onExpandChange==null?void 0:onExpandChange({isExpanded:nextIsExpanded});}},[onExpandChange,isExpanded]);var contextValue=useMemo(function(){return {isExpanded:isExpanded!=null?isExpanded:isBodyExpanded,onExpandChange:handleExpandChange,defaultIsExpanded:initialDefaultExpanded.current,direction:direction,collapsibleBodyId:collapsibleBodyId};},[isBodyExpanded,direction,handleExpandChange,isExpanded,collapsibleBodyId]);if(__DEV__){Children.forEach(children,function(child){if(!(isValidAllowedChildren(child,MetaConstants.CollapsibleBody)||isValidAllowedChildren(child,MetaConstants.CollapsibleButton)||isValidAllowedChildren(child,MetaConstants.CollapsibleLink))&&!_dangerouslyDisableValidations){throwBladeError({message:`only the following are supported as valid children: CollapsibleBody, CollapsibleButton, CollapsibleLink`,moduleName:'Collapsible'});}});}return jsx(CollapsibleContext.Provider,{value:contextValue,children:jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.Collapsible,testID:testID}),getStyledProps(styledProps),{children:jsx(BaseBox,{display:"flex",flexDirection:direction==='bottom'?'column':'column-reverse',alignItems:"flex-start",minWidth:_shouldApplyWidthRestrictions?MIN_WIDTH:makeSize(size[0]),maxWidth:_shouldApplyWidthRestrictions?MAX_WIDTH:MAX_WIDTH_NO_RESTRICTIONS,children:children})}))});};
 
 export { Collapsible };
 //# sourceMappingURL=Collapsible.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","sources":["../../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { Children, useCallback, useRef, useState, useMemo } from 'react';\n\nimport type { CollapsibleContextState } from './CollapsibleContext';\nimport { CollapsibleContext } from './CollapsibleContext';\nimport { MAX_WIDTH, MAX_WIDTH_NO_RESTRICTIONS } from './styles';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { TestID } from '~utils/types';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { BoxProps } from '~components/Box';\nimport { makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useId } from '~utils/useId';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\n\ntype CollapsibleProps = {\n  /**\n   * Composes `CollapsibleButton`, `CollapsibleLink`, `CollapsibleBody`\n   */\n  children: ReactNode;\n\n  /**\n   * Direction in which the content expands\n   *\n   * @default bottom\n   */\n  direction?: 'bottom' | 'top';\n\n  /**\n   * Expands the collapsible content by default (uncontrolled)\n   *\n   * @default false\n   */\n  defaultIsExpanded?: boolean;\n\n  /**\n   * Expands the collapsible content (controlled)\n   *\n   * @default undefined\n   */\n  isExpanded?: boolean;\n\n  /**\n   * Callback for change in collapsible's expanded state\n   *\n   * @default undefined\n   */\n  onExpandChange?: ({ isExpanded }: { isExpanded: boolean }) => void;\n\n  /**\n   * **Internal**: used to override responsive width restrictions\n   */\n  _shouldApplyWidthRestrictions?: boolean;\n} & TestID &\n  StyledPropsBlade;\n\nconst MIN_WIDTH: BoxProps['minWidth'] = makeSize(size[200]);\n\nconst Collapsible = ({\n  children,\n  direction = 'bottom',\n  defaultIsExpanded = false,\n  isExpanded,\n  onExpandChange,\n  testID,\n  _shouldApplyWidthRestrictions = true,\n  ...styledProps\n}: CollapsibleProps): ReactElement => {\n  const [isBodyExpanded, setIsBodyExpanded] = useState(isExpanded ?? defaultIsExpanded);\n  const collapsibleBodyId = useId(MetaConstants.CollapsibleBody);\n\n  /**\n   * Maintain a ref to the initial value of `defaultExpanded || isExpanded` so changing it has no effect.\n   * This will help in determining the correct initial height of collapsing body content\n   */\n  const initialDefaultExpanded = useRef(Boolean(defaultIsExpanded || isExpanded));\n\n  const handleExpandChange = useCallback(\n    (nextIsExpanded: boolean) => {\n      if (typeof isExpanded !== 'undefined') {\n        // controlled\n        onExpandChange?.({ isExpanded: nextIsExpanded });\n      } else {\n        // uncontrolled\n        setIsBodyExpanded(nextIsExpanded);\n        onExpandChange?.({ isExpanded: nextIsExpanded });\n      }\n    },\n    [onExpandChange, isExpanded],\n  );\n\n  const contextValue = useMemo<CollapsibleContextState>(\n    () => ({\n      // controlled behavior if isExpanded is provided\n      isExpanded: isExpanded ?? isBodyExpanded,\n      onExpandChange: handleExpandChange,\n      defaultIsExpanded: initialDefaultExpanded.current,\n      direction,\n      collapsibleBodyId,\n    }),\n    [isBodyExpanded, direction, handleExpandChange, isExpanded, collapsibleBodyId],\n  );\n\n  if (__DEV__) {\n    Children.forEach(children, (child) => {\n      if (\n        !(\n          isValidAllowedChildren(child, MetaConstants.CollapsibleBody) ||\n          isValidAllowedChildren(child, MetaConstants.CollapsibleButton) ||\n          isValidAllowedChildren(child, MetaConstants.CollapsibleLink) ||\n          isValidAllowedChildren(child, MetaConstants.AccordionButton)\n        )\n      ) {\n        throwBladeError({\n          message: `only the following are supported as valid children: CollapsibleBody, CollapsibleButton, CollapsibleLink`,\n          moduleName: 'Collapsible',\n        });\n      }\n    });\n  }\n\n  return (\n    <CollapsibleContext.Provider value={contextValue}>\n      <BaseBox\n        {...metaAttribute({ name: MetaConstants.Collapsible, testID })}\n        {...getStyledProps(styledProps)}\n      >\n        <BaseBox\n          display=\"flex\"\n          flexDirection={direction === 'bottom' ? 'column' : 'column-reverse'}\n          alignItems=\"flex-start\"\n          minWidth={_shouldApplyWidthRestrictions ? MIN_WIDTH : makeSize(size[0])}\n          maxWidth={_shouldApplyWidthRestrictions ? MAX_WIDTH : MAX_WIDTH_NO_RESTRICTIONS}\n        >\n          {children}\n        </BaseBox>\n      </BaseBox>\n    </CollapsibleContext.Provider>\n  );\n};\n\nexport type { CollapsibleProps };\nexport { Collapsible };\n"],"names":["MIN_WIDTH","makeSize","size","Collapsible","_ref","children","_ref$direction","direction","_ref$defaultIsExpande","defaultIsExpanded","isExpanded","onExpandChange","testID","_ref$_shouldApplyWidt","_shouldApplyWidthRestrictions","styledProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","isBodyExpanded","setIsBodyExpanded","collapsibleBodyId","useId","MetaConstants","CollapsibleBody","initialDefaultExpanded","useRef","Boolean","handleExpandChange","useCallback","nextIsExpanded","contextValue","useMemo","current","__DEV__","Children","forEach","child","isValidAllowedChildren","CollapsibleButton","CollapsibleLink","AccordionButton","throwBladeError","message","moduleName","_jsx","CollapsibleContext","Provider","value","BaseBox","Object","assign","metaAttribute","name","getStyledProps","display","flexDirection","alignItems","minWidth","maxWidth","MAX_WIDTH","MAX_WIDTH_NO_RESTRICTIONS"],"mappings":"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"}
+{"version":3,"file":"Collapsible.js","sources":["../../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { Children, useCallback, useRef, useState, useMemo } from 'react';\n\nimport type { CollapsibleContextState } from './CollapsibleContext';\nimport { CollapsibleContext } from './CollapsibleContext';\nimport { MAX_WIDTH, MAX_WIDTH_NO_RESTRICTIONS } from './styles';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { TestID } from '~utils/types';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { BoxProps } from '~components/Box';\nimport { makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useId } from '~utils/useId';\nimport { isValidAllowedChildren } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\n\ntype CollapsibleProps = {\n  /**\n   * Composes `CollapsibleButton`, `CollapsibleLink`, `CollapsibleBody`\n   */\n  children: ReactNode;\n\n  /**\n   * Direction in which the content expands\n   *\n   * @default bottom\n   */\n  direction?: 'bottom' | 'top';\n\n  /**\n   * Expands the collapsible content by default (uncontrolled)\n   *\n   * @default false\n   */\n  defaultIsExpanded?: boolean;\n\n  /**\n   * Expands the collapsible content (controlled)\n   *\n   * @default undefined\n   */\n  isExpanded?: boolean;\n\n  /**\n   * Callback for change in collapsible's expanded state\n   *\n   * @default undefined\n   */\n  onExpandChange?: ({ isExpanded }: { isExpanded: boolean }) => void;\n\n  /**\n   * **Internal**: disables trigger validations. Used for AccordionButton and SideNavLink internally\n   */\n  _dangerouslyDisableValidations?: boolean;\n  /**\n   * **Internal**: used to override responsive width restrictions\n   */\n  _shouldApplyWidthRestrictions?: boolean;\n} & TestID &\n  StyledPropsBlade;\n\nconst MIN_WIDTH: BoxProps['minWidth'] = makeSize(size[200]);\n\nconst Collapsible = ({\n  children,\n  direction = 'bottom',\n  defaultIsExpanded = false,\n  isExpanded,\n  onExpandChange,\n  testID,\n  _shouldApplyWidthRestrictions = true,\n  _dangerouslyDisableValidations = false,\n  ...styledProps\n}: CollapsibleProps): ReactElement => {\n  const [isBodyExpanded, setIsBodyExpanded] = useState(isExpanded ?? defaultIsExpanded);\n  const collapsibleBodyId = useId(MetaConstants.CollapsibleBody);\n\n  /**\n   * Maintain a ref to the initial value of `defaultExpanded || isExpanded` so changing it has no effect.\n   * This will help in determining the correct initial height of collapsing body content\n   */\n  const initialDefaultExpanded = useRef(Boolean(defaultIsExpanded || isExpanded));\n\n  const handleExpandChange = useCallback(\n    (nextIsExpanded: boolean) => {\n      if (typeof isExpanded !== 'undefined') {\n        // controlled\n        onExpandChange?.({ isExpanded: nextIsExpanded });\n      } else {\n        // uncontrolled\n        setIsBodyExpanded(nextIsExpanded);\n        onExpandChange?.({ isExpanded: nextIsExpanded });\n      }\n    },\n    [onExpandChange, isExpanded],\n  );\n\n  const contextValue = useMemo<CollapsibleContextState>(\n    () => ({\n      // controlled behavior if isExpanded is provided\n      isExpanded: isExpanded ?? isBodyExpanded,\n      onExpandChange: handleExpandChange,\n      defaultIsExpanded: initialDefaultExpanded.current,\n      direction,\n      collapsibleBodyId,\n    }),\n    [isBodyExpanded, direction, handleExpandChange, isExpanded, collapsibleBodyId],\n  );\n\n  if (__DEV__) {\n    Children.forEach(children, (child) => {\n      if (\n        !(\n          isValidAllowedChildren(child, MetaConstants.CollapsibleBody) ||\n          isValidAllowedChildren(child, MetaConstants.CollapsibleButton) ||\n          isValidAllowedChildren(child, MetaConstants.CollapsibleLink)\n        ) &&\n        !_dangerouslyDisableValidations\n      ) {\n        throwBladeError({\n          message: `only the following are supported as valid children: CollapsibleBody, CollapsibleButton, CollapsibleLink`,\n          moduleName: 'Collapsible',\n        });\n      }\n    });\n  }\n\n  return (\n    <CollapsibleContext.Provider value={contextValue}>\n      <BaseBox\n        {...metaAttribute({ name: MetaConstants.Collapsible, testID })}\n        {...getStyledProps(styledProps)}\n      >\n        <BaseBox\n          display=\"flex\"\n          flexDirection={direction === 'bottom' ? 'column' : 'column-reverse'}\n          alignItems=\"flex-start\"\n          minWidth={_shouldApplyWidthRestrictions ? MIN_WIDTH : makeSize(size[0])}\n          maxWidth={_shouldApplyWidthRestrictions ? MAX_WIDTH : MAX_WIDTH_NO_RESTRICTIONS}\n        >\n          {children}\n        </BaseBox>\n      </BaseBox>\n    </CollapsibleContext.Provider>\n  );\n};\n\nexport type { CollapsibleProps };\nexport { Collapsible };\n"],"names":["MIN_WIDTH","makeSize","size","Collapsible","_ref","children","_ref$direction","direction","_ref$defaultIsExpande","defaultIsExpanded","isExpanded","onExpandChange","testID","_ref$_shouldApplyWidt","_shouldApplyWidthRestrictions","_ref$_dangerouslyDisa","_dangerouslyDisableValidations","styledProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","isBodyExpanded","setIsBodyExpanded","collapsibleBodyId","useId","MetaConstants","CollapsibleBody","initialDefaultExpanded","useRef","Boolean","handleExpandChange","useCallback","nextIsExpanded","contextValue","useMemo","current","__DEV__","Children","forEach","child","isValidAllowedChildren","CollapsibleButton","CollapsibleLink","throwBladeError","message","moduleName","_jsx","CollapsibleContext","Provider","value","BaseBox","Object","assign","metaAttribute","name","getStyledProps","display","flexDirection","alignItems","minWidth","maxWidth","MAX_WIDTH","MAX_WIDTH_NO_RESTRICTIONS"],"mappings":"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"}

package/build/lib/native/components/Collapsible/CollapsibleBody.js

@@ -7,7 +7,7 @@ import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _CollapsibleBody=function _CollapsibleBody(_ref){var children=_ref.children,testID=_ref.testID,width=_ref.width;var _useCollapsible=useCollapsible(),collapsibleBodyId=_useCollapsible.collapsibleBodyId,isExpanded=_useCollapsible.isExpanded;return jsx(BaseBox,Object.assign({id:collapsibleBodyId,width:width},makeAccessible({role:'region',hidden:!isExpanded}),metaAttribute({name:MetaConstants.CollapsibleBody,testID:testID}),{children:jsx(CollapsibleBodyContent,{children:children})}));};var CollapsibleBody=assignWithoutSideEffects(_CollapsibleBody,{componentId:MetaConstants.CollapsibleBody});
+var _CollapsibleBody=function _CollapsibleBody(_ref){var children=_ref.children,testID=_ref.testID,width=_ref.width,_ref$_hasMargin=_ref._hasMargin,_hasMargin=_ref$_hasMargin===void 0?true:_ref$_hasMargin;var _useCollapsible=useCollapsible(),collapsibleBodyId=_useCollapsible.collapsibleBodyId,isExpanded=_useCollapsible.isExpanded;return jsx(BaseBox,Object.assign({id:collapsibleBodyId,width:width},makeAccessible({role:'region',hidden:!isExpanded}),metaAttribute({name:MetaConstants.CollapsibleBody,testID:testID}),{children:jsx(CollapsibleBodyContent,{_hasMargin:_hasMargin,children:children})}));};var CollapsibleBody=assignWithoutSideEffects(_CollapsibleBody,{componentId:MetaConstants.CollapsibleBody});
 
 export { CollapsibleBody };
 //# sourceMappingURL=CollapsibleBody.js.map

package/build/lib/native/components/Collapsible/CollapsibleBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleBody.js","sources":["../../../../../src/components/Collapsible/CollapsibleBody.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { CollapsibleBodyContent } from './CollapsibleBodyContent';\nimport { useCollapsible } from './CollapsibleContext';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { TestID } from '~utils/types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype CollapsibleBodyProps = {\n  children: ReactNode;\n  width?: BaseBoxProps['width'];\n} & TestID;\n\nconst _CollapsibleBody = ({ children, testID, width }: CollapsibleBodyProps): ReactElement => {\n  const { collapsibleBodyId, isExpanded } = useCollapsible();\n  return (\n    <BaseBox\n      id={collapsibleBodyId}\n      width={width}\n      {...makeAccessible({ role: 'region', hidden: !isExpanded })}\n      {...metaAttribute({ name: MetaConstants.CollapsibleBody, testID })}\n    >\n      <CollapsibleBodyContent>{children}</CollapsibleBodyContent>\n    </BaseBox>\n  );\n};\n\nconst CollapsibleBody = assignWithoutSideEffects(_CollapsibleBody, {\n  componentId: MetaConstants.CollapsibleBody,\n});\n\nexport type { CollapsibleBodyProps };\nexport { CollapsibleBody };\n"],"names":["_CollapsibleBody","_ref","children","testID","width","_useCollapsible","useCollapsible","collapsibleBodyId","isExpanded","_jsx","BaseBox","Object","assign","id","makeAccessible","role","hidden","metaAttribute","name","MetaConstants","CollapsibleBody","CollapsibleBodyContent","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;AAeA,IAAMA,gBAAgB,CAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,CAAwE,CAAlE,IAAAC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CAAEC,MAAM,CAAAF,IAAA,CAANE,MAAM,CAAEC,KAAK,CAAAH,IAAA,CAALG,KAAK,CACjD,IAAAC,eAAA,CAA0CC,cAAc,EAAE,CAAlDC,iBAAiB,CAAAF,eAAA,CAAjBE,iBAAiB,CAAEC,UAAU,CAAAH,eAAA,CAAVG,UAAU,CACrC,OACEC,GAAA,CAACC,OAAO,CAAAC,MAAA,CAAAC,MAAA,CAAA,CACNC,EAAE,CAAEN,iBAAkB,CACtBH,KAAK,CAAEA,KAAM,CAAA,CACTU,cAAc,CAAC,CAAEC,IAAI,CAAE,QAAQ,CAAEC,MAAM,CAAE,CAACR,UAAW,CAAC,CAAC,CACvDS,aAAa,CAAC,CAAEC,IAAI,CAAEC,aAAa,CAACC,eAAe,CAAEjB,MAAM,CAANA,MAAO,CAAC,CAAC,CAAAD,CAAAA,QAAA,CAElEO,GAAA,CAACY,sBAAsB,CAAA,CAAAnB,QAAA,CAAEA,QAAQ,CAAyB,CAAC,CACpD,CAAA,CAAC,CAEd,CAAC,CAEK,IAAAkB,eAAe,CAAGE,wBAAwB,CAACtB,gBAAgB,CAAE,CACjEuB,WAAW,CAAEJ,aAAa,CAACC,eAC7B,CAAC;;;;"}
+{"version":3,"file":"CollapsibleBody.js","sources":["../../../../../src/components/Collapsible/CollapsibleBody.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { CollapsibleBodyContent } from './CollapsibleBodyContent';\nimport { useCollapsible } from './CollapsibleContext';\nimport type { CollapsibleBodyProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\nconst _CollapsibleBody = ({\n  children,\n  testID,\n  width,\n  _hasMargin = true,\n}: CollapsibleBodyProps): ReactElement => {\n  const { collapsibleBodyId, isExpanded } = useCollapsible();\n  return (\n    <BaseBox\n      id={collapsibleBodyId}\n      width={width}\n      {...makeAccessible({ role: 'region', hidden: !isExpanded })}\n      {...metaAttribute({ name: MetaConstants.CollapsibleBody, testID })}\n    >\n      <CollapsibleBodyContent _hasMargin={_hasMargin}>{children}</CollapsibleBodyContent>\n    </BaseBox>\n  );\n};\n\nconst CollapsibleBody = assignWithoutSideEffects(_CollapsibleBody, {\n  componentId: MetaConstants.CollapsibleBody,\n});\n\nexport type { CollapsibleBodyProps };\nexport { CollapsibleBody };\n"],"names":["_CollapsibleBody","_ref","children","testID","width","_ref$_hasMargin","_hasMargin","_useCollapsible","useCollapsible","collapsibleBodyId","isExpanded","_jsx","BaseBox","Object","assign","id","makeAccessible","role","hidden","metaAttribute","name","MetaConstants","CollapsibleBody","CollapsibleBodyContent","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;AASA,IAAMA,gBAAgB,CAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,CAKoB,CAAA,IAJxCC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,MAAM,CAAAF,IAAA,CAANE,MAAM,CACNC,KAAK,CAAAH,IAAA,CAALG,KAAK,CAAAC,eAAA,CAAAJ,IAAA,CACLK,UAAU,CAAVA,UAAU,CAAAD,eAAA,GAAG,KAAA,CAAA,CAAA,IAAI,CAAAA,eAAA,CAEjB,IAAAE,eAAA,CAA0CC,cAAc,EAAE,CAAlDC,iBAAiB,CAAAF,eAAA,CAAjBE,iBAAiB,CAAEC,UAAU,CAAAH,eAAA,CAAVG,UAAU,CACrC,OACEC,GAAA,CAACC,OAAO,CAAAC,MAAA,CAAAC,MAAA,CACNC,CAAAA,EAAE,CAAEN,iBAAkB,CACtBL,KAAK,CAAEA,KAAM,EACTY,cAAc,CAAC,CAAEC,IAAI,CAAE,QAAQ,CAAEC,MAAM,CAAE,CAACR,UAAW,CAAC,CAAC,CACvDS,aAAa,CAAC,CAAEC,IAAI,CAAEC,aAAa,CAACC,eAAe,CAAEnB,MAAM,CAANA,MAAO,CAAC,CAAC,CAAA,CAAAD,QAAA,CAElES,GAAA,CAACY,sBAAsB,CAAA,CAACjB,UAAU,CAAEA,UAAW,CAAAJ,QAAA,CAAEA,QAAQ,CAAyB,CAAC,CAC5E,CAAA,CAAC,CAEd,CAAC,CAEK,IAAAoB,eAAe,CAAGE,wBAAwB,CAACxB,gBAAgB,CAAE,CACjEyB,WAAW,CAAEJ,aAAa,CAACC,eAC7B,CAAC;;;;"}

package/build/lib/native/components/Collapsible/CollapsibleBodyContent.native.js

@@ -14,7 +14,7 @@ import { castNativeType } from '../../utils/platform/castUtils.js';
 import '../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 
-var AnimatedStyledCollapsibleBodyContent=styled(Animated.View)(function(){return {overflow:'hidden'};});var CollapsibleBodyContent=function CollapsibleBodyContent(_ref){var children=_ref.children;var _useCollapsible=useCollapsible(),isExpanded=_useCollapsible.isExpanded,direction=_useCollapsible.direction;var _useTheme=useTheme(),theme=_useTheme.theme;var opacity=useSharedValue(getOpacity({isExpanded:isExpanded}));var height=useSharedValue(isExpanded?undefined:0);var _useState=useState(0),_useState2=_slicedToArray(_useState,2),layoutHeight=_useState2[0],setLayoutHeight=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isAnimating=_useState4[0],setIsAnimating=_useState4[1];var onAnimationComplete=useCallback(function(){requestAnimationFrame(function(){return setIsAnimating(false);});},[]);var duration=castNativeType(getTransitionDuration(theme));var easing=castNativeType(getTransitionEasing(theme));useEffect(function(){setIsAnimating(true);opacity.value=withTiming(getOpacity({isExpanded:isExpanded}),{duration:duration,easing:easing});height.value=withTiming(isExpanded&&layoutHeight?layoutHeight:0,{duration:duration,easing:easing},function(isComplete){if(isComplete){runOnJS(onAnimationComplete)();}});},[isExpanded,opacity,duration,easing,height,layoutHeight,onAnimationComplete]);var animatedStyles=useAnimatedStyle(function(){return {opacity:opacity.value,height:height.value};});var onLayout=useCallback(function(event){if(isAnimating){if(event.nativeEvent.layout.height>layoutHeight){setLayoutHeight(event.nativeEvent.layout.height);}}else if(event.nativeEvent.layout.height!==layoutHeight){setLayoutHeight(event.nativeEvent.layout.height);}},[layoutHeight,isAnimating]);return jsx(AnimatedStyledCollapsibleBodyContent,{isExpanded:isExpanded,style:animatedStyles,children:jsx(View,{onLayout:onLayout,style:isExpanded||isAnimating?nativeStyles.collapsibleBodyExpanded:nativeStyles.collapsibleBodyCollapsed,children:jsx(Box,Object.assign({},getCollapsibleBodyContentBoxProps({direction:direction}),{children:children}))})});};
+var AnimatedStyledCollapsibleBodyContent=styled(Animated.View)(function(){return {overflow:'hidden'};});var CollapsibleBodyContent=function CollapsibleBodyContent(_ref){var children=_ref.children,_hasMargin=_ref._hasMargin;var _useCollapsible=useCollapsible(),isExpanded=_useCollapsible.isExpanded,direction=_useCollapsible.direction;var _useTheme=useTheme(),theme=_useTheme.theme;var opacity=useSharedValue(getOpacity({isExpanded:isExpanded}));var height=useSharedValue(isExpanded?undefined:0);var _useState=useState(0),_useState2=_slicedToArray(_useState,2),layoutHeight=_useState2[0],setLayoutHeight=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isAnimating=_useState4[0],setIsAnimating=_useState4[1];var onAnimationComplete=useCallback(function(){requestAnimationFrame(function(){return setIsAnimating(false);});},[]);var duration=castNativeType(getTransitionDuration(theme));var easing=castNativeType(getTransitionEasing(theme));useEffect(function(){setIsAnimating(true);opacity.value=withTiming(getOpacity({isExpanded:isExpanded}),{duration:duration,easing:easing});height.value=withTiming(isExpanded&&layoutHeight?layoutHeight:0,{duration:duration,easing:easing},function(isComplete){if(isComplete){runOnJS(onAnimationComplete)();}});},[isExpanded,opacity,duration,easing,height,layoutHeight,onAnimationComplete]);var animatedStyles=useAnimatedStyle(function(){return {opacity:opacity.value,height:height.value};});var onLayout=useCallback(function(event){if(isAnimating){if(event.nativeEvent.layout.height>layoutHeight){setLayoutHeight(event.nativeEvent.layout.height);}}else if(event.nativeEvent.layout.height!==layoutHeight){setLayoutHeight(event.nativeEvent.layout.height);}},[layoutHeight,isAnimating]);return jsx(AnimatedStyledCollapsibleBodyContent,{isExpanded:isExpanded,style:animatedStyles,children:jsx(View,{onLayout:onLayout,style:isExpanded||isAnimating?nativeStyles.collapsibleBodyExpanded:nativeStyles.collapsibleBodyCollapsed,children:jsx(Box,Object.assign({},getCollapsibleBodyContentBoxProps({direction:direction,_hasMargin:_hasMargin}),{children:children}))})});};
 
 export { CollapsibleBodyContent };
 //# sourceMappingURL=CollapsibleBodyContent.native.js.map

package/build/lib/native/components/Collapsible/CollapsibleBodyContent.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleBodyContent.native.js","sources":["../../../../../src/components/Collapsible/CollapsibleBodyContent.native.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components/native';\nimport Animated, {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { LayoutChangeEvent, ViewStyle } from 'react-native';\nimport { View } from 'react-native';\nimport type { CollapsibleBodyContentProps } from './types';\nimport { useCollapsible } from './CollapsibleContext';\nimport {\n  getCollapsibleBodyContentBoxProps,\n  getOpacity,\n  getTransitionDuration,\n  getTransitionEasing,\n} from './commonStyles';\nimport { nativeStyles } from './styles.native';\nimport { Box } from '~components/Box';\nimport { useTheme } from '~components/BladeProvider';\nimport { castNativeType } from '~utils';\n\ntype AnimatedStyledCollapsibleBodyContentProps = {\n  isExpanded: boolean;\n};\n\nconst AnimatedStyledCollapsibleBodyContent = styled(\n  Animated.View,\n)<AnimatedStyledCollapsibleBodyContentProps>(() => {\n  return {\n    overflow: 'hidden',\n  };\n});\n\nconst CollapsibleBodyContent = ({ children }: CollapsibleBodyContentProps): ReactElement => {\n  const { isExpanded, direction } = useCollapsible();\n  const { theme } = useTheme();\n\n  const opacity = useSharedValue(getOpacity({ isExpanded }));\n\n  // `undefined` implies no height restrictions which is analogous to `auto` on web\n  const height = useSharedValue(isExpanded ? undefined : 0);\n  const [layoutHeight, setLayoutHeight] = useState(0);\n\n  // Keeps track of running animation to control absolute / relative positioning and handling layout event\n  const [isAnimating, setIsAnimating] = useState(false);\n  const onAnimationComplete = useCallback((): void => {\n    // Only mark the animation complete before the next repaint, otherwise, sometimes leads to state update delays when you try to quickly toggle multiple times\n    requestAnimationFrame(() => setIsAnimating(false));\n  }, []);\n\n  const duration = castNativeType(getTransitionDuration(theme));\n  const easing = castNativeType(getTransitionEasing(theme));\n\n  useEffect(() => {\n    setIsAnimating(true);\n\n    opacity.value = withTiming(getOpacity({ isExpanded }), { duration, easing });\n    height.value = withTiming(\n      // Animates the height to the measured value\n      isExpanded && layoutHeight ? layoutHeight : 0,\n      { duration, easing },\n      (isComplete) => {\n        // Only run this if the animation ran uninterrupted, for eg collapsing the content before it expanded fully\n        if (isComplete) {\n          // The callback `onAnimationComplete` has to be declared outside this, on JS thread\n          runOnJS(onAnimationComplete)();\n        }\n      },\n    );\n  }, [isExpanded, opacity, duration, easing, height, layoutHeight, onAnimationComplete]);\n\n  const animatedStyles = useAnimatedStyle(\n    (): ViewStyle => {\n      return {\n        opacity: opacity.value,\n        height: height.value,\n      };\n    },\n  );\n\n  /**\n   * Tracks the height of content so we can animate height to and from 0 to the content's height.\n   * **Note:** We can't animate height from 0 to auto or vice-versa.\n   */\n  const onLayout: (event: LayoutChangeEvent) => void = useCallback(\n    (event) => {\n      if (isAnimating) {\n        if (event.nativeEvent.layout.height > layoutHeight) {\n          /**\n           * During animation, we set `layoutHeight` if the native event's layout height is larger.\n           *\n           * The greater than comparison is needed because sometimes the native event's layout height is smaller than actual content height 🤯\n           * For example, this happens if you try to render a lengthy `Text` that wraps onto multiple lines.\n           * In this case the initial native event's layout height only counts height of `Text` as if it were single line.\n           * So, when the `Text` actually renders on screen and wraps, another `nativeEvent` is triggered which gives us the actual content height.\n           * `nativeEvent` is triggered multiple times during animation but we only set `layoutHeight` if the height value is greater, hence the check.\n           */\n          setLayoutHeight(event.nativeEvent.layout.height);\n        }\n      } else if (event.nativeEvent.layout.height !== layoutHeight) {\n        /**\n         * When not animating, we set `layoutHeight` anytime `nativeEvent` layout height changes.\n         * This handles userland dynamic content inside the slot.\n         */\n        setLayoutHeight(event.nativeEvent.layout.height);\n      }\n    },\n    [layoutHeight, isAnimating],\n  );\n\n  return (\n    <AnimatedStyledCollapsibleBodyContent isExpanded={isExpanded} style={animatedStyles}>\n      <View\n        onLayout={onLayout}\n        /**\n         * This View is positioned absolute in collapsed state so `onLayout` can capture the height of the content.\n         * During animation, it's positioned relative so height related animation can happen, pushing adjacent content down or up.\n         */\n        style={\n          isExpanded || isAnimating\n            ? nativeStyles.collapsibleBodyExpanded\n            : nativeStyles.collapsibleBodyCollapsed\n        }\n      >\n        <Box {...getCollapsibleBodyContentBoxProps({ direction })}>{children}</Box>\n      </View>\n    </AnimatedStyledCollapsibleBodyContent>\n  );\n};\n\nexport { CollapsibleBodyContent };\n"],"names":["AnimatedStyledCollapsibleBodyContent","styled","Animated","View","overflow","CollapsibleBodyContent","_ref","children","_useCollapsible","useCollapsible","isExpanded","direction","_useTheme","useTheme","theme","opacity","useSharedValue","getOpacity","height","undefined","_useState","useState","_useState2","_slicedToArray","layoutHeight","setLayoutHeight","_useState3","_useState4","isAnimating","setIsAnimating","onAnimationComplete","useCallback","requestAnimationFrame","duration","castNativeType","getTransitionDuration","easing","getTransitionEasing","useEffect","value","withTiming","isComplete","runOnJS","animatedStyles","useAnimatedStyle","onLayout","event","nativeEvent","layout","_jsx","style","nativeStyles","collapsibleBodyExpanded","collapsibleBodyCollapsed","Box","Object","assign","getCollapsibleBodyContentBoxProps"],"mappings":"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"}
+{"version":3,"file":"CollapsibleBodyContent.native.js","sources":["../../../../../src/components/Collapsible/CollapsibleBodyContent.native.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components/native';\nimport Animated, {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { LayoutChangeEvent, ViewStyle } from 'react-native';\nimport { View } from 'react-native';\nimport type { CollapsibleBodyContentProps } from './types';\nimport { useCollapsible } from './CollapsibleContext';\nimport {\n  getCollapsibleBodyContentBoxProps,\n  getOpacity,\n  getTransitionDuration,\n  getTransitionEasing,\n} from './commonStyles';\nimport { nativeStyles } from './styles.native';\nimport { Box } from '~components/Box';\nimport { useTheme } from '~components/BladeProvider';\nimport { castNativeType } from '~utils';\n\ntype AnimatedStyledCollapsibleBodyContentProps = {\n  isExpanded: boolean;\n};\n\nconst AnimatedStyledCollapsibleBodyContent = styled(\n  Animated.View,\n)<AnimatedStyledCollapsibleBodyContentProps>(() => {\n  return {\n    overflow: 'hidden',\n  };\n});\n\nconst CollapsibleBodyContent = ({\n  children,\n  _hasMargin,\n}: CollapsibleBodyContentProps): ReactElement => {\n  const { isExpanded, direction } = useCollapsible();\n  const { theme } = useTheme();\n\n  const opacity = useSharedValue(getOpacity({ isExpanded }));\n\n  // `undefined` implies no height restrictions which is analogous to `auto` on web\n  const height = useSharedValue(isExpanded ? undefined : 0);\n  const [layoutHeight, setLayoutHeight] = useState(0);\n\n  // Keeps track of running animation to control absolute / relative positioning and handling layout event\n  const [isAnimating, setIsAnimating] = useState(false);\n  const onAnimationComplete = useCallback((): void => {\n    // Only mark the animation complete before the next repaint, otherwise, sometimes leads to state update delays when you try to quickly toggle multiple times\n    requestAnimationFrame(() => setIsAnimating(false));\n  }, []);\n\n  const duration = castNativeType(getTransitionDuration(theme));\n  const easing = castNativeType(getTransitionEasing(theme));\n\n  useEffect(() => {\n    setIsAnimating(true);\n\n    opacity.value = withTiming(getOpacity({ isExpanded }), { duration, easing });\n    height.value = withTiming(\n      // Animates the height to the measured value\n      isExpanded && layoutHeight ? layoutHeight : 0,\n      { duration, easing },\n      (isComplete) => {\n        // Only run this if the animation ran uninterrupted, for eg collapsing the content before it expanded fully\n        if (isComplete) {\n          // The callback `onAnimationComplete` has to be declared outside this, on JS thread\n          runOnJS(onAnimationComplete)();\n        }\n      },\n    );\n  }, [isExpanded, opacity, duration, easing, height, layoutHeight, onAnimationComplete]);\n\n  const animatedStyles = useAnimatedStyle(\n    (): ViewStyle => {\n      return {\n        opacity: opacity.value,\n        height: height.value,\n      };\n    },\n  );\n\n  /**\n   * Tracks the height of content so we can animate height to and from 0 to the content's height.\n   * **Note:** We can't animate height from 0 to auto or vice-versa.\n   */\n  const onLayout: (event: LayoutChangeEvent) => void = useCallback(\n    (event) => {\n      if (isAnimating) {\n        if (event.nativeEvent.layout.height > layoutHeight) {\n          /**\n           * During animation, we set `layoutHeight` if the native event's layout height is larger.\n           *\n           * The greater than comparison is needed because sometimes the native event's layout height is smaller than actual content height 🤯\n           * For example, this happens if you try to render a lengthy `Text` that wraps onto multiple lines.\n           * In this case the initial native event's layout height only counts height of `Text` as if it were single line.\n           * So, when the `Text` actually renders on screen and wraps, another `nativeEvent` is triggered which gives us the actual content height.\n           * `nativeEvent` is triggered multiple times during animation but we only set `layoutHeight` if the height value is greater, hence the check.\n           */\n          setLayoutHeight(event.nativeEvent.layout.height);\n        }\n      } else if (event.nativeEvent.layout.height !== layoutHeight) {\n        /**\n         * When not animating, we set `layoutHeight` anytime `nativeEvent` layout height changes.\n         * This handles userland dynamic content inside the slot.\n         */\n        setLayoutHeight(event.nativeEvent.layout.height);\n      }\n    },\n    [layoutHeight, isAnimating],\n  );\n\n  return (\n    <AnimatedStyledCollapsibleBodyContent isExpanded={isExpanded} style={animatedStyles}>\n      <View\n        onLayout={onLayout}\n        /**\n         * This View is positioned absolute in collapsed state so `onLayout` can capture the height of the content.\n         * During animation, it's positioned relative so height related animation can happen, pushing adjacent content down or up.\n         */\n        style={\n          isExpanded || isAnimating\n            ? nativeStyles.collapsibleBodyExpanded\n            : nativeStyles.collapsibleBodyCollapsed\n        }\n      >\n        <Box {...getCollapsibleBodyContentBoxProps({ direction, _hasMargin })}>{children}</Box>\n      </View>\n    </AnimatedStyledCollapsibleBodyContent>\n  );\n};\n\nexport { CollapsibleBodyContent };\n"],"names":["AnimatedStyledCollapsibleBodyContent","styled","Animated","View","overflow","CollapsibleBodyContent","_ref","children","_hasMargin","_useCollapsible","useCollapsible","isExpanded","direction","_useTheme","useTheme","theme","opacity","useSharedValue","getOpacity","height","undefined","_useState","useState","_useState2","_slicedToArray","layoutHeight","setLayoutHeight","_useState3","_useState4","isAnimating","setIsAnimating","onAnimationComplete","useCallback","requestAnimationFrame","duration","castNativeType","getTransitionDuration","easing","getTransitionEasing","useEffect","value","withTiming","isComplete","runOnJS","animatedStyles","useAnimatedStyle","onLayout","event","nativeEvent","layout","_jsx","style","nativeStyles","collapsibleBodyExpanded","collapsibleBodyCollapsed","Box","Object","assign","getCollapsibleBodyContentBoxProps"],"mappings":"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"}

package/build/lib/native/components/Collapsible/CollapsibleLink.js

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useCallback } from 'react';
 import { useCollapsible } from './CollapsibleContext.js';
 import { CollapsibleChevronIcon } from './CollapsibleChevronIcon.native.js';
@@ -5,9 +6,15 @@ import '@babel/runtime/helpers/defineProperty';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import BaseLink from '../Link/BaseLink/BaseLink.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-native';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import '../BladeProvider/useTheme.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _CollapsibleLink=function _CollapsibleLink(_ref){var children=_ref.children,size=_ref.size,isDisabled=_ref.isDisabled,testID=_ref.testID,accessibilityLabel=_ref.accessibilityLabel;var _useCollapsible=useCollapsible(),onExpandChange=_useCollapsible.onExpandChange,isExpanded=_useCollapsible.isExpanded,collapsibleBodyId=_useCollapsible.collapsibleBodyId;var toggleIsExpanded=useCallback(function(){return onExpandChange(!isExpanded);},[onExpandChange,isExpanded]);return jsx(BaseLink,{variant:"button",size:size,icon:CollapsibleChevronIcon,iconPosition:"right",isDisabled:isDisabled,testID:testID,onClick:toggleIsExpanded,accessibilityProps:{label:accessibilityLabel,controls:collapsibleBodyId,expanded:isExpanded},children:children});};var CollapsibleLink=assignWithoutSideEffects(_CollapsibleLink,{componentId:MetaConstants.CollapsibleLink});
+var _excluded=["children","size","color","isDisabled","testID","accessibilityLabel"];var _CollapsibleLink=function _CollapsibleLink(_ref){var children=_ref.children,size=_ref.size,_ref$color=_ref.color,color=_ref$color===void 0?'primary':_ref$color,isDisabled=_ref.isDisabled,testID=_ref.testID,accessibilityLabel=_ref.accessibilityLabel,styledProps=_objectWithoutProperties(_ref,_excluded);var _useCollapsible=useCollapsible(),onExpandChange=_useCollapsible.onExpandChange,isExpanded=_useCollapsible.isExpanded,collapsibleBodyId=_useCollapsible.collapsibleBodyId;var toggleIsExpanded=useCallback(function(){return onExpandChange(!isExpanded);},[onExpandChange,isExpanded]);return jsx(BaseLink,Object.assign({variant:"button",size:size,color:color,icon:CollapsibleChevronIcon,iconPosition:"right",isDisabled:isDisabled,testID:testID,onClick:toggleIsExpanded,accessibilityProps:{label:accessibilityLabel,controls:collapsibleBodyId,expanded:isExpanded}},getStyledProps(styledProps),{children:children}));};var CollapsibleLink=assignWithoutSideEffects(_CollapsibleLink,{componentId:MetaConstants.CollapsibleLink});
 
 export { CollapsibleLink };
 //# sourceMappingURL=CollapsibleLink.js.map

package/build/lib/native/components/Collapsible/CollapsibleLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleLink.js","sources":["../../../../../src/components/Collapsible/CollapsibleLink.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback } from 'react';\nimport { useCollapsible } from './CollapsibleContext';\nimport { CollapsibleChevronIcon } from './CollapsibleChevronIcon';\nimport type { LinkProps } from '~components/Link';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { BaseLink } from '~components/Link/BaseLink';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\ntype CollapsibleLinkProps = Pick<\n  LinkProps,\n  'size' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'children'\n>;\n\nconst _CollapsibleLink = ({\n  children,\n  size,\n  isDisabled,\n  testID,\n  accessibilityLabel,\n}: CollapsibleLinkProps): ReactElement => {\n  const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n\n  const toggleIsExpanded = useCallback(() => onExpandChange(!isExpanded), [\n    onExpandChange,\n    isExpanded,\n  ]);\n\n  return (\n    <BaseLink\n      variant=\"button\"\n      size={size}\n      icon={CollapsibleChevronIcon}\n      iconPosition=\"right\"\n      isDisabled={isDisabled}\n      testID={testID}\n      onClick={toggleIsExpanded}\n      accessibilityProps={{\n        label: accessibilityLabel,\n        controls: collapsibleBodyId,\n        expanded: isExpanded,\n      }}\n    >\n      {children}\n    </BaseLink>\n  );\n};\n\nconst CollapsibleLink = assignWithoutSideEffects(_CollapsibleLink, {\n  componentId: MetaConstants.CollapsibleLink,\n});\n\nexport type { CollapsibleLinkProps };\nexport { CollapsibleLink };\n"],"names":["_CollapsibleLink","_ref","children","size","isDisabled","testID","accessibilityLabel","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","toggleIsExpanded","useCallback","_jsx","BaseLink","variant","icon","CollapsibleChevronIcon","iconPosition","onClick","accessibilityProps","label","controls","expanded","CollapsibleLink","assignWithoutSideEffects","componentId","MetaConstants"],"mappings":";;;;;;;;;AAcA,IAAMA,gBAAgB,CAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,CAMoB,KALxCC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CACJC,UAAU,CAAAH,IAAA,CAAVG,UAAU,CACVC,MAAM,CAAAJ,IAAA,CAANI,MAAM,CACNC,kBAAkB,CAAAL,IAAA,CAAlBK,kBAAkB,CAElB,IAAAC,eAAA,CAA0DC,cAAc,EAAE,CAAlEC,cAAc,CAAAF,eAAA,CAAdE,cAAc,CAAEC,UAAU,CAAAH,eAAA,CAAVG,UAAU,CAAEC,iBAAiB,CAAAJ,eAAA,CAAjBI,iBAAiB,CAErD,IAAMC,gBAAgB,CAAGC,WAAW,CAAC,kBAAMJ,cAAc,CAAC,CAACC,UAAU,CAAC,CAAE,CAAA,CAAA,CACtED,cAAc,CACdC,UAAU,CACX,CAAC,CAEF,OACEI,GAAA,CAACC,QAAQ,CAAA,CACPC,OAAO,CAAC,QAAQ,CAChBb,IAAI,CAAEA,IAAK,CACXc,IAAI,CAAEC,sBAAuB,CAC7BC,YAAY,CAAC,OAAO,CACpBf,UAAU,CAAEA,UAAW,CACvBC,MAAM,CAAEA,MAAO,CACfe,OAAO,CAAER,gBAAiB,CAC1BS,kBAAkB,CAAE,CAClBC,KAAK,CAAEhB,kBAAkB,CACzBiB,QAAQ,CAAEZ,iBAAiB,CAC3Ba,QAAQ,CAAEd,UACZ,CAAE,CAAAR,QAAA,CAEDA,QAAQ,CACD,CAAC,CAEf,CAAC,CAEK,IAAAuB,eAAe,CAAGC,wBAAwB,CAAC1B,gBAAgB,CAAE,CACjE2B,WAAW,CAAEC,aAAa,CAACH,eAC7B,CAAC;;;;"}
+{"version":3,"file":"CollapsibleLink.js","sources":["../../../../../src/components/Collapsible/CollapsibleLink.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback } from 'react';\nimport { useCollapsible } from './CollapsibleContext';\nimport { CollapsibleChevronIcon } from './CollapsibleChevronIcon';\nimport type { LinkProps } from '~components/Link';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { BaseLink } from '~components/Link/BaseLink';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\n\ntype CollapsibleLinkProps = Pick<\n  LinkProps,\n  'color' | 'size' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'children'\n> &\n  StyledPropsBlade;\n\nconst _CollapsibleLink = ({\n  children,\n  size,\n  color = 'primary',\n  isDisabled,\n  testID,\n  accessibilityLabel,\n  ...styledProps\n}: CollapsibleLinkProps): ReactElement => {\n  const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n\n  const toggleIsExpanded = useCallback(() => onExpandChange(!isExpanded), [\n    onExpandChange,\n    isExpanded,\n  ]);\n\n  return (\n    <BaseLink\n      variant=\"button\"\n      size={size}\n      color={color}\n      icon={CollapsibleChevronIcon}\n      iconPosition=\"right\"\n      isDisabled={isDisabled}\n      testID={testID}\n      onClick={toggleIsExpanded}\n      accessibilityProps={{\n        label: accessibilityLabel,\n        controls: collapsibleBodyId,\n        expanded: isExpanded,\n      }}\n      {...getStyledProps(styledProps)}\n    >\n      {children}\n    </BaseLink>\n  );\n};\n\nconst CollapsibleLink = assignWithoutSideEffects(_CollapsibleLink, {\n  componentId: MetaConstants.CollapsibleLink,\n});\n\nexport type { CollapsibleLinkProps };\nexport { CollapsibleLink };\n"],"names":["_CollapsibleLink","_ref","children","size","_ref$color","color","isDisabled","testID","accessibilityLabel","styledProps","_objectWithoutProperties","_excluded","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","toggleIsExpanded","useCallback","_jsx","BaseLink","Object","assign","variant","icon","CollapsibleChevronIcon","iconPosition","onClick","accessibilityProps","label","controls","expanded","getStyledProps","CollapsibleLink","assignWithoutSideEffects","componentId","MetaConstants"],"mappings":";;;;;;;;;;;;;;;;qFAiBA,IAAMA,gBAAgB,CAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,CAQoB,CAAA,IAPxCC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CAAAC,UAAA,CAAAH,IAAA,CACJI,KAAK,CAALA,KAAK,CAAAD,UAAA,GAAG,KAAA,CAAA,CAAA,SAAS,CAAAA,UAAA,CACjBE,UAAU,CAAAL,IAAA,CAAVK,UAAU,CACVC,MAAM,CAAAN,IAAA,CAANM,MAAM,CACNC,kBAAkB,CAAAP,IAAA,CAAlBO,kBAAkB,CACfC,WAAW,CAAAC,wBAAA,CAAAT,IAAA,CAAAU,SAAA,CAAA,CAEd,IAAAC,eAAA,CAA0DC,cAAc,EAAE,CAAlEC,cAAc,CAAAF,eAAA,CAAdE,cAAc,CAAEC,UAAU,CAAAH,eAAA,CAAVG,UAAU,CAAEC,iBAAiB,CAAAJ,eAAA,CAAjBI,iBAAiB,CAErD,IAAMC,gBAAgB,CAAGC,WAAW,CAAC,UAAA,CAAA,OAAMJ,cAAc,CAAC,CAACC,UAAU,CAAC,CAAA,CAAA,CAAE,CACtED,cAAc,CACdC,UAAU,CACX,CAAC,CAEF,OACEI,GAAA,CAACC,QAAQ,CAAAC,MAAA,CAAAC,MAAA,CACPC,CAAAA,OAAO,CAAC,QAAQ,CAChBpB,IAAI,CAAEA,IAAK,CACXE,KAAK,CAAEA,KAAM,CACbmB,IAAI,CAAEC,sBAAuB,CAC7BC,YAAY,CAAC,OAAO,CACpBpB,UAAU,CAAEA,UAAW,CACvBC,MAAM,CAAEA,MAAO,CACfoB,OAAO,CAAEV,gBAAiB,CAC1BW,kBAAkB,CAAE,CAClBC,KAAK,CAAErB,kBAAkB,CACzBsB,QAAQ,CAAEd,iBAAiB,CAC3Be,QAAQ,CAAEhB,UACZ,CAAE,CAAA,CACEiB,cAAc,CAACvB,WAAW,CAAC,EAAAP,QAAA,CAE9BA,QAAQ,CAAA,CACD,CAAC,CAEf,CAAC,CAEK,IAAA+B,eAAe,CAAGC,wBAAwB,CAAClC,gBAAgB,CAAE,CACjEmC,WAAW,CAAEC,aAAa,CAACH,eAC7B,CAAC;;;;"}

package/build/lib/native/components/Collapsible/commonStyles.js

@@ -4,7 +4,7 @@ import 'react';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.native.js';
 import '../BladeProvider/useTheme.js';
 
-var getCollapsibleBodyContentBoxProps=function getCollapsibleBodyContentBoxProps(_ref){var direction=_ref.direction;return {marginTop:direction==='bottom'?'spacing.5':'spacing.0',marginBottom:direction==='top'?'spacing.5':'spacing.0'};};var getOpacity=function getOpacity(_ref2){var isExpanded=_ref2.isExpanded;return isExpanded?1:0.8;};var getTransitionDuration=function getTransitionDuration(theme){return makeMotionTime(theme.motion.duration.xmoderate);};var getTransitionEasing=function getTransitionEasing(theme){return theme.motion.easing.standard.effective;};var getCollapsibleChevronIconTransforms=function getCollapsibleChevronIconTransforms(){return {transformExpanded:-180,transformCollapsed:0};};
+var getCollapsibleBodyContentBoxProps=function getCollapsibleBodyContentBoxProps(_ref){var direction=_ref.direction,_hasMargin=_ref._hasMargin;if(!_hasMargin){return {};}return {marginTop:direction==='bottom'?'spacing.5':'spacing.0',marginBottom:direction==='top'?'spacing.5':'spacing.0'};};var getOpacity=function getOpacity(_ref2){var isExpanded=_ref2.isExpanded;return isExpanded?1:0.8;};var getTransitionDuration=function getTransitionDuration(theme){return makeMotionTime(theme.motion.duration.xmoderate);};var getTransitionEasing=function getTransitionEasing(theme){return theme.motion.easing.standard.effective;};var getCollapsibleChevronIconTransforms=function getCollapsibleChevronIconTransforms(){return {transformExpanded:-180,transformCollapsed:0};};
 
 export { getCollapsibleBodyContentBoxProps, getCollapsibleChevronIconTransforms, getOpacity, getTransitionDuration, getTransitionEasing };
 //# sourceMappingURL=commonStyles.js.map

package/build/lib/native/components/Collapsible/commonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"commonStyles.js","sources":["../../../../../src/components/Collapsible/commonStyles.ts"],"sourcesContent":["import type { CollapsibleProps } from './Collapsible';\nimport type { Theme } from '~components/BladeProvider';\nimport type { BoxProps } from '~components/Box';\nimport { makeMotionTime } from '~utils';\n\nconst getCollapsibleBodyContentBoxProps = ({\n  direction,\n}: {\n  direction: CollapsibleProps['direction'];\n}): BoxProps => ({\n  /**\n   * Need a margin inside the outside wrapper so this is\n   * included in height calculations and prevents jank\n   */\n  marginTop: direction === 'bottom' ? 'spacing.5' : 'spacing.0',\n  marginBottom: direction === 'top' ? 'spacing.5' : 'spacing.0',\n});\n\nconst getOpacity = ({ isExpanded }: { isExpanded: boolean }): number => (isExpanded ? 1 : 0.8);\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nconst getTransitionDuration = (theme: Theme) => makeMotionTime(theme.motion.duration.xmoderate);\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nconst getTransitionEasing = (theme: Theme) => theme.motion.easing.standard.effective;\n\nconst getCollapsibleChevronIconTransforms = (): {\n  transformExpanded: number;\n  transformCollapsed: number;\n} => ({ transformExpanded: -180, transformCollapsed: 0 });\n\nexport {\n  getCollapsibleBodyContentBoxProps,\n  getOpacity,\n  getTransitionDuration,\n  getTransitionEasing,\n  getCollapsibleChevronIconTransforms,\n};\n"],"names":["getCollapsibleBodyContentBoxProps","_ref","direction","marginTop","marginBottom","getOpacity","_ref2","isExpanded","getTransitionDuration","theme","makeMotionTime","motion","duration","xmoderate","getTransitionEasing","easing","standard","effective","getCollapsibleChevronIconTransforms","transformExpanded","transformCollapsed"],"mappings":";;;;;;AAKM,IAAAA,iCAAiC,CAAG,SAApCA,iCAAiCA,CAAAC,IAAA,CACrC,CAAA,IAAAC,SAAS,CAAAD,IAAA,CAATC,SAAS,CAGM,OAAA,CAKfC,SAAS,CAAED,SAAS,GAAK,QAAQ,CAAG,WAAW,CAAG,WAAW,CAC7DE,YAAY,CAAEF,SAAS,GAAK,KAAK,CAAG,WAAW,CAAG,WACpD,CAAC,GAEK,IAAAG,UAAU,CAAG,SAAbA,UAAUA,CAAAC,KAAA,CAAA,CAAA,IAAMC,UAAU,CAAAD,KAAA,CAAVC,UAAU,QAAyCA,UAAU,CAAG,CAAC,CAAG,GAAG,CAAC,EAGxF,IAAAC,qBAAqB,CAAG,SAAxBA,qBAAqBA,CAAIC,KAAY,SAAKC,cAAc,CAACD,KAAK,CAACE,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAC,CAG/F,EAAM,IAAAC,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAIL,KAAY,CAAA,CAAA,OAAKA,KAAK,CAACE,MAAM,CAACI,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA,EAE9E,IAAAC,mCAAmC,CAAG,SAAtCA,mCAAmCA,EAAA,CAAA,OAGnC,CAAEC,iBAAiB,CAAE,CAAC,GAAG,CAAEC,kBAAkB,CAAE,CAAE,CAAC,CAAA;;;;"}
+{"version":3,"file":"commonStyles.js","sources":["../../../../../src/components/Collapsible/commonStyles.ts"],"sourcesContent":["import type { CollapsibleProps } from './Collapsible';\nimport type { CollapsibleBodyProps } from './types';\nimport type { Theme } from '~components/BladeProvider';\nimport type { BoxProps } from '~components/Box';\nimport { makeMotionTime } from '~utils';\n\nconst getCollapsibleBodyContentBoxProps = ({\n  direction,\n  _hasMargin,\n}: {\n  direction: CollapsibleProps['direction'];\n  _hasMargin: CollapsibleBodyProps['_hasMargin'];\n}): BoxProps => {\n  if (!_hasMargin) {\n    return {};\n  }\n\n  return {\n    /**\n     * Need a margin inside the outside wrapper so this is\n     * included in height calculations and prevents jank\n     */\n    marginTop: direction === 'bottom' ? 'spacing.5' : 'spacing.0',\n    marginBottom: direction === 'top' ? 'spacing.5' : 'spacing.0',\n  };\n};\n\nconst getOpacity = ({ isExpanded }: { isExpanded: boolean }): number => (isExpanded ? 1 : 0.8);\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nconst getTransitionDuration = (theme: Theme) => makeMotionTime(theme.motion.duration.xmoderate);\n\n// eslint-disable-next-line @typescript-eslint/explicit-function-return-type\nconst getTransitionEasing = (theme: Theme) => theme.motion.easing.standard.effective;\n\nconst getCollapsibleChevronIconTransforms = (): {\n  transformExpanded: number;\n  transformCollapsed: number;\n} => ({ transformExpanded: -180, transformCollapsed: 0 });\n\nexport {\n  getCollapsibleBodyContentBoxProps,\n  getOpacity,\n  getTransitionDuration,\n  getTransitionEasing,\n  getCollapsibleChevronIconTransforms,\n};\n"],"names":["getCollapsibleBodyContentBoxProps","_ref","direction","_hasMargin","marginTop","marginBottom","getOpacity","_ref2","isExpanded","getTransitionDuration","theme","makeMotionTime","motion","duration","xmoderate","getTransitionEasing","easing","standard","effective","getCollapsibleChevronIconTransforms","transformExpanded","transformCollapsed"],"mappings":";;;;;;AAMM,IAAAA,iCAAiC,CAAG,SAApCA,iCAAiCA,CAAAC,IAAA,CAMvB,CAAA,IALdC,SAAS,CAAAD,IAAA,CAATC,SAAS,CACTC,UAAU,CAAAF,IAAA,CAAVE,UAAU,CAKV,GAAI,CAACA,UAAU,CAAE,CACf,OAAO,EAAE,CACX,CAEA,OAAO,CAKLC,SAAS,CAAEF,SAAS,GAAK,QAAQ,CAAG,WAAW,CAAG,WAAW,CAC7DG,YAAY,CAAEH,SAAS,GAAK,KAAK,CAAG,WAAW,CAAG,WACpD,CAAC,CACH,EAEM,IAAAI,UAAU,CAAG,SAAbA,UAAUA,CAAAC,KAAA,MAAMC,UAAU,CAAAD,KAAA,CAAVC,UAAU,CAAyC,OAAAA,UAAU,CAAG,CAAC,CAAG,GAAG,CAAC,EAGxF,IAAAC,qBAAqB,CAAG,SAAxBA,qBAAqBA,CAAIC,KAAY,CAAA,CAAA,OAAKC,cAAc,CAACD,KAAK,CAACE,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAC,CAG/F,EAAM,IAAAC,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAIL,KAAY,SAAKA,KAAK,CAACE,MAAM,CAACI,MAAM,CAACC,QAAQ,CAACC,SAAS,CAEpF,EAAM,IAAAC,mCAAmC,CAAG,SAAtCA,mCAAmCA,UAGnC,CAAEC,iBAAiB,CAAE,CAAC,GAAG,CAAEC,kBAAkB,CAAE,CAAE,CAAC,CAAC;;;;"}

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

@@ -38,7 +38,7 @@ import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffect
 import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.native.js';
 import { useMergeRefs } from '../../../utils/useMergeRefs.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","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"];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(_ref10){var validationState=_ref10.validationState,hasErrorText=_ref10.hasErrorText,hasSuccessText=_ref10.hasSuccessText,hasHelpText=_ref10.hasHelpText,errorTextId=_ref10.errorTextId,successTextId=_ref10.successTextId,helpTextId=_ref10.helpTextId;if(validationState==='error'&&hasErrorText){return errorTextId;}if(validationState==='success'&&hasSuccessText){return successTextId;}if(hasHelpText){return helpTextId;}return '';};var FocusRingWrapper=styled(BaseBox)(function(_ref11){var theme=_ref11.theme,currentInteraction=_ref11.currentInteraction;return {borderRadius:makeBorderSize(theme.border.radius.medium),width:'100%','&:focus-within':Object.assign({},getFocusRingStyles(),{transitionDuration:castWebType(makeMotionTime(getIn(theme.motion.duration,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].duration))),transitionTimingFunction:castWebType(getIn(theme.motion.easing,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].easing))})};});var _BaseInput=function _BaseInput(_ref12,ref){var _ref12$as=_ref12.as,as=_ref12$as===void 0?'input':_ref12$as,label=_ref12.label,_ref12$labelPosition=_ref12.labelPosition,labelPosition=_ref12$labelPosition===void 0?'top':_ref12$labelPosition,placeholder=_ref12.placeholder,_ref12$type=_ref12.type,type=_ref12$type===void 0?'text':_ref12$type,defaultValue=_ref12.defaultValue,tags=_ref12.tags,_ref12$showAllTags=_ref12.showAllTags,showAllTags=_ref12$showAllTags===void 0?false:_ref12$showAllTags,_ref12$activeTagIndex=_ref12.activeTagIndex,activeTagIndex=_ref12$activeTagIndex===void 0?-1:_ref12$activeTagIndex,setActiveTagIndex=_ref12.setActiveTagIndex,name=_ref12.name,value=_ref12.value,onFocus=_ref12.onFocus,onChange=_ref12.onChange,onInput=_ref12.onInput,onBlur=_ref12.onBlur,onSubmit=_ref12.onSubmit,onClick=_ref12.onClick,onKeyDown=_ref12.onKeyDown,isDisabled=_ref12.isDisabled,necessityIndicator=_ref12.necessityIndicator,validationState=_ref12.validationState,errorText=_ref12.errorText,helpText=_ref12.helpText,successText=_ref12.successText,isRequired=_ref12.isRequired,leadingIcon=_ref12.leadingIcon,prefix=_ref12.prefix,trailingInteractionElement=_ref12.trailingInteractionElement,leadingInteractionElement=_ref12.leadingInteractionElement,suffix=_ref12.suffix,trailingIcon=_ref12.trailingIcon,maxCharacters=_ref12.maxCharacters,textAlign=_ref12.textAlign,autoFocus=_ref12.autoFocus,keyboardReturnKeyType=_ref12.keyboardReturnKeyType,keyboardType=_ref12.keyboardType,autoCompleteSuggestionType=_ref12.autoCompleteSuggestionType,trailingHeaderSlot=_ref12.trailingHeaderSlot,trailingFooterSlot=_ref12.trailingFooterSlot,numberOfLines=_ref12.numberOfLines,id=_ref12.id,componentName=_ref12.componentName,accessibilityLabel=_ref12.accessibilityLabel,labelId=_ref12.labelId,activeDescendant=_ref12.activeDescendant,hideLabelText=_ref12.hideLabelText,hideFormHint=_ref12.hideFormHint,hasPopup=_ref12.hasPopup,popupId=_ref12.popupId,isPopupExpanded=_ref12.isPopupExpanded,maxTagRows=_ref12.maxTagRows,shouldIgnoreBlurAnimation=_ref12.shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation=_ref12.setShouldIgnoreBlurAnimation,autoCapitalize=_ref12.autoCapitalize,setInputWrapperRef=_ref12.setInputWrapperRef,testID=_ref12.testID,isDropdownTrigger=_ref12.isDropdownTrigger,isLabelInsideInput=_ref12.isLabelInsideInput,_ref12$size=_ref12.size,size=_ref12$size===void 0?'medium':_ref12$size,trailingButton=_ref12.trailingButton,_ref12$valueComponent=_ref12.valueComponentType,valueComponentType=_ref12$valueComponent===void 0?'text':_ref12$valueComponent,styledProps=_objectWithoutProperties(_ref12,_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';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:hasPopup?'combobox':undefined,activeDescendant:activeDescendant});var willRenderHintText=Boolean(helpText)||Boolean(successText)||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';return jsxs(BaseBox,Object.assign({},metaAttribute({name:componentName,testID:testID}),getStyledProps(styledProps),{children:[jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',justifyContent:isLabelLeftPositioned?'center':undefined,alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",width:"100%",children:[!hideLabelText&&!isLabelInsideInput&&jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'column':'row',justifyContent:"space-between",alignSelf:isTextArea?'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,children:label}),trailingHeaderSlot==null?void 0:trailingHeaderSlot(value!=null?value:inputValue)]}),jsx(FocusRingWrapper,{currentInteraction:currentInteraction,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();}},children:[jsx(BaseInputVisuals,{size:size,leadingIcon:leadingIcon,prefix:prefix,isDisabled:isDisabled,leadingInteractionElement:leadingInteractionElement}),jsx(BaseInputTagSlot,{renderAs:as,tags:tags,isDisabled:isDisabled,showAllTags:showAllTagsWithAnimation,setFocusOnInput:function setFocusOnInput(){if(ref&&!isReactNative&&'current'in ref){var _ref$current;(_ref$current=ref.current)==null?void 0:_ref$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: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,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},metaAttribute({name:MetaConstants.StyledBaseInput})))}),jsx(BaseInputVisuals,{trailingInteractionElement:trailingInteractionElement,suffix:suffix,trailingIcon:trailingIcon,isDisabled:isDisabled,validationState:validationState,trailingButton:trailingButton,size:size})]})})]}),!hideFormHint&&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","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"];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(_ref10){var validationState=_ref10.validationState,hasErrorText=_ref10.hasErrorText,hasSuccessText=_ref10.hasSuccessText,hasHelpText=_ref10.hasHelpText,errorTextId=_ref10.errorTextId,successTextId=_ref10.successTextId,helpTextId=_ref10.helpTextId;if(validationState==='error'&&hasErrorText){return errorTextId;}if(validationState==='success'&&hasSuccessText){return successTextId;}if(hasHelpText){return helpTextId;}return '';};var FocusRingWrapper=styled(BaseBox)(function(_ref11){var theme=_ref11.theme,currentInteraction=_ref11.currentInteraction;return {borderRadius:makeBorderSize(theme.border.radius.medium),width:'100%','&:focus-within':Object.assign({},getFocusRingStyles(),{transitionDuration:castWebType(makeMotionTime(getIn(theme.motion.duration,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].duration))),transitionTimingFunction:castWebType(getIn(theme.motion.easing,baseInputBorderBackgroundMotion[currentInteraction==='focus'?'enter':'exit'].easing))})};});var _BaseInput=function _BaseInput(_ref12,ref){var _ref12$as=_ref12.as,as=_ref12$as===void 0?'input':_ref12$as,label=_ref12.label,_ref12$labelPosition=_ref12.labelPosition,labelPosition=_ref12$labelPosition===void 0?'top':_ref12$labelPosition,placeholder=_ref12.placeholder,_ref12$type=_ref12.type,type=_ref12$type===void 0?'text':_ref12$type,defaultValue=_ref12.defaultValue,tags=_ref12.tags,_ref12$showAllTags=_ref12.showAllTags,showAllTags=_ref12$showAllTags===void 0?false:_ref12$showAllTags,_ref12$activeTagIndex=_ref12.activeTagIndex,activeTagIndex=_ref12$activeTagIndex===void 0?-1:_ref12$activeTagIndex,setActiveTagIndex=_ref12.setActiveTagIndex,name=_ref12.name,value=_ref12.value,onFocus=_ref12.onFocus,onChange=_ref12.onChange,onInput=_ref12.onInput,onBlur=_ref12.onBlur,onSubmit=_ref12.onSubmit,onClick=_ref12.onClick,onKeyDown=_ref12.onKeyDown,isDisabled=_ref12.isDisabled,necessityIndicator=_ref12.necessityIndicator,validationState=_ref12.validationState,errorText=_ref12.errorText,helpText=_ref12.helpText,successText=_ref12.successText,isRequired=_ref12.isRequired,leadingIcon=_ref12.leadingIcon,prefix=_ref12.prefix,trailingInteractionElement=_ref12.trailingInteractionElement,leadingInteractionElement=_ref12.leadingInteractionElement,suffix=_ref12.suffix,trailingIcon=_ref12.trailingIcon,maxCharacters=_ref12.maxCharacters,textAlign=_ref12.textAlign,autoFocus=_ref12.autoFocus,keyboardReturnKeyType=_ref12.keyboardReturnKeyType,keyboardType=_ref12.keyboardType,autoCompleteSuggestionType=_ref12.autoCompleteSuggestionType,trailingHeaderSlot=_ref12.trailingHeaderSlot,trailingFooterSlot=_ref12.trailingFooterSlot,numberOfLines=_ref12.numberOfLines,id=_ref12.id,componentName=_ref12.componentName,accessibilityLabel=_ref12.accessibilityLabel,labelId=_ref12.labelId,activeDescendant=_ref12.activeDescendant,hideLabelText=_ref12.hideLabelText,hideFormHint=_ref12.hideFormHint,hasPopup=_ref12.hasPopup,popupId=_ref12.popupId,isPopupExpanded=_ref12.isPopupExpanded,maxTagRows=_ref12.maxTagRows,shouldIgnoreBlurAnimation=_ref12.shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation=_ref12.setShouldIgnoreBlurAnimation,autoCapitalize=_ref12.autoCapitalize,setInputWrapperRef=_ref12.setInputWrapperRef,testID=_ref12.testID,isDropdownTrigger=_ref12.isDropdownTrigger,isLabelInsideInput=_ref12.isLabelInsideInput,_ref12$size=_ref12.size,size=_ref12$size===void 0?'medium':_ref12$size,trailingButton=_ref12.trailingButton,_ref12$valueComponent=_ref12.valueComponentType,valueComponentType=_ref12$valueComponent===void 0?'text':_ref12$valueComponent,styledProps=_objectWithoutProperties(_ref12,_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';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:hasPopup?'combobox':undefined,activeDescendant:activeDescendant});var willRenderHintText=Boolean(helpText)||Boolean(successText)||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';return jsxs(BaseBox,Object.assign({},metaAttribute({name:componentName,testID:testID}),getStyledProps(styledProps),{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&&jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'column':'row',justifyContent:"space-between",alignSelf:isTextArea?'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,children:label}),trailingHeaderSlot==null?void 0:trailingHeaderSlot(value!=null?value:inputValue)]}),jsx(FocusRingWrapper,{currentInteraction:currentInteraction,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();}},children:[jsx(BaseInputVisuals,{size:size,leadingIcon:leadingIcon,prefix:prefix,isDisabled:isDisabled,leadingInteractionElement:leadingInteractionElement}),jsx(BaseInputTagSlot,{renderAs:as,tags:tags,isDisabled:isDisabled,showAllTags:showAllTagsWithAnimation,setFocusOnInput:function setFocusOnInput(){if(ref&&!isReactNative&&'current'in ref){var _ref$current;(_ref$current=ref.current)==null?void 0:_ref$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: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,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},metaAttribute({name:MetaConstants.StyledBaseInput})))}),jsx(BaseInputVisuals,{trailingInteractionElement:trailingInteractionElement,suffix:suffix,trailingIcon:trailingIcon,isDisabled:isDisabled,validationState:validationState,trailingButton:trailingButton,size:size})]})})]}),!hideFormHint&&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