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

package/dist/components/Navigation/Navigation.d.ts

@@ -26,12 +26,12 @@ export declare type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {
 export declare type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;
 export declare type NavigationMenuGroupProps = TreeviewGroupProps;
 export declare type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;
-export declare type FowardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLDivElement>> & {
+export declare type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLDivElement>> & {
     /** Expandable region reprezenting a group of related links */
     Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
 };
 export declare type NavigationProps = React.HTMLAttributes<HTMLDivElement>;
-export declare type FowardedNavigationWithStatics = React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>> & {
+export declare type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>> & {
     /** Navigation link */
     Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;
     /**
@@ -39,7 +39,7 @@ export declare type FowardedNavigationWithStatics = React.ForwardRefExoticCompon
      * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.
      * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`
      */
-    Menu: FowardedNavigationMenuWithStatics;
+    Menu: ForwardedNavigationMenuWithStatics;
     /**
      * Isolated container within the Navigation.
      * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,
@@ -47,4 +47,4 @@ export declare type FowardedNavigationWithStatics = React.ForwardRefExoticCompon
      */
     Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;
 };
-export declare const Navigation: FowardedNavigationWithStatics;
+export declare const Navigation: ForwardedNavigationWithStatics;

package/dist/components/Popover/Popover.d.ts

@@ -11,13 +11,9 @@ export declare type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivEleme
 };
 export declare type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;
 export declare type PopoverProps = React.PropsWithChildren<{}>;
-export declare const Popover: {
-    (props: PopoverProps): JSX.Element;
-    Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
-        children: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | Iterable<React.ReactNode> | React.ReactPortal | ((props: PopoverContentRenderProps) => React.ReactNode) | null | undefined;
-        /** Set the position of the Popover relative to its trigger. Default value is `bottom` */
-        placement?: "right" | "left" | "top" | "bottom" | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Close: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {
+    Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;
+    Content: React.ForwardRefExoticComponent<PopoverContentProps>;
+    Close: React.ForwardRefExoticComponent<PopoverCloseProps>;
 };
+export declare const Popover: ForwardedPopoverWithStatics;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -36,7 +36,7 @@ interface ControlledRadioGroupProps extends RadioGroupBaseProps {
     value: RadioGroupItemValue;
 }
 export declare type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;
-export declare type FowardedRadioGroupWithStatics = React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>> & {
+export declare type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>> & {
     /** Item component rendered in a `RadioGroup` component */
     Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;
 };
@@ -47,5 +47,5 @@ export declare const useRadioGroup: (props: RadioGroupProps) => {
     };
     props: any;
 };
-export declare const RadioGroup: FowardedRadioGroupWithStatics;
+export declare const RadioGroup: ForwardedRadioGroupWithStatics;
 export {};

package/dist/components/Select/Select.d.ts

@@ -14,6 +14,8 @@ export declare type BaseSelectProps = ListboxProps & Omit<ComboboxProps, 'inline
      * All the selected values will be combined in a comma-seperated string as the value of the input.
      */
     multiselect?: boolean;
+    /** Optionally shows the icon for the selected option */
+    showSelectedIcon?: boolean;
 };
 export declare type SelectProps = BaseSelectProps & {
     /**
@@ -38,6 +40,8 @@ export declare const Select: React.ForwardRefExoticComponent<Pick<React.InputHTM
      * All the selected values will be combined in a comma-seperated string as the value of the input.
      */
     multiselect?: boolean | undefined;
+    /** Optionally shows the icon for the selected option */
+    showSelectedIcon?: boolean | undefined;
 } & {
     /**
      * Creates an editable select.

package/dist/components/Select/useSelect.d.ts

@@ -11,5 +11,5 @@ declare type useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {
     text: string | JSX.Element;
     more?: number;
 };
-export declare const useSelect: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data, disabled, emptyValue, id: nativeId, multiselect, onClick, readOnly, value, ...otherProps }: SelectProps, ref: React.Ref<HTMLInputElement>) => useSelect;
+export declare const useSelect: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data, disabled, emptyValue, id: nativeId, multiselect, onClick, readOnly, showSelectedIcon, value, ...otherProps }: SelectProps, ref: React.Ref<HTMLInputElement>) => useSelect;
 export {};

package/dist/components/Table/Table.storyexample.d.ts

@@ -1,6 +1,6 @@
 export default function LocationsTable({ component: Table, allowNew, data: initialData, onRowSave, onReset, showAddress, ...props }: {
     [x: string]: any;
-    component?: import("./types").FowardedGenericTableWithStatics | undefined;
+    component?: import("./types").ForwardedGenericTableWithStatics | undefined;
     allowNew?: boolean | undefined;
     data: any;
     onRowSave?: (() => undefined) | undefined;

package/dist/components/Table/components/PaginatedTable.d.ts

@@ -1,2 +1,2 @@
-import { FowardedGenericTableWithStatics } from '../types';
-export declare const PaginatedTable: FowardedGenericTableWithStatics;
+import { ForwardedGenericTableWithStatics } from '../types';
+export declare const PaginatedTable: ForwardedGenericTableWithStatics;

package/dist/components/Table/components/Table.d.ts

@@ -1,2 +1,2 @@
-import { FowardedGenericTableWithStatics } from '../types';
-export declare const Table: FowardedGenericTableWithStatics;
+import { ForwardedGenericTableWithStatics } from '../types';
+export declare const Table: ForwardedGenericTableWithStatics;

package/dist/components/Table/components/WindowedTable.d.ts

@@ -1,2 +1,2 @@
-import { FowardedGenericTableWithStatics } from '../types';
-export declare const WindowedTable: FowardedGenericTableWithStatics;
+import { ForwardedGenericTableWithStatics } from '../types';
+export declare const WindowedTable: ForwardedGenericTableWithStatics;

package/dist/components/Table/types.d.ts

@@ -136,7 +136,7 @@ export declare type TableProps<TRow> = React.HTMLAttributes<HTMLDivElement> & {
     autoFocus?: boolean;
     /**
      * Children should be one of the Table's components.
-     * Read about `FowardedGenericTableWithStatics` for more details.
+     * Read about `ForwardedGenericTableWithStatics` for more details.
      * *Note* that there can also be children that are rendered conditionally
      */
     children: TableChildren<TRow>;
@@ -229,7 +229,7 @@ export declare type TableRef = HTMLDivElement & {
         toggleSortBy: any;
     };
 };
-export declare type FowardedGenericTableWithStatics = React.ForwardRefExoticComponent<TableProps<any> & React.RefAttributes<HTMLDivElement>> & {
+export declare type ForwardedGenericTableWithStatics = React.ForwardRefExoticComponent<TableProps<any> & React.RefAttributes<HTMLDivElement>> & {
     /** Represents a column in your table */
     Column: <TRow>(props: TableColumnProps<TRow>) => JSX.Element | null;
     /**

package/dist/components/Tabs/Tabs.d.ts

@@ -44,7 +44,7 @@ export declare type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     id: string;
 };
-export declare type FowardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
+export declare type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
     /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */
     List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
     /** Tab trigger component rendered in a `Tabs.List` component */
@@ -52,4 +52,4 @@ export declare type FowardedTabsWithStatics = React.ForwardRefExoticComponent<Ta
     /** Tab content component rendered in a `Tabs` group component */
     Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;
 };
-export declare const Tabs: FowardedTabsWithStatics;
+export declare const Tabs: ForwardedTabsWithStatics;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -10,4 +10,14 @@ export declare type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     placement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare const Tooltip: ({ title, children, placement, ...otherProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */
+    children: React.ReactElement | any;
+    /** Text displayed in the tooltip */
+    title: string;
+    /**
+     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs
+     * @defaultValue bottom
+     */
+    placement?: "top" | "right" | "bottom" | "left" | undefined;
+} & React.RefAttributes<HTMLElement>>;

package/dist/components/Treeview/Treeview.d.ts

@@ -16,10 +16,10 @@ export declare type TreeviewGroupProps = Omit<React.LinkHTMLAttributes<HTMLDivEl
     title: React.ReactNode | ((expanded: boolean) => React.ReactNode);
 };
 export declare type TreeviewProps = React.HTMLAttributes<HTMLDivElement>;
-export declare type FowardedTreeviewWithStatics = React.ForwardRefExoticComponent<TreeviewProps & React.RefAttributes<HTMLDivElement>> & {
+export declare type ForwardedTreeviewWithStatics = React.ForwardRefExoticComponent<TreeviewProps & React.RefAttributes<HTMLDivElement>> & {
     /** Navigable link */
     Item: React.ForwardRefExoticComponent<TreeviewItemProps & React.RefAttributes<HTMLAnchorElement>>;
     /** Container for a set of related links, usually expandable */
     Group: React.ForwardRefExoticComponent<TreeviewGroupProps & React.RefAttributes<HTMLDivElement>>;
 };
-export declare const Treeview: FowardedTreeviewWithStatics;
+export declare const Treeview: ForwardedTreeviewWithStatics;

package/dist/esm/index.css

@@ -16,7 +16,7 @@
     }
 
     body {
-        @apply bg-white text-black text-sm leading-relaxed h-screen;
+        @apply h-screen bg-white text-sm leading-relaxed text-black;
     }
 
     blockquote,
@@ -74,7 +74,7 @@
     }
 
     hr {
-        @apply bg-grey-light border-none flex h-px my-5;
+        @apply bg-grey-light my-5 flex h-px border-none;
     }
 
     h1,
@@ -87,24 +87,24 @@
     }
 
     h1 {
-        @apply text-3xl mb-6;
+        @apply mb-6 text-3xl;
     }
 
     h2 {
-        @apply text-2xl mb-2;
+        @apply mb-2 text-2xl;
     }
 
     h3 {
-        @apply text-xl mb-2;
+        @apply mb-2 text-xl;
     }
 
     h4 {
-        @apply text-base font-bold mb-1;
+        @apply mb-1 text-base font-bold;
     }
 
     h5,
     h6 {
-        @apply font-bold mb-1;
+        @apply mb-1 font-bold;
     }
 
     b,
@@ -155,14 +155,6 @@
     @apply max-h-full p-0;
 }
 
