@economic/taco 0.0.33-alpha.6 → 1.0.0-alpha.0

package/dist/index.css

@@ -1,665 +1,665 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
-
-    html {
-        @apply font-display h-screen;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-    }
-
-    body {
-        @apply h-screen bg-white text-sm leading-5 text-black;
-    }
-
-    blockquote,
-    dl,
-    dd,
-    hr,
-    figure,
-    p,
-    pre,
-    ol,
-    ul,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        max-width: 100ch;
-    }
-
-    blockquote,
-    dl,
-    dd,
-    hr,
-    figure,
-    p,
-    pre,
-    ol,
-    ul {
-        @apply mb-12;
-    }
-
-    ol ol,
-    ul ul,
-    ol ul,
-    ul ol {
-        @apply mb-0;
-    }
-
-    ul.list-disc,
-    ul.list-decimal,
-    ul.list-circle,
-    ol.list-disc,
-    ol.list-decimal,
-    ol.list-circle {
-        @apply pl-4;
-    }
-
-    dt {
-        @apply font-bold;
-    }
-
-    blockquote {
-        @apply pl-8;
-    }
-
-    hr {
-        @apply bg-grey-light my-5 flex h-px border-none;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        @apply font-normal;
-    }
-
-    h1 {
-        @apply mb-5 text-3xl;
-    }
-
-    h2 {
-        @apply mb-2 text-2xl;
-    }
-
-    h3 {
-        @apply mb-2 text-xl;
-    }
-
-    h4 {
-        @apply mb-1 text-base font-bold;
-    }
-
-    h5 {
-        @apply mb-1 text-sm font-bold;
-    }
-
-    h6 {
-        @apply mb-1 text-xs font-bold;
-    }
-
-    b,
-    strong {
-        @apply font-bold;
-    }
-
-    a {
-        @apply text-blue no-underline;
-    }
-
-    a:hover,
-    a:focus {
-        @apply text-blue-light;
-    }
-
-    a:active {
-        @apply text-blue-dark;
-    }
-
-    button::-moz-focus-inner {
-        @apply border-none;
-    }
-
-    input[type='search']::-webkit-search-decoration,
-    input[type='search']::-webkit-search-cancel-button,
-    input[type='search']::-webkit-search-results-button,
-    input[type='search']::-webkit-search-results-decoration {
-        -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;
-    }
-
-    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;
-    }
-
-    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;
-    }
-
-    table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
-        @apply flex-1 truncate p-2 text-center align-middle;
-    }
-
-    [data-radix-portal][aria-hidden] [data-taco='menu'],
-    [data-radix-portal][aria-hidden] [data-taco='hanger'] {
-        display: none;
-        opacity: 0;
-    }
-
-    @keyframes fade-in {
-        from {
-            @apply opacity-0;
-        }
-        to {
-            @apply opacity-100;
-        }
-    }
-}
-
-[data-taco='badge'] > [data-taco='spinner'] {
-    @apply h-3 w-3 ml-2;
-}
-
-[data-taco='badge'] > [data-taco='spinner'] svg circle {
-    stroke-width: 15px;
-}
-
-[data-taco='badge'] > * {
-    @apply max-h-full p-0;
-}
-
-[data-taco='button'] > [data-taco='icon'] {
-    @apply pointer-events-none -ml-2 -mt-2 -mb-2 inline p-px;
-}
-
-[data-taco='button'] > * + [data-taco='icon'] {
-    @apply -mr-2 ml-0;
-}
-
-[data-taco='spinner'] svg circle {
-    @apply flex;
-    fill: transparent;
-    stroke-width: 10px;
-    animation: spinnerAnimation 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite both;
-    transform-origin: 50% 50%;
-    stroke-linecap: round;
-    stroke-dasharray: 282.743343;
-    stroke-dashoffset: 67.85840232;
-    stroke: theme('colors.blue.DEFAULT');
-}
-
-@keyframes spinnerAnimation {
-    0% {
-        stroke-dashoffset: 237.50440812;
-        transform: rotate(0);
-    }
-    50% {
-        stroke-dashoffset: 67.85840232;
-        transform: rotate(45deg);
-    }
-    100% {
-        stroke-dashoffset: 237.50440812;
-        transform: rotate(1turn);
-    }
-}
-
-@keyframes spinnerRotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(1turn);
-    }
-}
-
-.yt-grey-solid [data-taco='spinner'] svg circle,
-.yt-yellow-solid [data-taco='spinner'] svg circle {
-    stroke: theme('colors.grey.darkest');
-}
-
-.yt-blue-solid [data-taco='spinner'] svg circle,
-.yt-green-solid [data-taco='spinner'] svg circle,
-.yt-red-solid [data-taco='spinner'] svg circle {
-    stroke: theme('colors.white');
-}
-
-.yt-blue-inverted svg circle {
-    stroke: theme('colors.blue.DEFAULT');
-}
-
-.yt-yellow-inverted svg circle {
-    stroke: theme('colors.yellow.DEFAULT');
-}
-
-.yt-red-inverted svg circle {
-    stroke: theme('colors.red.DEFAULT');
-}
-
-.yt-green-inverted svg circle {
-    stroke: theme('colors.green.DEFAULT');
-}
-
-.yt-grey-inverted svg circle {
-    stroke: theme('colors.grey.darkest');
-}
-
-[data-taco='toast'] > div [data-taco='button'] {
-    @apply -mt-px py-0 px-2;
-}
-
-[data-taco='calendar'] .DayPicker-wrapper {
-    @apply relative select-none flex-row;
-}
-
-[data-taco='calendar'] .DayPicker-Months {
-    @apply flex flex-wrap justify-center;
-}
-
-[data-taco='calendar'] .DayPicker-Month {
-    @apply m-0 flex border-collapse select-none flex-col;
-}
-
-[data-taco='calendar'] .DayPicker-Weekdays {
-    @apply mt-2 flex;
-}
-
-[data-taco='calendar'] .DayPicker-WeekdaysRow {
-    @apply mb-2 flex w-full justify-between;
-}
-
-[data-taco='calendar'] .DayPicker-Weekday {
-    @apply text-grey-darkest flex-grow text-center uppercase;
-}
-
-[data-taco='calendar'] .DayPicker-Weekday abbr[title] {
-    @apply no-underline;
-}
-
-[data-taco='calendar'] .DayPicker-Body {
-    @apply flex flex-col;
-}
-
-[data-taco='calendar'] .DayPicker-Week {
-    @apply flex w-full justify-between;
-}
-
-[data-taco='calendar'] .DayPicker-Day {
-    @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-full;
-}
-
-[data-taco='calendar'] .DayPicker--interactionDisabled .DayPicker-Day {
-    @apply cursor-default;
-}
-
-[data-taco='calendar'] .DayPicker-Footer {
-    @apply pt-2 text-center;
-}
-
-[data-taco='calendar'] .DayPicker-TodayButton {
-    @apply text-blue cursor-pointer border-none bg-transparent text-xs;
-}
-
-[data-taco='calendar'] .DayPicker-TodayButton:hover {
-    @apply text-blue-light;
-}
-
-/* Default modifiers */
-
-[data-taco='calendar'] .DayPicker-Day--today {
-    @apply text-blue font-bold;
-}
-
-[data-taco='calendar'] .DayPicker-Day--outside {
-    @apply text-grey-dark cursor-default;
-}
-
-[data-taco='calendar'] .DayPicker-Day--disabled {
-    @apply text-grey-dark pointer-events-none w-4 cursor-default;
-}
-
-[data-taco='calendar'] .DayPicker-Day--disabled > span.dot {
-    @apply bg-grey inline-block rounded-full p-2;
-}
-
-[data-taco='calendar'] .icon:hover,
-[data-taco='calendar']:not(.DayPicker--interactionDisabled)
-    .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;
-}
-
-[data-taco='calendar'] .calendar-caption {
-    @apply font-semibold;
-}
-
-[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! */
-}
-
-[data-taco='scrollable-list'] li > [data-taco='icon'] {
-    @apply mr-2;
-}
-
-[data-taco='scrollable-list']:not([readonly]) li:hover {
-    @apply wcag-blue-light;
-}
-
-[data-taco='scrollable-list']:not([readonly]) li:hover [data-taco='icon'] {
-    @apply wcag-blue-light;
-}
-
-[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;
-}
-
-[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;
-}
-
-[data-taco='scrollable-list'][readonly] li {
-    @apply cursor-not-allowed;
-}
-
-[data-taco='scrollable-list'] li[disabled],
-[data-taco='scrollable-list'][disabled] li[aria-selected='true'] {
-    @apply cursor-not-allowed text-black text-opacity-25;
-}
-
-[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 overflow-hidden bg-white italic;
-}
-
-[data-taco='scrollable-list'] li.yt-list__empty [data-taco='spinner'] {
-    @apply mr-2 mt-2 h-5 w-5 opacity-75;
-}
-
-[data-taco='combobox'] [role='dialog'] {
-    @apply z-50;
-}
-
-[data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul,
-[data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul:hover {
-    @apply border-blue;
-}
-
-.yt-dialog__drag::before,
-.yt-dialog__drag::after {
-    @apply bg-grey-dark absolute rounded;
-    content: '';
-    left: theme('spacing.1');
-    height: 2px;
-    width: calc(100% - (2 * theme('spacing.1')));
-}
-
-.yt-dialog__drag::before {
-    top: 3px;
-}
-
-.yt-dialog__drag::after {
-    bottom: 3px;
-}
-
-/* label inside label is invalid html, but the client is littered with it */
-[data-taco='label'] [data-taco='label'] {
-    min-height: 0;
-}
-
-.yt-form > [data-taco='button'] {
-    @apply mr-3;
-}
-
-.yt-form.yt-form--horizontal > * {
-    @apply mr-3 inline-flex;
-}
-
-.yt-form.yt-form--horizontal > *:last-child {
-    @apply mr-0;
-}
-
-.yt-form.yt-form--horizontal > [data-taco='button'] {
-    @apply mt-6;
-}
-
-[data-taco='group'] > [data-taco='badge'] + [data-taco='badge'] {
-    @apply ml-1;
-}
-
-[data-taco='group'] > *:not(:first-child):not([data-taco='hanger']) {
-    @apply ml-2;
-}
-
-[data-taco='hanger'] a {
-    @apply text-grey underline;
-}
-
-[data-taco='hanger'] > *:last-child {
-    @apply mb-0;
-}
-
-.yt-navigation__item a,
-.yt-navigation__item .yt-navigation__item__postfix {
-    @apply text-black;
-}
-
-.yt-navigation__item .yt-navigation__item__prefix [data-taco='icon'] {
-    @apply -mt-1 -mb-1 text-xs;
-    margin-left: -0.375rem;
-    margin-right: 0.15rem;
-}
-
-.yt-navigation__item:hover,
-.yt-navigation__item:hover a,
-.yt-navigation__item:hover .yt-navigation__item__postfix,
-.yt-navigation__item--active,
-.yt-navigation__item--active a,
-.yt-navigation__item--active .yt-navigation__item__postfix {
-    @apply text-blue;
-}
-
-.yt-navigation__item--dropping,
-.yt-navigation__item--dropping a,
-.yt-navigation__item--dropping .yt-navigation__item__postfix {
-    @apply text-white;
-}
-
-.yt-navigation__item:hover .yt-navigation__item__postfix [data-taco='badge']:not(.h-2),
-.yt-navigation__item--active .yt-navigation__item__postfix [data-taco='badge']:not(.h-2) {
-    @apply yt-blue-inverted;
-}
-
-.yt-navigation__item--dropping > * {
-    @apply pointer-events-none;
-}
-
-.yt-navigation__item--dropping .yt-navigation__item__postfix [data-taco='badge'] {
-    @apply border-white text-white;
-}
-
-.yt-toast:hover [data-taco='progress-bar'] {
-    animation-play-state: paused;
-}
-
-@keyframes progress {
-    from {
-        width: 100%;
-    }
-    to {
-        width: 0%;
-    }
-}
-
-@keyframes progress-indeterminate {
-    0% {
-        margin-left: 0px;
-        margin-right: 100%;
-    }
-    50% {
-        margin-left: 25%;
-        margin-right: 0%;
-    }
-    100% {
-        margin-left: 100%;
-        margin-right: 0;
-    }
-}
-
-/* rows */
-.yt-table__row {
-    @apply border-grey-light flex border-b;
-    min-height: 2.5rem;
-}
-
-/* cells */
-.yt-table__cell > [data-taco='button'],
-.yt-table__cell > [data-taco='icon-button'] {
-    @apply -mt-1 -mb-1 flex;
-}
-
-.yt-table__row.yt-table__row--dragging .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
-    @apply text-white;
-}
-
-.yt-table__cell.yt-table__cell--draggable [data-taco='icon']:active {
-    @apply cursor-grabbing;
-}
-
-.yt-table__row:hover .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
-    @apply visible;
-}
-
-/* head */
-.yt-table__head .yt-table__row {
-    @apply h-auto w-full select-none border-t-0 border-b-2 font-bold;
-}
-
-.yt-table__head .yt-table__head__group {
-    @apply flex flex-1 flex-wrap;
-}
-
-.yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
-    @apply border-grey-light border-b;
-    flex-basis: 100%;
-}
-
-.yt-table__head .yt-table__head__group + .yt-table__head__group {
-    @apply border-grey-light border-l;
-}
-
-.yt-table__head .yt-table__cell > [data-taco='icon'] {
-    @apply flex-shrink-0;
-}
-
-.yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
-    @apply border-grey-light border-l-2;
-}
-
-.yt-table.yt-table--windowed.table-with-scrollbar .yt-table__head {
-    padding-right: 14px;
-}
-
-/* body */
-
-.yt-table__body .yt-table__row:first-child {
-    @apply border-t-0;
-}
-
-.yt-table__body .yt-table__row.yt-table__row--clickable:hover,
-.yt-table__body .yt-table__row.yt-table__row--clickable.yt-table__row--active:hover {
-    @apply cursor-pointer;
-}
-
-.yt-table__body .yt-table__row.yt-table__row__unselectable:hover,
-.yt-table__body .yt-table__row.yt-table__row__unselectable.yt-table__row--active:hover {
-    @apply cursor-default;
-}
-
-.yt-table__body .yt-table__row.yt-table__row--active {
-    @apply bg-grey-light;
-}
-
-.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;
-}
-
-/* edit */
-.yt-table__body .yt-table__row.yt-table__row--editing {
-    @apply border-grey 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;
-}
-
-.yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell {
-    @apply overflow-visible;
-    overflow-wrap: normal;
-}
-
-.yt-table__cell [data-taco='label'] {
-    @apply -my-2 pb-0 text-transparent;
-    min-height: theme('spacing.10');
-}
-
-.yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
-    @apply mt-1;
-}
-
-.yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
-    @apply -mt-5;
-}
-
-.yt-table__cell [data-taco='label'] > [data-taco='label']__message {
-    @apply mb-1;
-}
-
-/* drag */
-#yt-table__drag__placeholder {
-    @apply bg-blue flex w-3/12 rounded p-4 font-bold text-white;
-}
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] {
-    @apply m-0 mr-4 flex-col border-0 border-r;
-}
-
-.yt-tabs .yt-tab__list .yt-tab[aria-selected='true'] {
-    @apply border-blue text-black;
-}
-
-.yt-tabs.yt-tabs--vertical .yt-tab__list {
-    @apply flex-initial;
-}
-
-.yt-tabs.yt-tabs--vertical .yt-tab__panel {
-    @apply flex-grow;
-}
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
-    @apply rounded-none rounded-l border-0 border-r-2;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    html {
+        @apply font-display h-screen;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    }
+
+    body {
+        @apply h-screen bg-white text-sm leading-5 text-black;
+    }
+
+    blockquote,
+    dl,
+    dd,
+    hr,
+    figure,
+    p,
+    pre,
+    ol,
+    ul,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        max-width: 100ch;
+    }
+
+    blockquote,
+    dl,
+    dd,
+    hr,
+    figure,
+    p,
+    pre,
+    ol,
+    ul {
+        @apply mb-12;
+    }
+
+    ol ol,
+    ul ul,
+    ol ul,
+    ul ol {
+        @apply mb-0;
+    }
+
+    ul.list-disc,
+    ul.list-decimal,
+    ul.list-circle,
+    ol.list-disc,
+    ol.list-decimal,
+    ol.list-circle {
+        @apply pl-4;
+    }
+
+    dt {
+        @apply font-bold;
+    }
+
+    blockquote {
+        @apply pl-8;
+    }
+
+    hr {
+        @apply bg-grey-light my-5 flex h-px border-none;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply font-normal;
+    }
+
+    h1 {
+        @apply mb-5 text-3xl;
+    }
+
+    h2 {
+        @apply mb-2 text-2xl;
+    }
+
+    h3 {
+        @apply mb-2 text-xl;
+    }
+
+    h4 {
+        @apply mb-1 text-base font-bold;
+    }
+
+    h5 {
+        @apply mb-1 text-sm font-bold;
+    }
+
+    h6 {
+        @apply mb-1 text-xs font-bold;
+    }
+
+    b,
+    strong {
+        @apply font-bold;
+    }
+
+    a {
+        @apply text-blue no-underline;
+    }
+
+    a:hover,
+    a:focus {
+        @apply text-blue-light;
+    }
+
+    a:active {
+        @apply text-blue-dark;
+    }
+
+    button::-moz-focus-inner {
+        @apply border-none;
+    }
+
+    input[type='search']::-webkit-search-decoration,
+    input[type='search']::-webkit-search-cancel-button,
+    input[type='search']::-webkit-search-results-button,
+    input[type='search']::-webkit-search-results-decoration {
+        -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;
+    }
+
+    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;
+    }
+
+    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;
+    }
+
+    table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
+        @apply flex-1 truncate p-2 text-center align-middle;
+    }
+
+    [data-radix-portal][aria-hidden] [data-taco='menu'],
+    [data-radix-portal][aria-hidden] [data-taco='hanger'] {
+        display: none;
+        opacity: 0;
+    }
+
+    @keyframes fade-in {
+        from {
+            @apply opacity-0;
+        }
+        to {
+            @apply opacity-100;
+        }
+    }
+}
+
+[data-taco='badge'] > [data-taco='spinner'] {
+    @apply h-3 w-3 ml-2;
+}
+
+[data-taco='badge'] > [data-taco='spinner'] svg circle {
+    stroke-width: 15px;
+}
+
+[data-taco='badge'] > * {
+    @apply max-h-full p-0;
+}
+
+[data-taco='button'] > [data-taco='icon'] {
+    @apply pointer-events-none -ml-2 -mt-2 -mb-2 inline p-px;
+}
+
+[data-taco='button'] > * + [data-taco='icon'] {
+    @apply -mr-2 ml-0;
+}
+
+[data-taco='spinner'] svg circle {
+    @apply flex;
+    fill: transparent;
+    stroke-width: 10px;
+    animation: spinnerAnimation 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite both;
+    transform-origin: 50% 50%;
+    stroke-linecap: round;
+    stroke-dasharray: 282.743343;
+    stroke-dashoffset: 67.85840232;
+    stroke: theme('colors.blue.DEFAULT');
+}
+
+@keyframes spinnerAnimation {
+    0% {
+        stroke-dashoffset: 237.50440812;
+        transform: rotate(0);
+    }
+    50% {
+        stroke-dashoffset: 67.85840232;
+        transform: rotate(45deg);
+    }
+    100% {
+        stroke-dashoffset: 237.50440812;
+        transform: rotate(1turn);
+    }
+}
+
+@keyframes spinnerRotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(1turn);
+    }
+}
+
+.yt-grey-solid [data-taco='spinner'] svg circle,
+.yt-yellow-solid [data-taco='spinner'] svg circle {
+    stroke: theme('colors.grey.darkest');
+}
+
+.yt-blue-solid [data-taco='spinner'] svg circle,
+.yt-green-solid [data-taco='spinner'] svg circle,
+.yt-red-solid [data-taco='spinner'] svg circle {
+    stroke: theme('colors.white');
+}
+
+.yt-blue-inverted svg circle {
+    stroke: theme('colors.blue.DEFAULT');
+}
+
+.yt-yellow-inverted svg circle {
+    stroke: theme('colors.yellow.DEFAULT');
+}
+
+.yt-red-inverted svg circle {
+    stroke: theme('colors.red.DEFAULT');
+}
+
+.yt-green-inverted svg circle {
+    stroke: theme('colors.green.DEFAULT');
+}
+
+.yt-grey-inverted svg circle {
+    stroke: theme('colors.grey.darkest');
+}
+
+[data-taco='toast'] > div [data-taco='button'] {
+    @apply -mt-px py-0 px-2;
+}
+
+[data-taco='calendar'] .DayPicker-wrapper {
+    @apply relative select-none flex-row;
+}
+
+[data-taco='calendar'] .DayPicker-Months {
+    @apply flex flex-wrap justify-center;
+}
+
+[data-taco='calendar'] .DayPicker-Month {
+    @apply m-0 flex border-collapse select-none flex-col;
+}
+
+[data-taco='calendar'] .DayPicker-Weekdays {
+    @apply mt-2 flex;
+}
+
+[data-taco='calendar'] .DayPicker-WeekdaysRow {
+    @apply mb-2 flex w-full justify-between;
+}
+
+[data-taco='calendar'] .DayPicker-Weekday {
+    @apply text-grey-darkest flex-grow text-center uppercase;
+}
+
+[data-taco='calendar'] .DayPicker-Weekday abbr[title] {
+    @apply no-underline;
+}
+
+[data-taco='calendar'] .DayPicker-Body {
+    @apply flex flex-col;
+}
+
+[data-taco='calendar'] .DayPicker-Week {
+    @apply flex w-full justify-between;
+}
+
+[data-taco='calendar'] .DayPicker-Day {
+    @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-full;
+}
+
+[data-taco='calendar'] .DayPicker--interactionDisabled .DayPicker-Day {
+    @apply cursor-default;
+}
+
+[data-taco='calendar'] .DayPicker-Footer {
+    @apply pt-2 text-center;
+}
+
+[data-taco='calendar'] .DayPicker-TodayButton {
+    @apply text-blue cursor-pointer border-none bg-transparent text-xs;
+}
+
+[data-taco='calendar'] .DayPicker-TodayButton:hover {
+    @apply text-blue-light;
+}
+
+/* Default modifiers */
+
+[data-taco='calendar'] .DayPicker-Day--today {
+    @apply text-blue font-bold;
+}
+
+[data-taco='calendar'] .DayPicker-Day--outside {
+    @apply text-grey-dark cursor-default;
+}
+
+[data-taco='calendar'] .DayPicker-Day--disabled {
+    @apply text-grey-dark pointer-events-none w-4 cursor-default;
+}
+
+[data-taco='calendar'] .DayPicker-Day--disabled > span.dot {
+    @apply bg-grey inline-block rounded-full p-2;
+}
+
+[data-taco='calendar'] .icon:hover,
+[data-taco='calendar']:not(.DayPicker--interactionDisabled)
+    .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;
+}
+
+[data-taco='calendar'] .calendar-caption {
+    @apply font-semibold;
+}
+
+[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! */
+}
+
+[data-taco='scrollable-list'] li > [data-taco='icon'] {
+    @apply mr-2;
+}
+
+[data-taco='scrollable-list']:not([readonly]) li:hover {
+    @apply wcag-blue-light;
+}
+
+[data-taco='scrollable-list']:not([readonly]) li:hover [data-taco='icon'] {
+    @apply wcag-blue-light;
+}
+
+[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;
+}
+
+[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;
+}
+
+[data-taco='scrollable-list'][readonly] li {
+    @apply cursor-not-allowed;
+}
+
+[data-taco='scrollable-list'] li[disabled],
+[data-taco='scrollable-list'][disabled] li[aria-selected='true'] {
+    @apply cursor-not-allowed text-black text-opacity-25;
+}
+
+[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;
+}
+
+[data-taco='scrollable-list'] li.yt-list__empty [data-taco='spinner'] {
+    @apply mr-2 mt-2 h-5 w-5 opacity-75;
+}
+
+[data-taco='combobox'] [role='dialog'] {
+    @apply z-50;
+}
+
+[data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul,
+[data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul:hover {
+    @apply border-blue;
+}
+
+.yt-dialog__drag::before,
+.yt-dialog__drag::after {
+    @apply bg-grey-dark absolute rounded;
+    content: '';
+    left: theme('spacing.1');
+    height: 2px;
+    width: calc(100% - (2 * theme('spacing.1')));
+}
+
+.yt-dialog__drag::before {
+    top: 3px;
+}
+
+.yt-dialog__drag::after {
+    bottom: 3px;
+}
+
+/* label inside label is invalid html, but the client is littered with it */
+[data-taco='label'] [data-taco='label'] {
+    min-height: 0;
+}
+
+.yt-form > [data-taco='button'] {
+    @apply mr-3;
+}
+
+.yt-form.yt-form--horizontal > * {
+    @apply mr-3 inline-flex;
+}
+
+.yt-form.yt-form--horizontal > *:last-child {
+    @apply mr-0;
+}
+
+.yt-form.yt-form--horizontal > [data-taco='button'] {
+    @apply mt-6;
+}
+
+[data-taco='group'] > [data-taco='badge'] + [data-taco='badge'] {
+    @apply ml-1;
+}
+
+[data-taco='group'] > *:not(:first-child):not([data-taco='hanger']) {
+    @apply ml-2;
+}
+
+[data-taco='hanger'] a {
+    @apply text-grey underline;
+}
+
+[data-taco='hanger'] > *:last-child {
+    @apply mb-0;
+}
+
+.yt-navigation__item a,
+.yt-navigation__item .yt-navigation__item__postfix {
+    @apply text-black;
+}
+
+.yt-navigation__item .yt-navigation__item__prefix [data-taco='icon'] {
+    @apply -mt-1 -mb-1 text-xs;
+    margin-left: -0.375rem;
+    margin-right: 0.15rem;
+}
+
+.yt-navigation__item:hover,
+.yt-navigation__item:hover a,
+.yt-navigation__item:hover .yt-navigation__item__postfix,
+.yt-navigation__item--active,
+.yt-navigation__item--active a,
+.yt-navigation__item--active .yt-navigation__item__postfix {
+    @apply text-blue;
+}
+
+.yt-navigation__item--dropping,
+.yt-navigation__item--dropping a,
+.yt-navigation__item--dropping .yt-navigation__item__postfix {
+    @apply text-white;
+}
+
+.yt-navigation__item:hover .yt-navigation__item__postfix [data-taco='badge']:not(.h-2),
+.yt-navigation__item--active .yt-navigation__item__postfix [data-taco='badge']:not(.h-2) {
+    @apply yt-blue-inverted;
+}
+
+.yt-navigation__item--dropping > * {
+    @apply pointer-events-none;
+}
+
+.yt-navigation__item--dropping .yt-navigation__item__postfix [data-taco='badge'] {
+    @apply border-white text-white;
+}
+
+.yt-toast:hover [data-taco='progress-bar'] {
+    animation-play-state: paused;
+}
+
+@keyframes progress {
+    from {
+        width: 100%;
+    }
+    to {
+        width: 0%;
+    }
+}
+
+@keyframes progress-indeterminate {
+    0% {
+        margin-left: 0px;
+        margin-right: 100%;
+    }
+    50% {
+        margin-left: 25%;
+        margin-right: 0%;
+    }
+    100% {
+        margin-left: 100%;
+        margin-right: 0;
+    }
+}
+
+/* rows */
+.yt-table__row {
+    @apply border-grey-light flex border-b;
+    min-height: 2.5rem;
+}
+
+/* cells */
+.yt-table__cell > [data-taco='button'],
+.yt-table__cell > [data-taco='icon-button'] {
+    @apply -mt-1 -mb-1 flex;
+}
+
+.yt-table__row.yt-table__row--dragging .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
+    @apply text-white;
+}
+
+.yt-table__cell.yt-table__cell--draggable [data-taco='icon']:active {
+    @apply cursor-grabbing;
+}
+
+.yt-table__row:hover .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
+    @apply visible;
+}
+
+/* head */
+.yt-table__head .yt-table__row {
+    @apply h-auto w-full select-none border-t-0 border-b-2 font-bold;
+}
+
+.yt-table__head .yt-table__head__group {
+    @apply flex flex-1 flex-wrap;
+}
+
+.yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
+    @apply border-grey-light border-b;
+    flex-basis: 100%;
+}
+
+.yt-table__head .yt-table__head__group + .yt-table__head__group {
+    @apply border-grey-light border-l;
+}
+
+.yt-table__head .yt-table__cell > [data-taco='icon'] {
+    @apply flex-shrink-0;
+}
+
+.yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
+    @apply border-grey-light border-l-2;
+}
+
+.yt-table.yt-table--windowed.table-with-scrollbar .yt-table__head {
+    padding-right: 14px;
+}
+
+/* body */
+
+.yt-table__body .yt-table__row:first-child {
+    @apply border-t-0;
+}
+
+.yt-table__body .yt-table__row.yt-table__row--clickable:hover,
+.yt-table__body .yt-table__row.yt-table__row--clickable.yt-table__row--active:hover {
+    @apply cursor-pointer;
+}
+
+.yt-table__body .yt-table__row.yt-table__row__unselectable:hover,
+.yt-table__body .yt-table__row.yt-table__row__unselectable.yt-table__row--active:hover {
+    @apply cursor-default;
+}
+
+.yt-table__body .yt-table__row.yt-table__row--active {
+    @apply bg-grey-light;
+}
+
+.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;
+}
+
+/* edit */
+.yt-table__body .yt-table__row.yt-table__row--editing {
+    @apply border-grey 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;
+}
+
+.yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell {
+    @apply overflow-visible;
+    overflow-wrap: normal;
+}
+
+.yt-table__cell [data-taco='label'] {
+    @apply -my-2 pb-0 text-transparent;
+    min-height: theme('spacing.10');
+}
+
+.yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
+    @apply mt-1;
+}
+
+.yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
+    @apply -mt-5;
+}
+
+.yt-table__cell [data-taco='label'] > [data-taco='label']__message {
+    @apply mb-1;
+}
+
+/* drag */
+#yt-table__drag__placeholder {
+    @apply bg-blue flex w-3/12 rounded p-4 font-bold text-white;
+}
+
+.yt-tabs .yt-tab__list[aria-orientation='vertical'] {
+    @apply m-0 mr-4 flex-col border-0 border-r;
+}
+
+.yt-tabs .yt-tab__list .yt-tab[aria-selected='true'] {
+    @apply border-blue text-black;
+}
+
+.yt-tabs.yt-tabs--vertical .yt-tab__list {
+    @apply flex-initial;
+}
+
+.yt-tabs.yt-tabs--vertical .yt-tab__panel {
+    @apply flex-grow;
+}
+
+.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
+    @apply rounded-none rounded-l border-0 border-r-2;
+}