@economic/taco 0.0.1-alpha.6 → 0.0.1-alpha.8

package/dist/esm/_virtual/tailwindcss-aria-attributes.js_commonjs-proxy

@@ -1,7 +1,6 @@
 import * as tailwindcssAriaAttributes from '../plugins/tailwindcss-aria-attributes.js';
-import { getCjsExportFromNamespace } from './_commonjsHelpers.js';
 
-var require$$0 = getCjsExportFromNamespace(tailwindcssAriaAttributes);
 
-export default require$$0;
+
+export default tailwindcssAriaAttributes;
 //# sourceMappingURL=tailwindcss-aria-attributes.js_commonjs-proxy.map

package/dist/esm/_virtual/tailwindcss-aria-attributes.js_commonjs-proxy.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindcss-aria-attributes.js_commonjs-proxy","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"tailwindcss-aria-attributes.js_commonjs-proxy","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/src/components/Dialog/components/Drawer.js

@@ -7,7 +7,8 @@ var Drawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
 
   var dialog = useCurrentDialog();
   return createElement(motion.div, Object.assign({}, props, {
-    className: "bg-white absolute top-0 h-full w-full hidden text-left p-6 overflow-y-auto rounded-r -ml-[4px] z-[998]",
+    className: "absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left",
+    "data-taco": "dialog-drawer",
     "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
     variants: {
       visible: {

package/dist/esm/src/components/Dialog/components/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport { useCurrentDialog } from '../Context';\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n>;\n\nexport const Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n\n    return (\n        <motion.div\n            {...props}\n            className=\"bg-white absolute top-0 h-full w-full hidden text-left p-6 overflow-y-auto rounded-r -ml-[4px] z-[998]\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}\n        />\n    );\n});\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","motion","div","className","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate"],"mappings":";;;;IASaA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;AACnC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AAEA,SACIL,aAAA,CAACM,MAAM,CAACC,GAAR,oBACQL;AACJM,IAAAA,SAAS,EAAC;mBACG,oBAACJ,MAAM,CAACK,MAAR,2CAAC,eAAeC,IAAhB;AACbC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,OAAO,EAAE;AACLC,QAAAA,IAAI,EAAE,MADD;AAELC,QAAAA,OAAO,EAAE,OAFJ;AAGLC,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B;AAHP,OADH;AAMNC,MAAAA,MAAM,EAAE;AACJL,QAAAA,IAAI,EAAE,IADF;AAEJE,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B,SAFR;AAGJE,QAAAA,aAAa,EAAE;AACXL,UAAAA,OAAO,EAAE;AADE;AAHX;AANF;AAcVM,IAAAA,OAAO,EAAE,mBAAAhB,MAAM,CAACK,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;AAC3CP,IAAAA,GAAG,EAAEA;IAnBT,CADJ;AAuBH,CA1BqB;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport { useCurrentDialog } from '../Context';\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n>;\n\nexport const Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n\n    return (\n        <motion.div\n            {...props}\n            className=\"absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left\"\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}\n        />\n    );\n});\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","motion","div","className","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate"],"mappings":";;;;IASaA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;AACnC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AAEA,SACIL,aAAA,CAACM,MAAM,CAACC,GAAR,oBACQL;AACJM,IAAAA,SAAS,EAAC;iBACA;mBACG,oBAACJ,MAAM,CAACK,MAAR,2CAAC,eAAeC,IAAhB;AACbC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,OAAO,EAAE;AACLC,QAAAA,IAAI,EAAE,MADD;AAELC,QAAAA,OAAO,EAAE,OAFJ;AAGLC,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B;AAHP,OADH;AAMNC,MAAAA,MAAM,EAAE;AACJL,QAAAA,IAAI,EAAE,IADF;AAEJE,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B,SAFR;AAGJE,QAAAA,aAAa,EAAE;AACXL,UAAAA,OAAO,EAAE;AADE;AAHX;AANF;AAcVM,IAAAA,OAAO,EAAE,mBAAAhB,MAAM,CAACK,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;AAC3CP,IAAAA,GAAG,EAAEA;IApBT,CADJ;AAwBH,CA3BqB;;;;"}

package/dist/esm/src/components/Dialog/components/Extra.js

@@ -2,7 +2,8 @@ import { forwardRef, createElement } from 'react';
 
 var Extra = /*#__PURE__*/forwardRef(function (props, ref) {
   return createElement("div", Object.assign({}, props, {
-    className: "bg-grey-light rounded-t-none rounded-b absolute top-full w-full text-left p-6 left-0 -mt-px yt-shadow-inset",
+    className: "bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left",
+    "data-taco": "dialog-extra",
     ref: ref
   }));
 });

package/dist/esm/src/components/Dialog/components/Extra.js.map

@@ -1 +1 @@
-{"version":3,"file":"Extra.js","sources":["../../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Extra = React.forwardRef(function (props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div\n            {...props}\n            className=\"bg-grey-light rounded-t-none rounded-b absolute top-full w-full text-left p-6 left-0 -mt-px yt-shadow-inset\"\n            ref={ref}\n        />\n    );\n});\n"],"names":["Extra","React","props","ref","className"],"mappings":";;IAIaA,KAAK,gBAAGC,UAAA,CAAiB,UAAUC,KAAV,EAAmCC,GAAnC;AAClC,SACIF,aAAA,MAAA,oBACQC;AACJE,IAAAA,SAAS,EAAC;AACVD,IAAAA,GAAG,EAAEA;IAHT,CADJ;AAOH,CARoB;;;;"}
+{"version":3,"file":"Extra.js","sources":["../../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Extra = React.forwardRef(function (props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div\n            {...props}\n            className=\"bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left\"\n            data-taco=\"dialog-extra\"\n            ref={ref}\n        />\n    );\n});\n"],"names":["Extra","React","props","ref","className"],"mappings":";;IAIaA,KAAK,gBAAGC,UAAA,CAAiB,UAAUC,KAAV,EAAmCC,GAAnC;AAClC,SACIF,aAAA,MAAA,oBACQC;AACJE,IAAAA,SAAS,EAAC;iBACA;AACVD,IAAAA,GAAG,EAAEA;IAJT,CADJ;AAQH,CAToB;;;;"}

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 var getInputClasses = function getInputClasses(props) {
   var _cn;
 
-  return cn('bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
     'border-grey text-opacity-25 cursor-not-allowed': props.disabled
   }, _cn[getStateClasses(props.state)] = !props.disabled, _cn['bg-[rgba(255,255,0,0.075)]'] = props.highlighted && props.disabled, _cn['bg-[rgba(255,255,0,0.2)]'] = props.highlighted && !props.disabled, _cn));
@@ -29,19 +29,19 @@ var getStateClasses = function getStateClasses(value) {
 var getButtonStateClasses = function getButtonStateClasses(value) {
   switch (value) {
     case 'success':
-      return 'border-green focus:border-green-light focus:yt-focus-green peer-focus:border-green-light peer-focus:peer-active:border-green-dark';
+      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
 
     case 'error':
-      return 'border-red focus:border-red-light focus:yt-focus-red peer-focus:border-red-light peer-focus:peer-active:border-red-dark';
+      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
 
     case 'warning':
-      return 'border-yellow-dark focus:border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:border-yellow-dark';
+      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
 
     case 'information':
-      return 'border-blue focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
+      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 
     default:
-      return 'border-grey-dark focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
+      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
   }
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\nimport { State } from '../../types';\n\nexport const getInputClasses = props => {\n    return cn(\n        'bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            [getStateClasses(props.state)]: !props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n        }\n    );\n};\n\nexport const getStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';\n\n        case 'error':\n            return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n    }\n};\n\nexport const getButtonStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green focus:border-green-light focus:yt-focus-green peer-focus:border-green-light peer-focus:peer-active:border-green-dark';\n\n        case 'error':\n            return 'border-red focus:border-red-light focus:yt-focus-red peer-focus:border-red-light peer-focus:peer-active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark focus:border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';\n    }\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","getStateClasses","state","highlighted","value","getButtonStateClasses"],"mappings":";;IAGaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;;;AAChC,SAAOC,EAAE,CACL,4LADK;AAGD,6CAAyCD,KAAK,CAACE,QAH9C;AAID,sDAAkDF,KAAK,CAACG;AAJvD,SAKAC,eAAe,CAACJ,KAAK,CAACK,KAAP,CALf,IAK+B,CAACL,KAAK,CAACG,QALtC,MAMD,4BANC,IAM6BH,KAAK,CAACM,WAAN,IAAqBN,KAAK,CAACG,QANxD,MAOD,0BAPC,IAO2BH,KAAK,CAACM,WAAN,IAAqB,CAACN,KAAK,CAACG,QAPvD,OAAT;AAUH;IAEYC,eAAe,GAAG,SAAlBA,eAAkB,CAACG,KAAD;AAC3B,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,4IAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,kIAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,+HAAP;;AAEJ;AACI,aAAO,qIAAP;AAdR;AAgBH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,KAAD;AACjC,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,mIAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,6GAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,0GAAP;;AAEJ;AACI,aAAO,+GAAP;AAdR;AAgBH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\nimport { State } from '../../types';\n\nexport const getInputClasses = props => {\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            [getStateClasses(props.state)]: !props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n        }\n    );\n};\n\nexport const getStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';\n\n        case 'error':\n            return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n    }\n};\n\nexport const getButtonStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';\n\n        case 'error':\n            return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n\n        case 'warning':\n            return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';\n\n        case 'information':\n            return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n\n        default:\n            return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n    }\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","getStateClasses","state","highlighted","value","getButtonStateClasses"],"mappings":";;IAGaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;;;AAChC,SAAOC,EAAE,CACL,iMADK;AAGD,6CAAyCD,KAAK,CAACE,QAH9C;AAID,sDAAkDF,KAAK,CAACG;AAJvD,SAKAC,eAAe,CAACJ,KAAK,CAACK,KAAP,CALf,IAK+B,CAACL,KAAK,CAACG,QALtC,MAMD,4BANC,IAM6BH,KAAK,CAACM,WAAN,IAAqBN,KAAK,CAACG,QANxD,MAOD,0BAPC,IAO2BH,KAAK,CAACM,WAAN,IAAqB,CAACN,KAAK,CAACG,QAPvD,OAAT;AAUH;IAEYC,eAAe,GAAG,SAAlBA,eAAkB,CAACG,KAAD;AAC3B,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,4IAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,kIAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,+HAAP;;AAEJ;AACI,aAAO,qIAAP;AAdR;AAgBH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,KAAD;AACjC,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,uIAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,6HAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,gHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,8GAAP;;AAEJ;AACI,aAAO,mHAAP;AAdR;AAgBH;;;;"}

package/dist/esm/src/components/Navigation/Navigation.js

@@ -122,6 +122,7 @@ var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(prop
   var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "navigation",
     ref: ref
   }), children);
 });