-[data-taco='button'] > [data-taco='icon'] {
-    @apply inline -ml-2 mr-1 -mt-2 -mb-2 pointer-events-none p-px;
-}
-
-[data-taco='button'] > span + [data-taco='icon'] {
-    @apply ml-1 -mr-2;
-}
-
 [data-taco='spinner'] svg circle {
     @apply flex;
     fill: transparent;
@@ -231,11 +223,56 @@
 }
 
 [data-taco='toast'] > div [data-taco='button'] {
-    @apply py-0 px-2 -mt-px;
+    @apply -mt-px py-0 px-2;
+}
+
+[data-taco='hanger'] a {
+    @apply text-grey underline;
+}
+
+[data-taco='hanger'] > *:last-child {
+    @apply mb-0;
+}
+
+.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;
+}
+
+[data-taco='dialog'] *:last-child {
+    @apply mb-0;
+}
+
+[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='button'] > [data-taco='icon'] {
+    @apply pointer-events-none -ml-2 mr-1 -mt-2 -mb-2 inline p-px;
+}
+
+[data-taco='button'] > span + [data-taco='icon'] {
+    @apply ml-1 -mr-2;
 }
 
 [data-taco='calendar'] .DayPicker-wrapper {
-    @apply relative flex-row select-none;
+    @apply relative select-none flex-row;
 }
 
 [data-taco='calendar'] .DayPicker-Months {
@@ -243,19 +280,19 @@
 }
 
 [data-taco='calendar'] .DayPicker-Month {
-    @apply flex flex-col m-0 border-collapse select-none;
+    @apply m-0 flex border-collapse select-none flex-col;
 }
 
 [data-taco='calendar'] .DayPicker-Weekdays {
-    @apply flex mt-2;
+    @apply mt-2 flex;
 }
 
 [data-taco='calendar'] .DayPicker-WeekdaysRow {
-    @apply flex justify-between w-full mb-2;
+    @apply mb-2 flex w-full justify-between;
 }
 
 [data-taco='calendar'] .DayPicker-Weekday {
-    @apply text-grey-darkest text-center uppercase flex-grow;
+    @apply text-grey-darkest flex-grow text-center uppercase;
 }
 
 [data-taco='calendar'] .DayPicker-Weekday abbr[title] {
@@ -267,11 +304,11 @@
 }
 
 [data-taco='calendar'] .DayPicker-Week {
-    @apply flex justify-between w-full;
+    @apply flex w-full justify-between;
 }
 
 [data-taco='calendar'] .DayPicker-Day {
-    @apply h-10 w-10 flex items-center justify-center cursor-pointer rounded-full;
+    @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-full;
 }
 
 [data-taco='calendar'] .DayPicker--interactionDisabled .DayPicker-Day {
@@ -283,7 +320,7 @@
 }
 
 [data-taco='calendar'] .DayPicker-TodayButton {
-    @apply text-blue border-none bg-transparent text-xs cursor-pointer;
+    @apply text-blue cursor-pointer border-none bg-transparent text-xs;
 }
 
 [data-taco='calendar'] .DayPicker-TodayButton:hover {
@@ -301,11 +338,11 @@
 }
 
 [data-taco='calendar'] .DayPicker-Day--disabled {
-    @apply text-grey-dark cursor-default w-4 pointer-events-none;
+    @apply text-grey-dark pointer-events-none w-4 cursor-default;
 }
 
 [data-taco='calendar'] .DayPicker-Day--disabled > span.dot {
-    @apply bg-grey rounded-full inline-block p-2;
+    @apply bg-grey inline-block rounded-full p-2;
 }
 
 [data-taco='calendar'] .icon:hover,
