@economic/taco 1.17.0 → 1.17.2

package/dist/esm/index.css

@@ -513,7 +513,7 @@
 
 /* rows */
 .yt-table__row {
-    @apply border-grey-100 flex border-b;
+    @apply border-grey-200 flex border-b;
     min-height: 2.5rem;
 }
 
@@ -545,12 +545,12 @@
 }
 
 .yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
-    @apply border-grey-100 border-b;
+    @apply border-grey-200 border-b;
     flex-basis: 100%;
 }
 
 .yt-table__head .yt-table__head__group + .yt-table__head__group {
-    @apply border-grey-100 border-l;
+    @apply border-grey-200 border-l;
 }
 
 .yt-table__head .yt-table__cell > [data-taco='icon'] {
@@ -558,7 +558,7 @@
 }
 
 .yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
-    @apply border-grey-100 border-l-2;
+    @apply border-grey-200 border-l-2;
 }
 
 .yt-table.yt-table--windowed.table-with-scrollbar .yt-table__head {

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

@@ -1,4 +1,4 @@
-import { forwardRef, createElement, useRef, memo, isValidElement, cloneElement } from 'react';
+import { forwardRef, createElement, useRef, memo, cloneElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { getButtonStateClasses, getInputClasses } from './util.js';
@@ -43,7 +43,11 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWit
     'pr-8': !!postfix
   }, attributes.className);
   return /*#__PURE__*/createElement("div", {
-    className: "relative inline-flex"
+    className: "relative inline-flex w-full",
+    "data-taco": "input-container",
+    style: {
+      opacity: 0.999
+    }
   }, /*#__PURE__*/createElement("input", Object.assign({}, attributes, {
     className: className,
     "data-taco": "input",
@@ -72,30 +76,18 @@ const Affix = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Affix(props, r
     disabled,
     type
   } = props;
-  let displayName;
   if (children) {
-    let el = children;
-    if ( /*#__PURE__*/isValidElement(children)) {
-      var _children$type;
-      displayName = children === null || children === void 0 ? void 0 : (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName;
-      if (displayName === 'Icon') {
-        el = /*#__PURE__*/cloneElement(children, {
-          className: cn('!h-5 !w-5', children.props.className)
-        });
-      }
-    }
-    return /*#__PURE__*/createElement("span", {
-      className: cn('group absolute top-0 flex h-full items-center justify-center', {
+    return /*#__PURE__*/createElement("div", {
+      className: cn('group absolute top-0 flex h-full items-center justify-center px-2',
+      // icon
+      '[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5', {
         'text-grey-300': disabled,
         'text-grey-700': !disabled,
-        'left-0': type === 'prefix',
-        'right-0': type === 'postfix',
-        'px-0': displayName === 'IconButton',
-        'px-1.5': displayName === 'Icon',
-        'px-2': displayName !== 'IconButton' && displayName !== 'Icon'
+        'left-0 [&>button]:!-ml-2': type === 'prefix',
+        'right-0 [&>button]:!-mr-2': type === 'postfix'
       }),
       ref: ref
-    }, el);
+    }, children);
   }
   return null;
 }));
@@ -109,9 +101,7 @@ const Input = /*#__PURE__*/forwardRef(function LegacyInput(props, ref) {
   let postfix;
   if (button) {
     const disabled = button.props.disabled || attributes.disabled;
-    const buttonClassName = cn('items-center focus:z-10 flex justify-center border rounded-l-none rounded-r h-full focus:rounded focus:outline-none', {
-      [getButtonStateClasses(attributes.invalid)]: !props.disabled
-    }, button.props.className);
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid), button.props.className);
     postfix = /*#__PURE__*/cloneElement(button, {
       className: buttonClassName,
       disabled

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 'classnames';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\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    let handleKeyDown = onKeyDown;\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        handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\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            if (typeof onKeyDown === 'function') {\n                onKeyDown(event);\n            }\n        };\n    }\n\n    const prefixRef = React.useRef<HTMLSpanElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLSpanElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef);\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\">\n            <input\n                {...attributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\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<HTMLSpanElement>) {\n        const { children, disabled, type } = props;\n\n        let displayName: string | undefined;\n\n        if (children) {\n            let el = children;\n\n            if (React.isValidElement<IconProps>(children)) {\n                displayName = (children?.type as React.FunctionComponent)?.displayName;\n\n                if (displayName === 'Icon') {\n                    el = React.cloneElement(children, {\n                        className: cn('!h-5 !w-5', children.props.className),\n                    } as any);\n                }\n            }\n\n            return (\n                <span\n                    className={cn('group absolute top-0 flex h-full items-center justify-center', {\n                        'text-grey-300': disabled,\n                        'text-grey-700': !disabled,\n                        'left-0': type === 'prefix',\n                        'right-0': type === 'postfix',\n                        'px-0': displayName === 'IconButton',\n                        'px-1.5': displayName === 'Icon',\n                        'px-2': displayName !== 'IconButton' && displayName !== 'Icon',\n                    })}\n                    ref={ref}>\n                    {el}\n                </span>\n            );\n        }\n\n        return null;\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 border rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            {\n                [getButtonStateClasses(attributes.invalid)]: !props.disabled,\n            },\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","includes","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","style","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","displayName","el","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name"],"mappings":";;;;;;;AAgBA,MAAMA,2BAA2B,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC;AAEhF,MAAMC,8BAA8B,gBAAGC,UAAgB,CAAC,SAASD,8BAA8B,CAC3FE,KAA0C,EAC1CC,GAAgC;EAEhC,MAAM;IAAEC,WAAW;IAAEC,OAAO;IAAEC,SAAS;IAAEC,OAAO;IAAEC,MAAM;IAAEC,IAAI,GAAG,MAAM;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAChG,MAAMS,WAAW,GAAGC,YAAY,CAAmBT,GAAG,CAAC;EAEvD,IAAIU,aAAa,GAAGP,SAAS;;;;;EAM7B,IAAIP,2BAA2B,CAACe,QAAQ,CAACL,IAAI,CAAC,EAAE;IAC5CI,aAAa,GAAIE,KAA4C;MACzD,IAAI,CAACA,KAAK,CAACC,QAAQ,KAAKD,KAAK,CAACE,GAAG,KAAK,MAAM,IAAIF,KAAK,CAACE,GAAG,KAAK,KAAK,CAAC,EAAE;QAClEF,KAAK,CAACG,cAAc,EAAE;QACtB,MAAMC,QAAQ,GAAGJ,KAAK,CAACE,GAAG,KAAK,KAAK,GAAGF,KAAK,CAACK,aAAa,CAACC,KAAK,CAACC,MAAM,GAAG,CAAC;QAC3EP,KAAK,CAACK,aAAa,CAACG,iBAAiB,CAACJ,QAAQ,EAAEA,QAAQ,CAAC;;MAG7D,IAAI,OAAOb,SAAS,KAAK,UAAU,EAAE;QACjCA,SAAS,CAACS,KAAK,CAAC;;KAEvB;;EAGL,MAAMS,SAAS,GAAGvB,MAAY,CAAkB,IAAI,CAAC;EACrD,MAAMwB,UAAU,GAAGC,6BAA6B,CAACF,SAAS,CAAC;EAC3D,MAAMG,UAAU,GAAG1B,MAAY,CAAkB,IAAI,CAAC;EACtD,MAAM2B,WAAW,GAAGF,6BAA6B,CAACC,UAAU,CAAC;EAE7D,MAAME,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAAC7B,KAAK,CAAC,EACtB;IACI,MAAM,EAAE,CAAC,CAACM,MAAM;IAChB,MAAM,EAAE,CAAC,CAACD;GACb,EACDG,UAAU,CAACmB,SAAS,CACvB;EAED,oBACI5B;IAAK4B,SAAS,EAAC;kBACX5B,yCACQS,UAAU;IACdmB,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBvB,SAAS,EAAEO,aAAa;IACxBV,GAAG,EAAEQ,WAAW;IAChBqB,KAAK,EAAE;MACHC,WAAW,EAAER,UAAU,MAAMA,UAAU,CAACS,KAAK,GAAG,KAAK,GAAGC,SAAS;MACjEC,YAAY,EAAER,WAAW,MAAMA,WAAW,CAACM,KAAK,GAAG,KAAK,GAAGC;KAC9D;IACD1B,IAAI,EAAEA;KACR,EACDD,MAAM,gBAAGP,cAACoC,KAAK;IAAC5B,IAAI,EAAC,QAAQ;IAAC6B,QAAQ,EAAE9B,MAAM;IAAE+B,QAAQ,EAAE7B,UAAU,CAAC6B,QAAQ;IAAEpC,GAAG,EAAEqB;IAAa,GAAG,IAAI,EACxGjB,OAAO,gBAAGN,cAACoC,KAAK;IAAC5B,IAAI,EAAC,SAAS;IAAC6B,QAAQ,EAAE/B,OAAO;IAAEgC,QAAQ,EAAE7B,UAAU,CAAC6B,QAAQ;IAAEpC,GAAG,EAAEwB;IAAc,GAAG,IAAI,CAC3G;AAEd,CAAC,CAAC;AAOF,MAAMU,KAAK,gBAAGpC,IAAU,eACpBA,UAAgB,CAAC,SAASoC,KAAK,CAACnC,KAAiB,EAAEC,GAA+B;EAC9E,MAAM;IAAEmC,QAAQ;IAAEC,QAAQ;IAAE9B;GAAM,GAAGP,KAAK;EAE1C,IAAIsC,WAA+B;EAEnC,IAAIF,QAAQ,EAAE;IACV,IAAIG,EAAE,GAAGH,QAAQ;IAEjB,kBAAIrC,cAAoB,CAAYqC,QAAQ,CAAC,EAAE;MAAA;MAC3CE,WAAW,GAAIF,QAAQ,aAARA,QAAQ,yCAARA,QAAQ,CAAE7B,IAAgC,mDAA1C,eAA4C+B,WAAW;MAEtE,IAAIA,WAAW,KAAK,MAAM,EAAE;QACxBC,EAAE,gBAAGxC,YAAkB,CAACqC,QAAQ,EAAE;UAC9BT,SAAS,EAAEC,EAAE,CAAC,WAAW,EAAEQ,QAAQ,CAACpC,KAAK,CAAC2B,SAAS;SAC/C,CAAC;;;IAIjB,oBACI5B;MACI4B,SAAS,EAAEC,EAAE,CAAC,8DAA8D,EAAE;QAC1E,eAAe,EAAES,QAAQ;QACzB,eAAe,EAAE,CAACA,QAAQ;QAC1B,QAAQ,EAAE9B,IAAI,KAAK,QAAQ;QAC3B,SAAS,EAAEA,IAAI,KAAK,SAAS;QAC7B,MAAM,EAAE+B,WAAW,KAAK,YAAY;QACpC,QAAQ,EAAEA,WAAW,KAAK,MAAM;QAChC,MAAM,EAAEA,WAAW,KAAK,YAAY,IAAIA,WAAW,KAAK;OAC3D,CAAC;MACFrC,GAAG,EAAEA;OACJsC,EAAE,CACA;;EAIf,OAAO,IAAI;AACf,CAAC,CAAC,CACL;MASYC,KAAK,gBAAGzC,UAAgB,CAAC,SAAS0C,WAAW,CAACzC,KAAiB,EAAEC,GAAgC;;EAC1G,MAAM;IAAEyC,MAAM;IAAEC,IAAI;IAAE,GAAGnC;GAAY,GAAGR,KAAK;EAE7C,IAAIK,OAAO;EAEX,IAAIqC,MAAM,EAAE;IACR,MAAML,QAAQ,GAAGK,MAAM,CAAC1C,KAAK,CAACqC,QAAQ,IAAI7B,UAAU,CAAC6B,QAAQ;IAC7D,MAAMO,eAAe,GAAGhB,EAAE,CACtB,qHAAqH,EACrH;MACI,CAACiB,qBAAqB,CAACrC,UAAU,CAACL,OAAO,CAAC,GAAG,CAACH,KAAK,CAACqC;KACvD,EACDK,MAAM,CAAC1C,KAAK,CAAC2B,SAAS,CACzB;IACDtB,OAAO,gBAAGN,YAAkB,CAAC2C,MAAM,EAAE;MACjCf,SAAS,EAAEiB,eAAe;MAC1BP;KACH,CAAC;GACL,MAAM,IAAIM,IAAI,EAAE;IACbtC,OAAO,GAAG,OAAOsC,IAAI,KAAK,QAAQ,gBAAG5C,cAAC+C,IAAI;MAACC,IAAI,EAAEJ;MAAQ,GAAGA,IAAI;;EAGpE,oBAAO5C,cAACD,8BAA8B,oBAAKU,UAAU;IAAEH,OAAO,yBAAEG,UAAU,CAACH,OAAO,qEAAIA,OAAO;IAAEJ,GAAG,EAAEA;KAAO;AAC/G,CAAC;;;;"}
+{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\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    let handleKeyDown = onKeyDown;\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        handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\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            if (typeof onKeyDown === 'function') {\n                onKeyDown(event);\n            }\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);\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                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        if (children) {\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                    ref={ref}>\n                    {children}\n                </div>\n            );\n        }\n\n        return null;\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),\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","includes","event","shiftKey","key","preventDefault","position","currentTarget","value","length","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"],"mappings":"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"}

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