package/dist/esm/src/components/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport './Navigation.css';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: any[] = [];\n\n        React.Children.toArray(props.children)\n            .filter(child => !!child)\n            .map((child: React.ReactElement<NavigationMenuGroupProps>) => {\n                if (child.props.fixed) {\n                    scrollableAreas.push(child);\n                } else {\n                    const x = scrollableAreas[scrollableAreas.length - 1];\n                    if (Array.isArray(x)) {\n                        x.push(child);\n                    } else {\n                        scrollableAreas.push([child]);\n                    }\n                }\n            });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}\n        >\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}\n                    >\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\n\n    return (\n        <div {...otherProps} className={className} ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","useDropTarget","isDraggedOver","dropTargetProps","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","map","push","x","length","Array","isArray","area","i","key","Navigation"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport './Navigation.css';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: any[] = [];\n\n        React.Children.toArray(props.children)\n            .filter(child => !!child)\n            .map((child: React.ReactElement<NavigationMenuGroupProps>) => {\n                if (child.props.fixed) {\n                    scrollableAreas.push(child);\n                } else {\n                    const x = scrollableAreas[scrollableAreas.length - 1];\n                    if (Array.isArray(x)) {\n                        x.push(child);\n                    } else {\n                        scrollableAreas.push([child]);\n                    }\n                }\n            });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}\n        >\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}\n                    >\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","useDropTarget","isDraggedOver","dropTargetProps","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","map","push","x","length","Array","isArray","area","i","key","Navigation"],"mappings":"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"}

