@economic/taco 1.16.2 → 1.17.0

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

@@ -21,10 +21,10 @@ const Toast = ({
     type = 'default'
   } = options;
   const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {
-    'border border-grey': type === 'default' || type === 'loading' || !type,
-    'border border-grey-darker': type === 'success',
-    'border border-blue': type === 'information',
-    'border border-yellow-dark': type === 'warning',
+    'border border-grey-200': type === 'default' || type === 'loading' || !type,
+    'border border-grey-500': type === 'success',
+    'border border-blue-500': type === 'information',
+    'border border-yellow-700': type === 'warning',
     'border border-red': type === 'error'
   });
   const timer = useTimer(autoClose, handleClose);
@@ -68,7 +68,7 @@ const Toast = ({
     className: "flex-grow"
   }, content), /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
-    className: "text-grey-darkest -mr-2 cursor-pointer self-start !px-0",
+    className: "text-grey-700 -mr-2 cursor-pointer self-start !px-0",
     icon: "close",
     "aria-label": texts.toasts.dismiss,
     onClick: handleClose

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { motion, useAnimation } from 'framer-motion';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { getBadgeIcon } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {\n        'border border-grey': type === 'default' || type === 'loading' || !type,\n        'border border-grey-darker': type === 'success',\n        'border border-blue': type === 'information',\n        'border border-yellow-dark': type === 'warning',\n        'border border-red': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        console.warn(\n            `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n                content === '' ? 'empty string' : content\n            }.`\n        );\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"text-grey-darkest -mr-2 cursor-pointer self-start !px-0\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["Toast","content","lastUpdated","onClose","handleClose","options","props","texts","useLocalization","autoClose","type","className","cn","timer","useTimer","controls","useAnimation","console","warn","React","useEffect","start","triggerUpdateAnimation","scale","running","motion","div","animate","onMouseEnter","pause","onMouseLeave","resume","getBadgeIcon","IconButton","appearance","icon","toasts","dismiss","onClick"],"mappings":";;;;;;;;MA4CaA,KAAK,GAAG,CAAC;EAAEC,OAAO;EAAEC,WAAW;EAAEC,OAAO,EAAEC,WAAW;EAAEC,OAAO;EAAE,GAAGC;CAAmB;EAC/F,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM;IAAEC,SAAS;IAAEC,IAAI,GAAG;GAAW,GAAGL,OAAO;EAC/C,MAAMM,SAAS,GAAGC,EAAE,CAAC,6EAA6E,EAAE;IAChG,oBAAoB,EAAEF,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,SAAS,IAAI,CAACA,IAAI;IACvE,2BAA2B,EAAEA,IAAI,KAAK,SAAS;IAC/C,oBAAoB,EAAEA,IAAI,KAAK,aAAa;IAC5C,2BAA2B,EAAEA,IAAI,KAAK,SAAS;IAC/C,mBAAmB,EAAEA,IAAI,KAAK;GACjC,CAAC;EACF,MAAMG,KAAK,GAAGC,QAAQ,CAACL,SAAS,EAAEL,WAAW,CAAC;EAC9C,MAAMW,QAAQ,GAAGC,YAAY,EAAE;EAE/B,IAAI,CAACf,OAAO,EAAE;IACVgB,OAAO,CAACC,IAAI,uHAEJjB,OAAO,KAAK,EAAE,GAAG,cAAc,GAAGA,UACnC,CACN;;EAGLkB,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIX,SAAS,EAAE;MACXI,KAAK,CAACQ,KAAK,EAAE;;GAEpB,EAAE,CAACZ,SAAS,CAAC,CAAC;EAEf,MAAMa,sBAAsB;IAAA;6BAClBP,QAAQ,CAACM,KAAK,CAAC;QAAEE,KAAK,EAAE;OAAM,CAAC;QAAA,uBAC/BR,QAAQ,CAACM,KAAK,CAAC;UAAEE,KAAK,EAAE;SAAG,CAAC;;KACrC;MAAA;;;EAEDJ,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIlB,WAAW,EAAE;MACboB,sBAAsB,EAAE;MAExB,IAAIT,KAAK,CAACW,OAAO,EAAE;QACfX,KAAK,CAACQ,KAAK,EAAE;;;GAGxB,EAAE,CAACnB,WAAW,CAAC,CAAC;EAEjB,oBACIiB,6BAACM,MAAM,CAACC,GAAG,oBACHpB,KAAK;IACTqB,OAAO,EAAEZ,QAAQ;IACjBJ,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBiB,YAAY,EAAEf,KAAK,CAACgB,KAAK;IACzBC,YAAY,EAAEjB,KAAK,CAACkB;MACnBC,YAAY,CAACtB,IAAI,CAAC,eACnBS;IAAKR,SAAS,EAAC;KAAaV,OAAO,CAAO,eAC1CkB,6BAACc,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBvB,SAAS,EAAC,yDAAyD;IACnEwB,IAAI,EAAC,OAAO;kBACA5B,KAAK,CAAC6B,MAAM,CAACC,OAAO;IAChCC,OAAO,EAAElC;IACX,CACO;AAErB;;;;"}
+{"version":3,"file":"Toast.js","sources":["../../../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { motion, useAnimation } from 'framer-motion';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { getBadgeIcon } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {\n        'border border-grey-200': type === 'default' || type === 'loading' || !type,\n        'border border-grey-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-700': type === 'warning',\n        'border border-red': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        console.warn(\n            `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n                content === '' ? 'empty string' : content\n            }.`\n        );\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"text-grey-700 -mr-2 cursor-pointer self-start !px-0\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["Toast","content","lastUpdated","onClose","handleClose","options","props","texts","useLocalization","autoClose","type","className","cn","timer","useTimer","controls","useAnimation","console","warn","React","useEffect","start","triggerUpdateAnimation","scale","running","motion","div","animate","onMouseEnter","pause","onMouseLeave","resume","getBadgeIcon","IconButton","appearance","icon","toasts","dismiss","onClick"],"mappings":";;;;;;;;MA4CaA,KAAK,GAAG,CAAC;EAAEC,OAAO;EAAEC,WAAW;EAAEC,OAAO,EAAEC,WAAW;EAAEC,OAAO;EAAE,GAAGC;CAAmB;EAC/F,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM;IAAEC,SAAS;IAAEC,IAAI,GAAG;GAAW,GAAGL,OAAO;EAC/C,MAAMM,SAAS,GAAGC,EAAE,CAAC,6EAA6E,EAAE;IAChG,wBAAwB,EAAEF,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,SAAS,IAAI,CAACA,IAAI;IAC3E,wBAAwB,EAAEA,IAAI,KAAK,SAAS;IAC5C,wBAAwB,EAAEA,IAAI,KAAK,aAAa;IAChD,0BAA0B,EAAEA,IAAI,KAAK,SAAS;IAC9C,mBAAmB,EAAEA,IAAI,KAAK;GACjC,CAAC;EACF,MAAMG,KAAK,GAAGC,QAAQ,CAACL,SAAS,EAAEL,WAAW,CAAC;EAC9C,MAAMW,QAAQ,GAAGC,YAAY,EAAE;EAE/B,IAAI,CAACf,OAAO,EAAE;IACVgB,OAAO,CAACC,IAAI,uHAEJjB,OAAO,KAAK,EAAE,GAAG,cAAc,GAAGA,UACnC,CACN;;EAGLkB,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIX,SAAS,EAAE;MACXI,KAAK,CAACQ,KAAK,EAAE;;GAEpB,EAAE,CAACZ,SAAS,CAAC,CAAC;EAEf,MAAMa,sBAAsB;IAAA;6BAClBP,QAAQ,CAACM,KAAK,CAAC;QAAEE,KAAK,EAAE;OAAM,CAAC;QAAA,uBAC/BR,QAAQ,CAACM,KAAK,CAAC;UAAEE,KAAK,EAAE;SAAG,CAAC;;KACrC;MAAA;;;EAEDJ,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIlB,WAAW,EAAE;MACboB,sBAAsB,EAAE;MAExB,IAAIT,KAAK,CAACW,OAAO,EAAE;QACfX,KAAK,CAACQ,KAAK,EAAE;;;GAGxB,EAAE,CAACnB,WAAW,CAAC,CAAC;EAEjB,oBACIiB,6BAACM,MAAM,CAACC,GAAG,oBACHpB,KAAK;IACTqB,OAAO,EAAEZ,QAAQ;IACjBJ,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBiB,YAAY,EAAEf,KAAK,CAACgB,KAAK;IACzBC,YAAY,EAAEjB,KAAK,CAACkB;MACnBC,YAAY,CAACtB,IAAI,CAAC,eACnBS;IAAKR,SAAS,EAAC;KAAaV,OAAO,CAAO,eAC1CkB,6BAACc,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBvB,SAAS,EAAC,qDAAqD;IAC/DwB,IAAI,EAAC,OAAO;kBACA5B,KAAK,CAAC6B,MAAM,CAACC,OAAO;IAChCC,OAAO,EAAElC;IACX,CACO;AAErB;;;;"}

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

@@ -11,7 +11,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
   } = props;
   const className = cn(otherProps.className);
   return /*#__PURE__*/createElement(Root, {
-    delayDuration: 50
+    delayDuration: 250
   }, /*#__PURE__*/createElement(Trigger, {
     asChild: true,
     ref: ref
@@ -21,13 +21,13 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
     side: placement,
     sideOffset: 3
   }), /*#__PURE__*/createElement("div", {
-    className: "wcag-purple xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90",
+    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900/90 px-2 py-1 text-xs font-bold text-white opacity-90",
     "data-taco": "tooltip",
     style: {
       transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
     }
   }, /*#__PURE__*/createElement(Arrow, {
-    className: "fill-purple stroke-purple -mt-px"
+    className: "-mt-px fill-blue-900/90 stroke-blue-900/90"
   }), title))));
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport cn from 'classnames';\n\nexport type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Text displayed in the tooltip */\n    title: string;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, ...otherProps } = props;\n    const className = cn(otherProps.className);\n\n    return (\n        <TooltipPrimitive.Root delayDuration={50}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Content {...otherProps} asChild className={className} side={placement} sideOffset={3}>\n                    <div\n                        className=\"wcag-purple xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90\"\n                        data-taco=\"tooltip\"\n                        style={{\n                            transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n                        }}>\n                        <TooltipPrimitive.Arrow className=\"fill-purple stroke-purple -mt-px\" />\n                        {title}\n                    </div>\n                </TooltipPrimitive.Content>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","className","cn","TooltipPrimitive","delayDuration","asChild","side","sideOffset","style","transformOrigin"],"mappings":";;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASD,OAAO,CAACE,KAAmB,EAAEC,GAA2B;EACrG,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC3D,MAAMM,SAAS,GAAGC,EAAE,CAACF,UAAU,CAACC,SAAS,CAAC;EAE1C,oBACIP,cAACS,IAAqB;IAACC,aAAa,EAAE;kBAClCV,cAACS,OAAwB;IAACE,OAAO;IAACT,GAAG,EAAEA;KAClCE,QAAQ,CACc,eAC3BJ,cAACS,MAAuB,qBACpBT,cAACS,OAAwB,oBAAKH,UAAU;IAAEK,OAAO;IAACJ,SAAS,EAAEA,SAAS;IAAEK,IAAI,EAAEP,SAAS;IAAEQ,UAAU,EAAE;mBACjGb;IACIO,SAAS,EAAC,8IAA8I;iBAC9I,SAAS;IACnBO,KAAK,EAAE;MACHC,eAAe,EAAE;;kBAErBf,cAACS,KAAsB;IAACF,SAAS,EAAC;IAAqC,EACtEJ,KAAK,CACJ,CACiB,CACL,CACN;AAEhC,CAAC;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport cn from 'classnames';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Text displayed in the tooltip */\n    title: string | JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, ...otherProps } = props;\n    const className = cn(otherProps.className);\n\n    return (\n        <TooltipPrimitive.Root delayDuration={250}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Content {...otherProps} asChild className={className} side={placement} sideOffset={3}>\n                    <div\n                        className=\"xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900/90 px-2 py-1 text-xs font-bold text-white opacity-90\"\n                        data-taco=\"tooltip\"\n                        style={{\n                            transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n                        }}>\n                        <TooltipPrimitive.Arrow className=\"-mt-px fill-blue-900/90 stroke-blue-900/90\" />\n                        {title}\n                    </div>\n                </TooltipPrimitive.Content>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","className","cn","TooltipPrimitive","delayDuration","asChild","side","sideOffset","style","transformOrigin"],"mappings":";;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASD,OAAO,CAACE,KAAmB,EAAEC,GAA2B;EACrG,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC3D,MAAMM,SAAS,GAAGC,EAAE,CAACF,UAAU,CAACC,SAAS,CAAC;EAE1C,oBACIP,cAACS,IAAqB;IAACC,aAAa,EAAE;kBAClCV,cAACS,OAAwB;IAACE,OAAO;IAACT,GAAG,EAAEA;KAClCE,QAAQ,CACc,eAC3BJ,cAACS,MAAuB,qBACpBT,cAACS,OAAwB,oBAAKH,UAAU;IAAEK,OAAO;IAACJ,SAAS,EAAEA,SAAS;IAAEK,IAAI,EAAEP,SAAS;IAAEQ,UAAU,EAAE;mBACjGb;IACIO,SAAS,EAAC,4JAA4J;iBAC5J,SAAS;IACnBO,KAAK,EAAE;MACHC,eAAe,EAAE;;kBAErBf,cAACS,KAAsB;IAACF,SAAS,EAAC;IAA+C,EAChFJ,KAAK,CACJ,CACiB,CACL,CACN;AAEhC,CAAC;;;;"}

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