@@ -377,7 +414,7 @@
 }
 
 .yt-combobox.yt-combobox--inline .yt-input__container > .yt-button {
-    @apply yt-transparent border-0 text-grey-darkest shadow-none;
+    @apply yt-transparent text-grey-darkest border-0 shadow-none;
 }
 
 .yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:hover,
@@ -395,41 +432,12 @@
     @apply border-blue;
 }
 
-.yt-dialog__drag::before,
-.yt-dialog__drag::after {
-    @apply absolute bg-grey-dark 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;
-}
-
-.yt-dialog *:last-child {
-    @apply mb-0;
-}
-
-[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;
-}
-
 .yt-form > [data-taco='button'] {
     @apply mr-3;
 }
 
 .yt-form.yt-form--horizontal > * {
-    @apply inline-flex mr-3;
+    @apply mr-3 inline-flex;
 }
 
 .yt-form.yt-form--horizontal > *:last-child {
@@ -440,21 +448,13 @@
     @apply mt-6;
 }
 
-[data-taco='hanger'] a {
-    @apply text-grey underline;
-}
-
-[data-taco='hanger'] > *:last-child {
-    @apply mb-0;
-}
-
 /* label inside label is invalid html, but the client is littered with it */
 [data-taco='label'] [data-taco='label'] {
     min-height: 0;
 }
 
 .yt-listbox {
-    @apply bg-white inline-flex relative w-full;
+    @apply relative inline-flex w-full bg-white;
 }
 
 .yt-listbox > input {
@@ -475,7 +475,7 @@
 }
 
 .yt-navigation__item .yt-navigation__item__prefix [data-taco='icon'] {
-    @apply text-xs -mt-1 -mb-1;
+    @apply -mt-1 -mb-1 text-xs;
     margin-left: -0.375rem;
     margin-right: 0.15rem;
 }
