@economic/taco 1.1.6 → 1.1.7

package/tailwind.config.js

@@ -1,255 +1,255 @@
-const tokens = require('@economic/taco-tokens').default;
-const plugin = require('tailwindcss/plugin');
-
-module.exports = {
-    theme: {
-        colors: tokens.colors,
-        fontFamily: {
-            display: ['Helvetica, Arial, sans-serif'],
-            mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],
-        },
-        extend: {
-            cursor: {
-                grab: 'grab',
-                grabbing: 'grabbing',
-            },
-            listStyleType: {
-                circle: 'circle',
-            },
-            spacing: {
-                18: '4.5rem',
-                72: '18rem',
-                80: '20rem',
-                88: '22rem',
-                96: '24rem',
-                104: '26rem',
-                112: '28rem',
-                120: '30rem',
-                128: '32rem',
-                xs: '32rem',
-                sm: '48rem',
-                md: '64rem',
-                lg: '80rem',
-            },
-        },
-    },
-    plugins: [
-        require('./plugins/tailwindcss-aria-attributes'),
-        plugin(function ({ addUtilities, theme }) {
-            // ideally we would do this using the @layer utilities directive, but
-            // that causes issues in tools like tailwind where the typescript is loaded before the css
-            // resulting in "yt-focus class does not exist" errors
-            addUtilities({
-                '.fixed-center': {
-                    position: 'fixed',
-                    left: '50%',
-                    top: '50%',
-                    transform: 'translateX(-50%) translateY(-50%)',
-                },
-                '.absolute-center': {
-                    position: 'absolute',
-                    left: '50%',
-                    top: '50%',
-                    transform: 'translateX(-50%) translateY(-50%)',
-                },
-                '.absolute-center-x': {
-                    position: 'absolute',
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                },
-                '.absolute-center-y': {
-                    position: 'absolute',
-                    top: '50%',
-                    transform: 'translateY(-50%)',
-                }, // WCAG contrast combinations
-                '.wcag-black': {
-                    background: theme('colors.black'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-white': {
-                    background: theme('colors.white'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-lightest': {
-                    background: theme('colors.grey.lightest'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-light': {
-                    background: theme('colors.grey.light'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey': {
-                    background: theme('colors.grey.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-dark': {
-                    background: theme('colors.grey.dark'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-darker': {
-                    background: theme('colors.grey.darker'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-grey-darkest': {
-                    background: theme('colors.grey.darkest'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-lightest': {
-                    background: theme('colors.purple.lightest'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-light': {
-                    background: theme('colors.purple.light'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple': {
-                    background: theme('colors.purple.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-dark': {
-                    background: theme('colors.purple.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-blue-lightest': {
-                    background: theme('colors.blue.lightest'),
-                    color: theme('colors.blue.dark'),
-                },
-                '.wcag-blue-light': {
-                    background: theme('colors.blue.light'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-blue': {
-                    background: theme('colors.blue.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-blue-dark': {
-                    background: theme('colors.blue.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-red-lightest': {
-                    background: theme('colors.red.lightest'),
-                    color: theme('colors.red.dark'),
-                },
-                '.wcag-red-light': {
-                    background: theme('colors.red.light'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-red': {
-                    background: theme('colors.red.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-red-dark': {
-                    background: theme('colors.red.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-green-lightest': {
-                    background: theme('colors.green.lightest'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-green-light': {
-                    background: theme('colors.green.light'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-green': {
-                    background: theme('colors.green.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-green-dark': {
-                    background: theme('colors.green.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-yellow-lightest': {
-                    background: theme('colors.yellow.lightest'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-yellow-light': {
-                    background: theme('colors.yellow.light'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-yellow': {
-                    background: theme('colors.yellow.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-yellow-dark': {
-                    background: theme('colors.yellow.dark'),
-                    color: theme('colors.white'),
-                },
-                // Legacy
-                '.yt-transparent': {
-                    background: theme('colors.transparent'),
-                    color: theme('colors.blue.DEFAULT'),
-                },
-                '.yt-focus': {
-                    'box-shadow': '0 0 0 2px rgba(0, 99, 255, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-focus-green': {
-                    'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-focus-yellow': {
-                    'box-shadow': '0 0 0 0.15rem rgba(239, 125, 0, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-focus-red': {
-                    'box-shadow': '0 0 0 0.15rem rgba(253, 99, 97, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-blue-solid': {
-                    background: theme('colors.blue.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.yt-blue-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.blue.DEFAULT')}`,
-                    color: theme('colors.blue.DEFAULT'),
-                },
-                '.yt-yellow-solid': {
-                    background: theme('colors.yellow.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.yt-yellow-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.yellow.DEFAULT')}`,
-                    color: theme('colors.yellow.DEFAULT'),
-                },
-                '.yt-red-solid': {
-                    background: theme('colors.red.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.yt-red-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.red.DEFAULT')}`,
-                    color: theme('colors.red.DEFAULT'),
-                },
-                '.yt-green-solid': {
-                    background: theme('colors.green.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.yt-green-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.green.DEFAULT')}`,
-                    color: theme('colors.green.DEFAULT'),
-                },
-                '.yt-grey-solid': {
-                    background: theme('colors.grey.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.yt-grey-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.grey.darkest')}`,
-                    color: theme('colors.grey.darkest'),
-                },
-                '.yt-shadow': {
-                    'box-shadow': '0px 1px 3px 0px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
-                },
-                '.yt-shadow-inset': {
-                    'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
-                },
-                '.pointer-events-all': {
-                    'pointer-events': 'all',
-                },
-            });
-        }),
-    ],
-};
+const tokens = require('@economic/taco-tokens').default;
+const plugin = require('tailwindcss/plugin');
+
+module.exports = {
+    theme: {
+        colors: tokens.colors,
+        fontFamily: {
+            display: ['Helvetica, Arial, sans-serif'],
+            mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],
+        },
+        extend: {
+            cursor: {
+                grab: 'grab',
+                grabbing: 'grabbing',
+            },
+            listStyleType: {
+                circle: 'circle',
+            },
+            spacing: {
+                18: '4.5rem',
+                72: '18rem',
+                80: '20rem',
+                88: '22rem',
+                96: '24rem',
+                104: '26rem',
+                112: '28rem',
+                120: '30rem',
+                128: '32rem',
+                xs: '32rem',
+                sm: '48rem',
+                md: '64rem',
+                lg: '80rem',
+            },
+        },
+    },
+    plugins: [
+        require('./plugins/tailwindcss-aria-attributes'),
+        plugin(function ({ addUtilities, theme }) {
+            // ideally we would do this using the @layer utilities directive, but
+            // that causes issues in tools like tailwind where the typescript is loaded before the css
+            // resulting in "yt-focus class does not exist" errors
+            addUtilities({
+                '.fixed-center': {
+                    position: 'fixed',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                },
+                '.absolute-center': {
+                    position: 'absolute',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                },
+                '.absolute-center-x': {
+                    position: 'absolute',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                },
+                '.absolute-center-y': {
+                    position: 'absolute',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                }, // WCAG contrast combinations
+                '.wcag-black': {
+                    background: theme('colors.black'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-white': {
+                    background: theme('colors.white'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-lightest': {
+                    background: theme('colors.grey.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-light': {
+                    background: theme('colors.grey.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey': {
+                    background: theme('colors.grey.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-dark': {
+                    background: theme('colors.grey.dark'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-darker': {
+                    background: theme('colors.grey.darker'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-darkest': {
+                    background: theme('colors.grey.darkest'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-lightest': {
+                    background: theme('colors.purple.lightest'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-light': {
+                    background: theme('colors.purple.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple': {
+                    background: theme('colors.purple.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-dark': {
+                    background: theme('colors.purple.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-lightest': {
+                    background: theme('colors.blue.lightest'),
+                    color: theme('colors.blue.dark'),
+                },
+                '.wcag-blue-light': {
+                    background: theme('colors.blue.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue': {
+                    background: theme('colors.blue.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-dark': {
+                    background: theme('colors.blue.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-lightest': {
+                    background: theme('colors.red.lightest'),
+                    color: theme('colors.red.dark'),
+                },
+                '.wcag-red-light': {
+                    background: theme('colors.red.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red': {
+                    background: theme('colors.red.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-dark': {
+                    background: theme('colors.red.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-green-lightest': {
+                    background: theme('colors.green.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-green-light': {
+                    background: theme('colors.green.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-green': {
+                    background: theme('colors.green.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-green-dark': {
+                    background: theme('colors.green.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-yellow-lightest': {
+                    background: theme('colors.yellow.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow-light': {
+                    background: theme('colors.yellow.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow': {
+                    background: theme('colors.yellow.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow-dark': {
+                    background: theme('colors.yellow.dark'),
+                    color: theme('colors.white'),
+                },
+                // Legacy
+                '.yt-transparent': {
+                    background: theme('colors.transparent'),
+                    color: theme('colors.blue.DEFAULT'),
+                },
+                '.yt-focus': {
+                    'box-shadow': '0 0 0 2px rgba(0, 99, 255, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-green': {
+                    'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-yellow': {
+                    'box-shadow': '0 0 0 0.15rem rgba(239, 125, 0, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-red': {
+                    'box-shadow': '0 0 0 0.15rem rgba(253, 99, 97, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-blue-solid': {
+                    background: theme('colors.blue.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.yt-blue-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.blue.DEFAULT')}`,
+                    color: theme('colors.blue.DEFAULT'),
+                },
+                '.yt-yellow-solid': {
+                    background: theme('colors.yellow.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.yt-yellow-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.yellow.DEFAULT')}`,
+                    color: theme('colors.yellow.DEFAULT'),
+                },
+                '.yt-red-solid': {
+                    background: theme('colors.red.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.yt-red-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.red.DEFAULT')}`,
+                    color: theme('colors.red.DEFAULT'),
+                },
+                '.yt-green-solid': {
+                    background: theme('colors.green.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.yt-green-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.green.DEFAULT')}`,
+                    color: theme('colors.green.DEFAULT'),
+                },
+                '.yt-grey-solid': {
+                    background: theme('colors.grey.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.yt-grey-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.grey.darkest')}`,
+                    color: theme('colors.grey.darkest'),
+                },
+                '.yt-shadow': {
+                    'box-shadow': '0px 1px 3px 0px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                },
+                '.yt-shadow-inset': {
+                    'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                },
+                '.pointer-events-all': {
+                    'pointer-events': 'all',
+                },
+            });
+        }),
+    ],
+};

package/types.json

@@ -554,7 +554,7 @@
                     "type": {
                         "type": "reflection",
                         "declaration": {
-                            "id": 833,
+                            "id": 839,
                             "name": "__type",
                             "kind": 65536,
                             "kindString": "Type literal",
@@ -1137,10 +1137,12 @@
             "'list-search'",
             "'list'",
             "'lock-open'",
+            "'log-out'",
             "'log'",
             "'market'",
             "'match-amount'",
             "'match-entries'",
+            "'menu'",
             "'mileage'",
             "'modal-resize'",
             "'modal-shrink'",
@@ -1162,6 +1164,7 @@
             "'print'",
             "'process-payment'",
             "'product-ledger-card'",
+            "'profile'",
             "'project-cards'",
             "'projects'",
             "'quicklinks'",
@@ -2380,7 +2383,7 @@
                     "constraint": {
                         "type": "reflection",
                         "declaration": {
-                            "id": 1321,
+                            "id": 1327,
                             "name": "__type",
                             "kind": 65536,
                             "kindString": "Type literal",

package/dist/components/Accordion/Accordion.d.ts

@@ -1,42 +0,0 @@
-import React from 'react';
-export declare type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;
-export declare type AccordionContentProps = React.HTMLAttributes<HTMLElement>;
-export declare type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
-    id: string;
-    disabled?: boolean;
-};
-declare type AccordionBaseProps = {
-    children: React.ReactNode[];
-    /** Change what heading element accordion regions will render */
-    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    /** Additional classes for Accordion root element */
-    className?: string;
-};
-export interface AccordionUncontrolledProps extends AccordionBaseProps {
-    /** Default expanded accordion(s) */
-    defaultId: string | string[];
-    id?: never;
-    onChange?: never;
-}
-export interface AccordionMultipleControlledProps extends AccordionBaseProps {
-    /** Expanded accordions */
-    id: string[];
-    /** onChange function to receive ids of expanded accordions */
-    onChange: (id: string[]) => void;
-    defaultId?: never;
-}
-export interface AccordionSingleControlledProps extends AccordionBaseProps {
-    /** Expanded accordion */
-    id: string;
-    /** onChange function to receive id of expanded accordion */
-    onChange: (id: string) => void;
-    defaultId?: never;
-}
-export declare type AccordionProps = AccordionUncontrolledProps | AccordionMultipleControlledProps | AccordionSingleControlledProps;
-export declare const Accordion: {
-    (props: AccordionProps): JSX.Element;
-    Item: (props: AccordionItemProps) => JSX.Element;
-    Trigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
-};
-export {};

package/dist/components/Backdrop/Backdrop.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export declare type BackdropProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Badge/Badge.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { State } from '../../types';
-import './Badge.css';
-export declare type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
-    /** Content should be a numerical value or tag/status like text **/
-    children: React.ReactNode;
-    /** Show compact version **/
-    compact?: boolean;
-    /** Show outlined version **/
-    outline?: boolean;
-    /** State will change the style of the badge **/
-    state?: State;
-};
-export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
-    /** Content should be a numerical value or tag/status like text **/
-    children: React.ReactNode;
-    /** Show compact version **/
-    compact?: boolean | undefined;
-    /** Show outlined version **/
-    outline?: boolean | undefined;
-    /** State will change the style of the badge **/
-    state?: "default" | "success" | "error" | "warning" | "information" | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Banner/Banner.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { State } from '../../types';
-export declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Content can be any react element, for e.g. a `div` */
-    children: React.ReactNode;
-    /** State will change the icon displayed in banner */
-    state: State;
-    onClose?: () => void;
-};
-export declare const Banner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    /** Content can be any react element, for e.g. a `div` */
-    children: React.ReactNode;
-    /** State will change the icon displayed in banner */
-    state: State;
-    onClose?: (() => void) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Banner/util.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { State } from '../../types';
-export declare const getBannerIcon: (type: State) => JSX.Element | null;