@@ -22,9 +22,9 @@ const getInputClasses = props => {
 };
 const getButtonStateClasses = invalid => {
   if (invalid) {
-    return '!border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
+    return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
   }
-  return 'border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
+  return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
 };
 
 export { getButtonStateClasses, getInputClasses };

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 'classnames';\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 bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]',\n        {\n            // default\n            'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,\n            'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,\n            // disabled\n            'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,\n            // invalid\n            'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,\n            'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return '!border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';\n    }\n\n    return 'border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 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,iOAAiO,EACjO;;IAEI,sDAAsD,EAAE,CAACD,OAAO;IAChE,yEAAyE,EAAE,CAACA,OAAO,IAAI,CAACF,QAAQ;;IAEhG,8EAA8E,EAAEA,QAAQ;;IAExF,4BAA4B,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IAC3D,0BAA0B,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE1D,0EAA0E,EAAEE,OAAO;IACnF,kDAAkD,EAAEA,OAAO,IAAI,CAACF,QAAQ;;IAExE,2CAA2C,EAAEC;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAIH,OAA4B;EAC9D,IAAIA,OAAO,EAAE;IACT,OAAO,wIAAwI;;EAGnJ,OAAO,2KAA2K;AACtL;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\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 bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]',\n        {\n            // default\n            'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,\n            'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,\n            // disabled\n            'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,\n            // invalid\n            'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,\n            'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';\n    }\n\n    return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 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,iOAAiO,EACjO;;IAEI,sDAAsD,EAAE,CAACD,OAAO;IAChE,yEAAyE,EAAE,CAACA,OAAO,IAAI,CAACF,QAAQ;;IAEhG,8EAA8E,EAAEA,QAAQ;;IAExF,4BAA4B,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IAC3D,0BAA0B,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE1D,0EAA0E,EAAEE,OAAO;IACnF,kDAAkD,EAAEA,OAAO,IAAI,CAACF,QAAQ;;IAExE,2CAA2C,EAAEC;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAIH,OAA4B;EAC9D,IAAIA,OAAO,EAAE;IACT,OAAO,+IAA+I;;EAG1J,OAAO,kLAAkL;AAC7L;;;;"}