@@ -509,15 +509,15 @@
 }
 
 [data-taco='select'] > button.yt-input {
-    @apply inline-flex items-center relative w-full px-0;
+    @apply relative inline-flex w-full items-center px-0;
 }
 
 [data-taco='select'] > button.yt-input > span:first-child {
-    @apply flex-grow text-left pl-2 truncate;
+    @apply flex-grow truncate pl-2 text-left;
 }
 
 [data-taco='select'] > button.yt-input .yt-icon {
-    @apply pointer-events-none text-black;
+    @apply pointer-events-none;
 }
 
 [data-taco='select'] > button.yt-input[disabled] .yt-icon {
@@ -528,19 +528,13 @@
     @apply cursor-not-allowed;
 }
 
-[data-taco='select']:hover > button.yt-input .yt-icon,
-[data-taco='select'] > button.yt-input:hover .yt-icon,
-[data-taco='select'] > button.yt-input .yt-icon:hover {
-    @apply text-grey-darkest;
-}
-
 [data-taco='select'] > button.yt-input[aria-expanded='true'],
 [data-taco='select'] > button.yt-input[aria-expanded='true']:hover {
     @apply border-blue;
 }
 
 [data-taco='select'] > button.yt-input[aria-expanded='true'] + .yt-listbox {
-    @apply flex mt-1;
+    @apply mt-1 flex;
 }
 
 [data-taco='select'] [role='dialog'] {
@@ -584,81 +578,73 @@
 }
 
 .yt-table:focus {
-    @apply rounded-sm yt-focus;
+    @apply yt-focus rounded-sm;
 }
 
 /* rows */
 .yt-table__row {
-    @apply border-b border-grey-light flex;
+    @apply border-grey-light flex border-b;
     min-height: 2.5rem;
 }
 
 /* cells */
 .yt-table__cell {
-    @apply flex-1 p-2 align-middle text-center truncate;
+    @apply flex-1 truncate p-2 text-center align-middle;
 }
 