package/dist/taco.cjs.development.js

@@ -4152,7 +4152,8 @@ var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
 
   var dialog = useCurrentDialog();
   return React.createElement(framerMotion.motion.div, Object.assign({}, props, {
-    className: "bg-white absolute top-0 h-full w-full hidden text-left p-6 overflow-y-auto rounded-r -ml-[4px] z-[998]",
+    className: "absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left",
+    "data-taco": "dialog-drawer",
     "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
     variants: {
       visible: {
@@ -4181,7 +4182,8 @@ var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
 
 var Extra = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return React.createElement("div", Object.assign({}, props, {
-    className: "bg-grey-light rounded-t-none rounded-b absolute top-full w-full text-left p-6 left-0 -mt-px yt-shadow-inset",
+    className: "bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left",
+    "data-taco": "dialog-extra",
     ref: ref
   }));
 });
@@ -4660,7 +4662,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
 var getInputClasses = function getInputClasses(props) {
   var _cn;
 
-  return cn('bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
     'border-grey text-opacity-25 cursor-not-allowed': props.disabled
   }, _cn[getStateClasses$1(props.state)] = !props.disabled, _cn['bg-[rgba(255,255,0,0.075)]'] = props.highlighted && props.disabled, _cn['bg-[rgba(255,255,0,0.2)]'] = props.highlighted && !props.disabled, _cn));
@@ -4686,19 +4688,19 @@ var getStateClasses$1 = function getStateClasses(value) {
 var getButtonStateClasses = function getButtonStateClasses(value) {
   switch (value) {
     case 'success':
-      return 'border-green focus:border-green-light focus:yt-focus-green peer-focus:border-green-light peer-focus:peer-active:border-green-dark';
+      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
 
     case 'error':
-      return 'border-red focus:border-red-light focus:yt-focus-red peer-focus:border-red-light peer-focus:peer-active:border-red-dark';
+      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
 
     case 'warning':
-      return 'border-yellow-dark focus:border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:border-yellow-dark';
+      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
 
     case 'information':
-      return 'border-blue focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
+      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 
     default:
-      return 'border-grey-dark focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
+      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
   }
 };
 
@@ -7064,6 +7066,7 @@ var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(prop
   var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "navigation",
     ref: ref
   }), children);
 });
@@ -9426,6 +9429,12 @@ var tailwindcssAriaAttributes = {
     __proto__: null
 };
 
+function getCjsExportFromNamespace (n) {
+	return n && n['default'] || n;
+}
+
+var require$$0 = getCjsExportFromNamespace(tailwindcssAriaAttributes);
+
 var tailwind_config = {
   theme: {
     colors: {
@@ -9501,7 +9510,7 @@ var tailwind_config = {
       }
     }
   },
-  plugins: [/*#__PURE__*/tailwindcssAriaAttributes, /*#__PURE__*/plugin(function (_ref) {
+  plugins: [/*#__PURE__*/require$$0, /*#__PURE__*/plugin(function (_ref) {
     var addUtilities = _ref.addUtilities,
         theme = _ref.theme;
     // ideally we would do this using the @layer utilities directive, but