@@ -86,7 +86,7 @@ const Tour = props => {
     var _props$children$find;
     return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
   }, [props.children]);
-  function callback(state) {
+  const callback = state => {
     if (state.action === ACTIONS.SKIP && state.lifecycle === LIFECYCLE.COMPLETE) {
       if (onClose) {
         onClose(getStep(state.step.target));
@@ -102,7 +102,7 @@ const Tour = props => {
         onReady(getStep(state.step.target));
       }
     }
-  }
+  };
   return /*#__PURE__*/createElement(Joyride, Object.assign({}, rest, {
     run: run,
     steps: steps,
@@ -123,7 +123,7 @@ const Tour = props => {
     styles: {
       /** style beacon */
       options: {
-        // tailwind.theme.colors.blue.light
+        // tailwind.theme.colors.blue.300
         primaryColor: '#6ba4ff'
       }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Tour.js","sources":["../../../../../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import * as React from 'react';\nimport Joyride, { Step, CallBackProps, ACTIONS, LIFECYCLE, Placement, EVENTS, TooltipRenderProps } from 'react-joyride';\n\nimport { Button } from '../Button/Button';\nimport { Group } from '../Group/Group';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type TourTexts = {\n    /** Text for back action button */\n    back: string;\n    /**\n     * Text for close button.\n     * This button is displayed if tour is not continuous - replacing the `Next` button.\n     * It will pause the flow of the tour and close the tooltip\n     */\n    close: string;\n    /**\n     * Aria-label and title for close icon button in each step.\n     * This button skips and completes the flow entirely\n     */\n    skip: string;\n    /**\n     * Text for last action button.\n     * This button is displayed when user is on the last step of the tour\n     */\n    last: string;\n    /**\n     * Text for next action button.\n     * This button is displayed if tour has more than one steps and is continuous\n     */\n    next: string;\n    /** Aria label and title for beacon that will open the tour step */\n    open: string;\n};\n\nexport type TourStepProps = {\n    /** Content can be any valid react node, for e.g. a `div` */\n    children: React.ReactNode;\n    /** Define the position of the tour's popup relative to the element is presenting */\n    position?: Placement;\n    /** The css selector of the html element you want to include in a tour */\n    selector: string;\n    /**\n     * Show beacon for step.\n     * A beacon is a styled component which indicates the current element to be presented.\n     * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\n     */\n    showBeacon?: boolean;\n    /** Text displayed above the children/content of the popup  */\n    title: string;\n};\n\nconst Tooltip = ({\n    continuous,\n    index,\n    isLastStep,\n    step,\n    backProps,\n    primaryProps,\n    skipProps,\n    tooltipProps,\n    size,\n    locale,\n    disableTourSkipOnEsc,\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\n    const skipButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    React.useEffect(() => {\n        const onWindowKeyDown = (event: KeyboardEvent): void => {\n            if (!disableTourSkipOnEsc) {\n                if (event.key === 'Escape' && skipButtonRef.current !== null) {\n                    event.preventDefault();\n                    skipButtonRef.current.click();\n                    return;\n                }\n            }\n        };\n\n        window.addEventListener('keydown', onWindowKeyDown);\n\n        return () => {\n            window.removeEventListener('keydown', onWindowKeyDown);\n        };\n    }, []);\n\n    return (\n        <div {...tooltipProps} className=\"yt-tour__step w-88 relative rounded bg-white p-4\">\n            <IconButton\n                {...skipProps}\n                ref={skipButtonRef}\n                appearance=\"discrete\"\n                icon=\"close\"\n                title={locale.skip}\n                aria-label={locale.skip}\n                className=\"absolute top-0 right-0 mt-1 mr-1\"\n            />\n            {step.title && <h5>{step.title}</h5>}\n            {step.content}\n            <Group className=\"mt-4 justify-end\">\n                {index > 0 && (\n                    <Button {...backProps} appearance=\"discrete\">\n                        {locale.back}\n                    </Button>\n                )}\n                <Button {...primaryProps} appearance=\"primary\">\n                    {continuous\n                        ? isLastStep\n                            ? `${locale.last} (${index + 1}/${size})`\n                            : `${locale.next} (${index + 1}/${size})`\n                        : locale.close}\n                </Button>\n            </Group>\n        </div>\n    );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const TourStep = (_props: TourStepProps): null => null;\n\nexport type TourProps = {\n    /** Controls if [Joyride](https://docs.react-joyride.com) is active */\n    autoStart?: boolean;\n    /** Children should be one or more `Tour.Step` components */\n    children: any;\n    /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\n    continuous?: boolean;\n    /** Disable closing of tour when click on `Escape` */\n    disableCloseOnEsc?: boolean;\n    /** Don't close the presenting popup of the tour step when clicking outside it */\n    disableOverlayClose?: boolean;\n    /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\n    disableScrolling?: boolean;\n    /* When user clicks on the close icon button, which will close the tour and complete the flow */\n    onClose?: (step: TourStepProps) => void;\n    /* When user completes the entire flow */\n    onComplete?: Function;\n    /** When step is ready */\n    onReady?: (step: TourStepProps) => void;\n    /* Allow mouse and touch events through the spotlight */\n    spotlightClicks?: boolean;\n    /* Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done. */\n    disableScrollParentFix?: boolean;\n    /** The scroll distance from the element scrollTop value. */\n    scrollOffset?: number;\n};\n\nexport const Tour = (props: TourProps) => {\n    const {\n        texts: { tour },\n    } = useLocalization();\n\n    const {\n        autoStart: run,\n        onComplete,\n        onClose,\n        onReady,\n        spotlightClicks,\n        disableCloseOnEsc: disableTourSkipOnEsc,\n        disableScrollParentFix = false,\n        scrollOffset,\n        ...rest\n    } = props;\n\n    const steps = React.useMemo(() => {\n        return React.Children.map(props.children, child => {\n            const step: Step = {\n                disableBeacon: !child.props.showBeacon,\n                target: child.props.selector,\n                placement: child.props.position,\n                title: child.props.title,\n                content: child.props.children,\n            };\n            return step;\n        });\n    }, [props.children]);\n\n    const getStep = React.useCallback(\n        (selector: string | HTMLElement) => props.children.find((child: any) => child.props.selector === selector)?.props,\n        [props.children]\n    );\n\n    function callback(state: CallBackProps) {\n        if (state.action === ACTIONS.SKIP && state.lifecycle === LIFECYCLE.COMPLETE) {\n            if (onClose) {\n                onClose(getStep(state.step.target));\n            }\n        }\n\n        if (state.type === EVENTS.TOUR_END) {\n            if (onComplete) {\n                onComplete();\n            }\n        }\n\n        if (state.lifecycle === LIFECYCLE.READY) {\n            if (onReady) {\n                onReady(getStep(state.step.target));\n            }\n        }\n    }\n\n    return (\n        <Joyride\n            {...rest}\n            run={run}\n            steps={steps}\n            showProgress\n            floaterProps={{\n                disableAnimation: true,\n            }}\n            tooltipComponent={tooltipProps => (\n                <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\n            )}\n            locale={tour}\n            spotlightPadding={8}\n            spotlightClicks={spotlightClicks}\n            disableScrollParentFix={disableScrollParentFix}\n            callback={callback}\n            scrollOffset={scrollOffset}\n            styles={{\n                /** style beacon */\n                options: {\n                    // tailwind.theme.colors.blue.light\n                    primaryColor: '#6ba4ff',\n                },\n            }}\n            disableCloseOnEsc\n        />\n    );\n};\n\nTour.Step = TourStep;\n"],"names":["Tooltip","continuous","index","isLastStep","step","backProps","primaryProps","skipProps","tooltipProps","size","locale","disableTourSkipOnEsc","skipButtonRef","React","onWindowKeyDown","event","key","current","preventDefault","click","window","addEventListener","removeEventListener","className","IconButton","ref","appearance","icon","title","skip","content","Group","Button","back","last","next","close","TourStep","_props","Tour","props","texts","tour","useLocalization","autoStart","run","onComplete","onClose","onReady","spotlightClicks","disableCloseOnEsc","disableScrollParentFix","scrollOffset","rest","steps","map","children","child","disableBeacon","showBeacon","target","selector","placement","position","getStep","find","callback","state","action","ACTIONS","SKIP","lifecycle","LIFECYCLE","COMPLETE","type","EVENTS","TOUR_END","READY","Joyride","showProgress","floaterProps","disableAnimation","tooltipComponent","spotlightPadding","styles","options","primaryColor","Step"],"mappings":"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"}
+{"version":3,"file":"Tour.js","sources":["../../../../../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import * as React from 'react';\nimport Joyride, { Step, CallBackProps, ACTIONS, LIFECYCLE, Placement, EVENTS, TooltipRenderProps } from 'react-joyride';\n\nimport { Button } from '../Button/Button';\nimport { Group } from '../Group/Group';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type TourTexts = {\n    /** Text for back action button */\n    back: string;\n    /**\n     * Text for close button.\n     * This button is displayed if tour is not continuous - replacing the `Next` button.\n     * It will pause the flow of the tour and close the tooltip\n     */\n    close: string;\n    /**\n     * Aria-label and title for close icon button in each step.\n     * This button skips and completes the flow entirely\n     */\n    skip: string;\n    /**\n     * Text for last action button.\n     * This button is displayed when user is on the last step of the tour\n     */\n    last: string;\n    /**\n     * Text for next action button.\n     * This button is displayed if tour has more than one steps and is continuous\n     */\n    next: string;\n    /** Aria label and title for beacon that will open the tour step */\n    open: string;\n};\n\nexport type TourStepProps = {\n    /** Content can be any valid react node, for e.g. a `div` */\n    children: React.ReactNode;\n    /** Define the position of the tour's popup relative to the element is presenting */\n    position?: Placement;\n    /** The css selector of the html element you want to include in a tour */\n    selector: string;\n    /**\n     * Show beacon for step.\n     * A beacon is a styled component which indicates the current element to be presented.\n     * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\n     */\n    showBeacon?: boolean;\n    /** Text displayed above the children/content of the popup  */\n    title: string;\n};\n\nconst Tooltip = ({\n    continuous,\n    index,\n    isLastStep,\n    step,\n    backProps,\n    primaryProps,\n    skipProps,\n    tooltipProps,\n    size,\n    locale,\n    disableTourSkipOnEsc,\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\n    const skipButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    React.useEffect(() => {\n        const onWindowKeyDown = (event: KeyboardEvent): void => {\n            if (!disableTourSkipOnEsc) {\n                if (event.key === 'Escape' && skipButtonRef.current !== null) {\n                    event.preventDefault();\n                    skipButtonRef.current.click();\n                    return;\n                }\n            }\n        };\n\n        window.addEventListener('keydown', onWindowKeyDown);\n\n        return () => {\n            window.removeEventListener('keydown', onWindowKeyDown);\n        };\n    }, []);\n\n    return (\n        <div {...tooltipProps} className=\"yt-tour__step w-88 relative rounded bg-white p-4\">\n            <IconButton\n                {...skipProps}\n                ref={skipButtonRef}\n                appearance=\"discrete\"\n                icon=\"close\"\n                title={locale.skip}\n                aria-label={locale.skip}\n                className=\"absolute top-0 right-0 mt-1 mr-1\"\n            />\n            {step.title && <h5>{step.title}</h5>}\n            {step.content}\n            <Group className=\"mt-4 justify-end\">\n                {index > 0 && (\n                    <Button {...backProps} appearance=\"discrete\">\n                        {locale.back}\n                    </Button>\n                )}\n                <Button {...primaryProps} appearance=\"primary\">\n                    {continuous\n                        ? isLastStep\n                            ? `${locale.last} (${index + 1}/${size})`\n                            : `${locale.next} (${index + 1}/${size})`\n                        : locale.close}\n                </Button>\n            </Group>\n        </div>\n    );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const TourStep = (_props: TourStepProps): null => null;\n\nexport type TourProps = {\n    /** Controls if [Joyride](https://docs.react-joyride.com) is active */\n    autoStart?: boolean;\n    /** Children should be one or more `Tour.Step` components */\n    children: any;\n    /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\n    continuous?: boolean;\n    /** Disable closing of tour when click on `Escape` */\n    disableCloseOnEsc?: boolean;\n    /** Don't close the presenting popup of the tour step when clicking outside it */\n    disableOverlayClose?: boolean;\n    /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\n    disableScrolling?: boolean;\n    /* When user clicks on the close icon button, which will close the tour and complete the flow */\n    onClose?: (step: TourStepProps) => void;\n    /* When user completes the entire flow */\n    onComplete?: Function;\n    /** When step is ready */\n    onReady?: (step: TourStepProps) => void;\n    /* Allow mouse and touch events through the spotlight */\n    spotlightClicks?: boolean;\n    /* Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done. */\n    disableScrollParentFix?: boolean;\n    /** The scroll distance from the element scrollTop value. */\n    scrollOffset?: number;\n};\n\nexport const Tour = (props: TourProps) => {\n    const {\n        texts: { tour },\n    } = useLocalization();\n\n    const {\n        autoStart: run,\n        onComplete,\n        onClose,\n        onReady,\n        spotlightClicks,\n        disableCloseOnEsc: disableTourSkipOnEsc,\n        disableScrollParentFix = false,\n        scrollOffset,\n        ...rest\n    } = props;\n\n    const steps = React.useMemo(() => {\n        return React.Children.map(props.children, child => {\n            const step: Step = {\n                disableBeacon: !child.props.showBeacon,\n                target: child.props.selector,\n                placement: child.props.position,\n                title: child.props.title,\n                content: child.props.children,\n            };\n            return step;\n        });\n    }, [props.children]);\n\n    const getStep = React.useCallback(\n        (selector: string | HTMLElement) => props.children.find((child: any) => child.props.selector === selector)?.props,\n        [props.children]\n    );\n\n    const callback = (state: CallBackProps) => {\n        if (state.action === ACTIONS.SKIP && state.lifecycle === LIFECYCLE.COMPLETE) {\n            if (onClose) {\n                onClose(getStep(state.step.target));\n            }\n        }\n\n        if (state.type === EVENTS.TOUR_END) {\n            if (onComplete) {\n                onComplete();\n            }\n        }\n\n        if (state.lifecycle === LIFECYCLE.READY) {\n            if (onReady) {\n                onReady(getStep(state.step.target));\n            }\n        }\n    };\n\n    return (\n        <Joyride\n            {...rest}\n            run={run}\n            steps={steps}\n            showProgress\n            floaterProps={{\n                disableAnimation: true,\n            }}\n            tooltipComponent={tooltipProps => (\n                <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\n            )}\n            locale={tour}\n            spotlightPadding={8}\n            spotlightClicks={spotlightClicks}\n            disableScrollParentFix={disableScrollParentFix}\n            callback={callback}\n            scrollOffset={scrollOffset}\n            styles={{\n                /** style beacon */\n                options: {\n                    // tailwind.theme.colors.blue.300\n                    primaryColor: '#6ba4ff',\n                },\n            }}\n            disableCloseOnEsc\n        />\n    );\n};\n\nTour.Step = TourStep;\n"],"names":["Tooltip","continuous","index","isLastStep","step","backProps","primaryProps","skipProps","tooltipProps","size","locale","disableTourSkipOnEsc","skipButtonRef","React","onWindowKeyDown","event","key","current","preventDefault","click","window","addEventListener","removeEventListener","className","IconButton","ref","appearance","icon","title","skip","content","Group","Button","back","last","next","close","TourStep","_props","Tour","props","texts","tour","useLocalization","autoStart","run","onComplete","onClose","onReady","spotlightClicks","disableCloseOnEsc","disableScrollParentFix","scrollOffset","rest","steps","map","children","child","disableBeacon","showBeacon","target","selector","placement","position","getStep","find","callback","state","action","ACTIONS","SKIP","lifecycle","LIFECYCLE","COMPLETE","type","EVENTS","TOUR_END","READY","Joyride","showProgress","floaterProps","disableAnimation","tooltipComponent","spotlightPadding","styles","options","primaryColor","Step"],"mappings":"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"}

package/dist/esm/packages/taco/src/index.js

@@ -14,12 +14,12 @@ export { Button } from './components/Button/Button.js';
 export { Calendar } from './components/Calendar/Calendar.js';
 export { Card } from './components/Card/Card.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { useBoundingClientRectListener } from './hooks/useBoundingClientRectListener.js';
 export { useMergedRef } from './hooks/useMergedRef.js';
 export { Input } from './components/Input/Input.js';
 export { getNextIndexFromKey, useListKeyboardNavigation } from './utils/hooks/useListKeyboardNavigation.js';
 export { useListScrollTo } from './utils/hooks/useListScrollTo.js';
 export { Spinner } from './components/Spinner/Spinner.js';
-export { useBoundingClientRectListener } from './hooks/useBoundingClientRectListener.js';
 export { Combobox } from './components/Combobox/Combobox.js';
 export { format, parseFromCustomString, parseFromISOString } from './utils/date.js';
 export { Popover } from './components/Popover/Popover.js';

package/dist/esm/packages/taco/src/utils/colors.js

@@ -1,13 +1,13 @@
 const colors = {
-  green: 'bg-[#cdf0e7] text-[#14493a]',
-  yellow: 'bg-[#fff1c3] text-[#733700]',
-  red: 'bg-[#ffdad2] text-[#64001b]',
-  blue: 'bg-[#deebff] text-[#29283e]',
-  purple: 'bg-[#eee5ff] text-[#412970]',
-  orange: 'bg-[#ffe3bb] text-[#4a2811]',
-  brown: 'bg-[#eee0da] text-[#45291f]',
-  pink: 'bg-[#ffe3f7] text-[#870062]',
-  grey: 'bg-grey text-[#303030]'
+  green: 'bg-green-100 text-green-900',
+  yellow: 'bg-yellow-100 text-yellow-900',
+  red: 'bg-red-100 text-red-900',
+  blue: 'bg-blue-100 text-blue-900',
+  purple: 'bg-purple-100 text-purple-900',
+  orange: 'bg-orange-100 text-orange-900',
+  brown: 'bg-brown-100 text-brown-900',
+  pink: 'bg-pink-100 text-pink-900',
+  grey: 'bg-grey-200 text-grey-900'
 };
 
 export { colors };

package/dist/esm/packages/taco/src/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sources":["../../../../../../src/utils/colors.ts"],"sourcesContent":["export const colors = {\n    green: 'bg-[#cdf0e7] text-[#14493a]',\n    yellow: 'bg-[#fff1c3] text-[#733700]',\n    red: 'bg-[#ffdad2] text-[#64001b]',\n    blue: 'bg-[#deebff] text-[#29283e]',\n    purple: 'bg-[#eee5ff] text-[#412970]',\n    orange: 'bg-[#ffe3bb] text-[#4a2811]',\n    brown: 'bg-[#eee0da] text-[#45291f]',\n    pink: 'bg-[#ffe3f7] text-[#870062]',\n    grey: 'bg-grey text-[#303030]',\n};\n\nexport type Color = keyof typeof colors;\n"],"names":["colors","green","yellow","red","blue","purple","orange","brown","pink","grey"],"mappings":"MAAaA,MAAM,GAAG;EAClBC,KAAK,EAAE,6BAA6B;EACpCC,MAAM,EAAE,6BAA6B;EACrCC,GAAG,EAAE,6BAA6B;EAClCC,IAAI,EAAE,6BAA6B;EACnCC,MAAM,EAAE,6BAA6B;EACrCC,MAAM,EAAE,6BAA6B;EACrCC,KAAK,EAAE,6BAA6B;EACpCC,IAAI,EAAE,6BAA6B;EACnCC,IAAI,EAAE;;;;;"}
+{"version":3,"file":"colors.js","sources":["../../../../../../src/utils/colors.ts"],"sourcesContent":["export const colors = {\n    green: 'bg-green-100 text-green-900',\n    yellow: 'bg-yellow-100 text-yellow-900',\n    red: 'bg-red-100 text-red-900',\n    blue: 'bg-blue-100 text-blue-900',\n    purple: 'bg-purple-100 text-purple-900',\n    orange: 'bg-orange-100 text-orange-900',\n    brown: 'bg-brown-100 text-brown-900',\n    pink: 'bg-pink-100 text-pink-900',\n    grey: 'bg-grey-200 text-grey-900',\n};\n\nexport type Color = keyof typeof colors;\n"],"names":["colors","green","yellow","red","blue","purple","orange","brown","pink","grey"],"mappings":"MAAaA,MAAM,GAAG;EAClBC,KAAK,EAAE,6BAA6B;EACpCC,MAAM,EAAE,+BAA+B;EACvCC,GAAG,EAAE,yBAAyB;EAC9BC,IAAI,EAAE,2BAA2B;EACjCC,MAAM,EAAE,+BAA+B;EACvCC,MAAM,EAAE,+BAA+B;EACvCC,KAAK,EAAE,6BAA6B;EACpCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE;;;;;"}

package/dist/index.css

@@ -74,7 +74,7 @@
     }
 
     hr {
-        @apply bg-grey-light my-5 flex h-px border-none;
+        @apply bg-grey-100 my-5 flex h-px border-none;
     }
 
     h1,
@@ -116,16 +116,16 @@
     }
 
     a {
-        @apply text-blue no-underline;
+        @apply text-blue-500 no-underline;
     }
 
     a:hover,
     a:focus {
-        @apply text-blue-light;
+        @apply text-blue-300;
     }
 
     a:active {
-        @apply text-blue-dark;
+        @apply text-blue-700;
     }
 
     button::-moz-focus-inner {
@@ -139,19 +139,23 @@
         @apply block cursor-pointer;
     }
 
+    input[type='search']::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+    }
+
     table.yt-table {
         @apply focus:yt-focus flex flex-col focus:rounded-sm;
     }
     table.yt-table thead.yt-table__head tr.yt-table__row {
-        @apply border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold;
+        @apply border-grey-100 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold;
     }
 
     table.yt-table thead.yt-table__head tr.yt-table__row th.yt-table__cell {
-        @apply text-grey-darkest flex flex-1 justify-center truncate p-2 text-center align-middle hover:text-black;
+        @apply text-grey-700 flex flex-1 justify-center truncate p-2 text-center align-middle hover:text-black;
     }
 
     table.yt-table tbody.yt-table__body tr.yt-table__row {
-        @apply border-grey-light hover:bg-grey-light flex min-h-[2.5rem] border-b;
+        @apply border-grey-100 hover:bg-grey-100 flex min-h-[2.5rem] border-b;
     }
 
     table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
@@ -214,7 +218,7 @@
 }
 
 [data-taco='calendar'] .DayPicker-Weekday {
-    @apply text-grey-darkest flex-grow text-center uppercase;
+    @apply text-grey-700 flex-grow text-center uppercase;
 }
 
 [data-taco='calendar'] .DayPicker-Weekday abbr[title] {
@@ -242,25 +246,25 @@
 }
 
 [data-taco='calendar'] .DayPicker-TodayButton {
-    @apply text-blue cursor-pointer border-none bg-transparent text-xs;
+    @apply cursor-pointer border-none bg-transparent text-xs text-blue-500;
 }
 
 [data-taco='calendar'] .DayPicker-TodayButton:hover {
-    @apply text-blue-light;
+    @apply text-blue-300;
 }
 
 /* Default modifiers */
 
 [data-taco='calendar'] .DayPicker-Day--today {
-    @apply text-blue font-bold;
+    @apply font-bold text-blue-500;
 }
 
 [data-taco='calendar'] .DayPicker-Day--outside {
-    @apply text-grey-dark cursor-default;
+    @apply text-grey-300 cursor-default;
 }
 
 [data-taco='calendar'] .DayPicker-Day--disabled {
-    @apply text-grey-dark pointer-events-none cursor-default;
+    @apply text-grey-300 pointer-events-none cursor-default;
 }
 
 [data-taco='calendar'] .icon:hover,
@@ -268,7 +272,7 @@
     .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover,
 [data-taco='calendar'] .DayPicker-Day--highlighted,
 [data-taco='calendar'] .DayPicker-Day--selected {
-    @apply bg-grey-light text-black;
+    @apply bg-grey-100 text-black;
 }
 
 [data-taco='calendar'] .calendar-caption {
@@ -276,7 +280,7 @@
 }
 
 [data-taco='scrollable-list'].yt-list--multiselect li:first-child {
-    @apply border-grey-light border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
+    @apply border-grey-100 border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
 }
 
 [data-taco='scrollable-list'] li > [data-taco='icon'] {
@@ -284,23 +288,23 @@
 }
 
 [data-taco='scrollable-list']:not([readonly]) li:hover {
-    @apply wcag-blue-light;
+    @apply wcag-blue-300;
 }
 
 [data-taco='scrollable-list']:not([readonly]) li:hover [data-taco='icon'] {
-    @apply wcag-blue-light;
+    @apply wcag-blue-300;
 }
 
 [data-taco='scrollable-list'] li:focus,
 [data-taco='scrollable-list']:not(.yt-list--multiselect) li[aria-selected='true'],
 [data-taco='scrollable-list'] li[data-focused='true'] {
-    @apply wcag-blue;
+    @apply wcag-blue-500;
 }
 
 [data-taco='scrollable-list'] li:focus [data-taco='icon'],
 [data-taco='scrollable-list']:not(.yt-list--multiselect) li[aria-selected='true'] [data-taco='icon'],
 [data-taco='scrollable-list'] li[data-focused='true'] [data-taco='icon'] {
-    @apply wcag-blue;
+    @apply wcag-blue-500;
 }
 
 [data-taco='scrollable-list'][readonly] li {
@@ -315,7 +319,7 @@
 [data-taco='scrollable-list'] li.yt-list__empty,
 [data-taco='scrollable-list'] li.yt-list__empty:hover,
 [data-taco='scrollable-list'] li.yt-list__empty:focus {
-    @apply text-grey-darkest flex w-full items-center overflow-hidden bg-white px-3 italic;
+    @apply text-grey-700 flex w-full items-center overflow-hidden bg-white px-3 italic;
 }
 
 [data-taco='scrollable-list'] li.yt-list__empty [data-taco='spinner'] {
@@ -331,7 +335,7 @@
     stroke-linecap: round;
     stroke-dasharray: 282.743343;
     stroke-dashoffset: 67.85840232;
-    stroke: theme('colors.blue.DEFAULT');
+    stroke: theme('colors.blue.500');
 }
 
 @keyframes spinnerAnimation {
@@ -360,7 +364,7 @@
 
 .yt-grey-solid [data-taco='spinner'] svg circle,
 .yt-yellow-solid [data-taco='spinner'] svg circle {
-    stroke: theme('colors.grey.darkest');
+    stroke: theme('colors.grey.700');
 }
 
 .yt-blue-solid [data-taco='spinner'] svg circle,
@@ -370,33 +374,33 @@
 }
 
 .yt-blue-inverted svg circle {
-    stroke: theme('colors.blue.DEFAULT');
+    stroke: theme('colors.blue.500');
 }
 
 .yt-yellow-inverted svg circle {
-    stroke: theme('colors.yellow.DEFAULT');
+    stroke: theme('colors.yellow.500');
 }
 
 .yt-red-inverted svg circle {
-    stroke: theme('colors.red.DEFAULT');
+    stroke: theme('colors.red.500');
 }
 
 .yt-green-inverted svg circle {
-    stroke: theme('colors.green.DEFAULT');
+    stroke: theme('colors.green.500');
 }
 
 .yt-grey-inverted svg circle {
-    stroke: theme('colors.grey.darkest');
+    stroke: theme('colors.grey.700');
 }
 
 [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul,
 [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul:hover {
-    @apply border-blue;
+    @apply border-blue-500;
 }
 
 .yt-dialog__drag::before,
 .yt-dialog__drag::after {
-    @apply bg-grey-dark absolute rounded;
+    @apply bg-grey-300 absolute rounded;
     content: '';
     left: theme('spacing.1');
     height: 2px;
@@ -429,7 +433,7 @@
 }
 
 [data-taco='hanger'] a {
-    @apply text-grey underline;
+    @apply text-grey-200 underline;
 }
 
 [data-taco='hanger'] > *:last-child {
@@ -453,7 +457,7 @@
 .yt-navigation__item--active,
 .yt-navigation__item--active a,
 .yt-navigation__item--active .yt-navigation__item__postfix {
-    @apply text-blue;
+    @apply text-blue-500;
 }
 
 .yt-navigation__item--dropping,
@@ -509,7 +513,7 @@
 
 /* rows */
 .yt-table__row {
-    @apply border-grey-light flex border-b;
+    @apply border-grey-100 flex border-b;
     min-height: 2.5rem;
 }
 
@@ -541,12 +545,12 @@
 }
 
 .yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
-    @apply border-grey-light border-b;
+    @apply border-grey-100 border-b;
     flex-basis: 100%;
 }
 
 .yt-table__head .yt-table__head__group + .yt-table__head__group {
-    @apply border-grey-light border-l;
+    @apply border-grey-100 border-l;
 }
 
 .yt-table__head .yt-table__cell > [data-taco='icon'] {
@@ -554,7 +558,7 @@
 }
 
 .yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
-    @apply border-grey-light border-l-2;
+    @apply border-grey-100 border-l-2;
 }
 
 .yt-table.yt-table--windowed.table-with-scrollbar .yt-table__head {
@@ -578,22 +582,22 @@
 }
 
 .yt-table__body .yt-table__row.yt-table__row--active {
-    @apply bg-grey-light;
+    @apply bg-grey-100;
 }
 
 .yt-table__body .yt-table__row.yt-table__row--dragging,
 .yt-table__body .yt-table__row.yt-table__row--dragging:hover {
-    @apply bg-blue text-white;
+    @apply bg-blue-500 text-white;
 }
 
 /* edit */
 .yt-table__body .yt-table__row.yt-table__row--editing {
-    @apply border-grey border-t;
+    @apply border-grey-200 border-t;
 }
 
 .yt-table__body .yt-table__row.yt-table__row--editing,
 .yt-table__body .yt-table__row.yt-table__row--editing:hover {
-    @apply wcag-grey-lightest;
+    @apply wcag-grey-50;
 }
 
 .yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell {
@@ -620,7 +624,7 @@
 
 /* drag */
 #yt-table__drag__placeholder {
-    @apply bg-blue flex w-3/12 rounded p-4 font-bold text-white;
+    @apply flex w-3/12 rounded bg-blue-500 p-4 font-bold text-white;
 }
 
 .yt-tabs .yt-tab__list[aria-orientation='vertical'] {

package/dist/index.d.ts

@@ -38,7 +38,6 @@ export * from './components/Tag/Tag';
 export * from './components/Textarea/Textarea';
 export * from './components/Toast/Toaster';
 export * from './components/Switch/Switch';
-export * from './components/Tag/Tag';
 export * from './components/Tooltip/Tooltip';
 export * from './components/Tour/Tour';
 export * from './components/Treeview/Treeview';

package/dist/primitives/Sortable/components/Item.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare type SortableItemId = string | number;
 export declare type SortableListItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> & {
+    disabled?: boolean;
     id: SortableItemId;
 };
 export declare function Item(props: any): JSX.Element;