-.yt-table__cell.yt-table__cell__actions {
-    @apply flex justify-end px-1 overflow-visible;
-}
-
-.yt-table__cell > .yt-button,
-.yt-table__cell .yt-group > .yt-button {
-    @apply -mt-1 -mb-1;
-}
-
-.yt-table__cell.yt-table__cell__actions .yt-group > *:not(:first-child):not(.yt-hanger):not(.yt-menu) {
-    @apply ml-0;
+.yt-table__cell > [data-taco='button'],
+.yt-table__cell > [data-taco='icon-button'] {
+    @apply -mt-1 -mb-1 flex;
 }
 
 .yt-table__cell.yt-table__cell--draggable {
     @apply flex-col px-0;
 }
 
-.yt-table__cell.yt-table__cell--draggable .yt-icon {
-    @apply cursor-grab invisible text-grey-darkest;
+.yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
+    @apply text-grey-darkest invisible cursor-grab;
     width: 20px;
 }
 
-.yt-table__row.yt-table__row--dragging .yt-table__cell.yt-table__cell--draggable .yt-icon {
+.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 .yt-icon:active {
+.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 .yt-icon {
+.yt-table__row:hover .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
     @apply visible;
 }
 
 /* head */
 .yt-table__head .yt-table__row {
-    @apply border-t-0 border-b-2 font-bold h-auto w-full select-none;
+    @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-wrap flex-1;
+    @apply flex flex-1 flex-wrap;
 }
 
 .yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
-    @apply border-b border-grey-light;
+    @apply border-grey-light border-b;
     flex-basis: 100%;
 }
 
 .yt-table__head .yt-table__head__group + .yt-table__head__group {
-    @apply border-l border-grey-light;
+    @apply border-grey-light border-l;
 }
 
 .yt-table__head .yt-table__cell {
-    @apply flex text-grey-darkest justify-center;
+    @apply text-grey-darkest flex justify-center;
 }
 
 .yt-table__head .yt-table__cell > span {
     @apply truncate;
 }
 
-.yt-table__head .yt-table__cell > .yt-icon {
+.yt-table__head .yt-table__cell > [data-taco='icon'] {
     @apply flex-shrink-0;
 }
 
@@ -667,7 +653,7 @@
 }
 
 .yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
-    @apply border-l-2 border-grey-light;
+    @apply border-grey-light border-l-2;
 }
 
 .yt-table__head .yt-table__cell:not(.yt-table__cell--disable-sort) {
@@ -723,39 +709,30 @@
     overflow-wrap: normal;
 }
 
-.yt-table__cell .yt-label {
-    @apply text-transparent pb-0 -my-2;
+.yt-table__cell [data-taco='label'] {
+    @apply -my-2 pb-0 text-transparent;
     min-height: theme('spacing.10');
 }
 
-.yt-table__cell .yt-label > *:not(.yt-label__message) {
+.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 .yt-label > *:not(.yt-label__message) {
+.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 .yt-label > .yt-label__message {
+.yt-table__cell [data-taco='label'] > [data-taco='label']__message {
     @apply mb-1;
 }
 
 /* drag */
 #yt-table__drag__placeholder {
-    @apply bg-blue text-white rounded font-bold p-4 flex w-3/12;
-}
-
-/* cell alignment */
-.yt-table__cell.yt-table__cell--align-left {
-    @apply justify-start text-left;
-}
-
-.yt-table__cell.yt-table__cell--align-right {
-    @apply justify-end text-right;
+    @apply bg-blue flex w-3/12 rounded p-4 font-bold text-white;
 }
 
 .yt-tabs .yt-tab__list[aria-orientation='vertical'] {
-    @apply flex-col m-0 mr-4 border-0 border-r;
+    @apply m-0 mr-4 flex-col border-0 border-r;
 }
 
 .yt-tabs .yt-tab__list .yt-tab[aria-selected='true'] {