@economic/taco 2.21.1 → 2.21.3

package/dist/esm/packages/taco/src/components/Input/Input.js

@@ -46,22 +46,13 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWit
     'pl-8': !!prefix,
     'pr-8': !!postfix
   }, attributes.className);
-  const typeAttributes = {
-    type
-  };
-  // https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
-  if (type === 'number') {
-    typeAttributes.type = 'text';
-    typeAttributes.inputMode = 'numeric';
-    typeAttributes.pattern = '[0-9]*';
-  }
   return /*#__PURE__*/createElement("div", {
     className: "relative inline-flex w-full",
     "data-taco": "input-container",
     style: {
       opacity: 0.999
     }
-  }, /*#__PURE__*/createElement("input", Object.assign({}, attributes, typeAttributes, {
+  }, /*#__PURE__*/createElement("input", Object.assign({}, attributes, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
@@ -71,7 +62,8 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWit
     style: {
       paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,
       paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined
-    }
+    },
+    type: type
   })), prefix ? /*#__PURE__*/createElement(Affix, {
     type: "prefix",
     children: prefix,

package/dist/esm/packages/taco/src/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isPressingMetaKey } from '../../utils/keyboard';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.includes(type)) {\n            if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n                event.preventDefault();\n                const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n                event.currentTarget.setSelectionRange(position, position);\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    // https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/\n    if (type === 'number') {\n        typeAttributes.type = 'text';\n        typeAttributes.inputMode = 'numeric';\n        typeAttributes.pattern = '[0-9]*';\n    }\n\n    return (\n        <div className=\"relative inline-flex w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                aria-invalid={invalid}\n                data-highlighted={highlighted}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-grey-300': disabled,\n                        'text-grey-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["validSetSelectionRangeTypes","InputWithoutDeprecatedFeatures","React","props","ref","highlighted","invalid","onKeyDown","postfix","prefix","type","attributes","internalRef","useMergedRef","handleKeyDown","event","key","length","isPressingMetaKey","stopPropagation","includes","shiftKey","preventDefault","position","currentTarget","value","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","typeAttributes","inputMode","pattern","style","opacity","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name","_attributes$postfix"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isPressingMetaKey } from '../../utils/keyboard';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.includes(type)) {\n            if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n                event.preventDefault();\n                const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n                event.currentTarget.setSelectionRange(position, position);\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    return (\n        <div className=\"relative inline-flex w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                aria-invalid={invalid}\n                data-highlighted={highlighted}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n                type={type}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-grey-300': disabled,\n                        'text-grey-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["validSetSelectionRangeTypes","InputWithoutDeprecatedFeatures","React","props","ref","highlighted","invalid","onKeyDown","postfix","prefix","type","attributes","internalRef","useMergedRef","handleKeyDown","event","key","length","isPressingMetaKey","stopPropagation","includes","shiftKey","preventDefault","position","currentTarget","value","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","style","opacity","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name","_attributes$postfix"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Input/util.js

@@ -4,7 +4,7 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full [text-align:inherit] text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
+  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
     'bg-white': !props.highlighted && !readOnly,
     // default
     'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,

package/dist/esm/packages/taco/src/components/Input/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'clsx';\n\nexport const getInputClasses = props => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full [text-align:inherit] text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-yellow-100/50': props.highlighted && disabled,\n            'bg-yellow-100': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-700 disabled:border-red-500/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-grey-300 group-peer-hover:enabled:border-grey-500 transition-colors transition-opacity ease-in';\n};\n"],"names":["getInputClasses","props","disabled","readOnly","invalid","cn","highlighted","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,MAAMC,QAAQ,GAAGD,KAAK,CAACC,QAAQ,IAAI,CAAC,CAACD,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ,IAAI,CAAC,CAACF,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAMG,OAAO,GAAGH,KAAK,CAACG,OAAO,IAAI,CAAC,CAACH,KAAK,CAAC,cAAc,CAAC;EAExD,OAAOI,EAAE,CACL,6PAA6P,EAC7P;IACI,UAAU,EAAE,CAACJ,KAAK,CAACK,WAAW,IAAI,CAACH,QAAQ;;IAE3C,wEAAwE,EAAE,CAACC,OAAO;;IAElF,8DAA8D,EAAEF,QAAQ;;IAExE,kBAAkB,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IACjD,eAAe,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE/C,wEAAwE,EAAEE,OAAO;;IAEjF,2CAA2C,EAAED;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAGA,CAACH,OAA4B,EAAEF,QAAQ,GAAG,KAAK;EAChF,IAAIE,OAAO,EAAE;IACT,OAAOC,EAAE,CAAC,yFAAyF,EAAE;MACjG,mBAAmB,EAAEH;KACxB,CAAC;;EAGN,OAAO,8GAA8G;AACzH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'clsx';\n\nexport const getInputClasses = props => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-yellow-100/50': props.highlighted && disabled,\n            'bg-yellow-100': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-700 disabled:border-red-500/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-grey-300 group-peer-hover:enabled:border-grey-500 transition-colors transition-opacity ease-in';\n};\n"],"names":["getInputClasses","props","disabled","readOnly","invalid","cn","highlighted","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,MAAMC,QAAQ,GAAGD,KAAK,CAACC,QAAQ,IAAI,CAAC,CAACD,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ,IAAI,CAAC,CAACF,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAMG,OAAO,GAAGH,KAAK,CAACG,OAAO,IAAI,CAAC,CAACH,KAAK,CAAC,cAAc,CAAC;EAExD,OAAOI,EAAE,CACL,wOAAwO,EACxO;IACI,UAAU,EAAE,CAACJ,KAAK,CAACK,WAAW,IAAI,CAACH,QAAQ;;IAE3C,wEAAwE,EAAE,CAACC,OAAO;;IAElF,8DAA8D,EAAEF,QAAQ;;IAExE,kBAAkB,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IACjD,eAAe,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE/C,wEAAwE,EAAEE,OAAO;;IAEjF,2CAA2C,EAAED;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAGA,CAACH,OAA4B,EAAEF,QAAQ,GAAG,KAAK;EAChF,IAAIE,OAAO,EAAE;IACT,OAAOC,EAAE,CAAC,yFAAyF,EAAE;MACjG,mBAAmB,EAAEH;KACxB,CAAC;;EAGN,OAAO,8GAA8G;AACzH;;;;"}

package/dist/taco.cjs.development.js

@@ -4882,7 +4882,7 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full [text-align:inherit] text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
+  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
     'bg-white': !props.highlighted && !readOnly,
     // default
     'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,
@@ -4992,22 +4992,13 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
     'pl-8': !!prefix,
     'pr-8': !!postfix
   }, attributes.className);
-  const typeAttributes = {
-    type
-  };
-  // https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
-  if (type === 'number') {
-    typeAttributes.type = 'text';
-    typeAttributes.inputMode = 'numeric';
-    typeAttributes.pattern = '[0-9]*';
-  }
   return /*#__PURE__*/React.createElement("div", {
     className: "relative inline-flex w-full",
     "data-taco": "input-container",
     style: {
       opacity: 0.999
     }
-  }, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, typeAttributes, {
+  }, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
@@ -5017,7 +5008,8 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
     style: {
       paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,
       paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined
-    }
+    },
+    type: type
   })), prefix ? /*#__PURE__*/React.createElement(Affix, {
     type: "prefix",
     children: prefix,