package/dist/index.css

@@ -513,7 +513,7 @@
 
 /* rows */
 .yt-table__row {
-    @apply border-grey-100 flex border-b;
+    @apply border-grey-200 flex border-b;
     min-height: 2.5rem;
 }
 
@@ -545,12 +545,12 @@
 }
 
 .yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
-    @apply border-grey-100 border-b;
+    @apply border-grey-200 border-b;
     flex-basis: 100%;
 }
 
 .yt-table__head .yt-table__head__group + .yt-table__head__group {
-    @apply border-grey-100 border-l;
+    @apply border-grey-200 border-l;
 }
 
 .yt-table__head .yt-table__cell > [data-taco='icon'] {
@@ -558,7 +558,7 @@
 }
 
 .yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
-    @apply border-grey-100 border-l-2;
+    @apply border-grey-200 border-l-2;
 }
 
 .yt-table.yt-table--windowed.table-with-scrollbar .yt-table__head {

package/dist/taco.cjs.development.js

@@ -3904,9 +3904,9 @@ const getInputClasses = props => {
 };
 const getButtonStateClasses = invalid => {
   if (invalid) {
-    return '!border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
+    return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
   }
-  return 'border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
+  return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
 };
 
 const debounce = (fn, delay) => {
@@ -4008,7 +4008,11 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
     'pr-8': !!postfix
   }, attributes.className);
   return /*#__PURE__*/React.createElement("div", {
-    className: "relative inline-flex"
+    className: "relative inline-flex w-full",
+    "data-taco": "input-container",
+    style: {
+      opacity: 0.999
+    }
   }, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, {
     className: className,
     "data-taco": "input",
@@ -4037,30 +4041,18 @@ const Affix = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Af
     disabled,
     type
   } = props;
-  let displayName;
   if (children) {
-    let el = children;
-    if ( /*#__PURE__*/React.isValidElement(children)) {
-      var _children$type;
-      displayName = children === null || children === void 0 ? void 0 : (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName;
-      if (displayName === 'Icon') {
-        el = /*#__PURE__*/React.cloneElement(children, {
-          className: cn('!h-5 !w-5', children.props.className)
-        });
-      }
-    }
-    return /*#__PURE__*/React.createElement("span", {
-      className: cn('group absolute top-0 flex h-full items-center justify-center', {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('group absolute top-0 flex h-full items-center justify-center px-2',
+      // icon
+      '[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5', {
         'text-grey-300': disabled,
         'text-grey-700': !disabled,
-        'left-0': type === 'prefix',
-        'right-0': type === 'postfix',
-        'px-0': displayName === 'IconButton',
-        'px-1.5': displayName === 'Icon',
-        'px-2': displayName !== 'IconButton' && displayName !== 'Icon'
+        'left-0 [&>button]:!-ml-2': type === 'prefix',
+        'right-0 [&>button]:!-mr-2': type === 'postfix'
       }),
       ref: ref
-    }, el);
+    }, children);
   }
   return null;
 }));
@@ -4074,9 +4066,7 @@ const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
   let postfix;
   if (button) {
     const disabled = button.props.disabled || attributes.disabled;
-    const buttonClassName = cn('items-center focus:z-10 flex justify-center border rounded-l-none rounded-r h-full focus:rounded focus:outline-none', {
-      [getButtonStateClasses(attributes.invalid)]: !props.disabled
-    }, button.props.className);
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid), button.props.className);
     postfix = /*#__PURE__*/React.cloneElement(button, {
       className: buttonClassName,
       disabled