@economic/taco 0.0.1-alpha.1543 → 0.0.1-alpha.2

package/dist/esm/index.css

@@ -155,14 +155,6 @@
     @apply max-h-full p-0;
 }
 
-[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='spinner'] svg circle {
     @apply flex;
     fill: transparent;
@@ -234,6 +226,51 @@
     @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 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;
+}
+
+[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 select-none flex-row;
 }
@@ -395,35 +432,6 @@
     @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;
 }
@@ -440,14 +448,6 @@
     @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;
@@ -517,7 +517,7 @@
 }
 
 [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,12 +528,6 @@
     @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;
@@ -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;
-}
-
-.yt-table__cell.yt-table__cell__actions {
-    @apply flex justify-end px-1 overflow-visible;
+    @apply flex-1 truncate p-2 text-center align-middle;
 }
 
-.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,35 +709,26 @@
     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'] {

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

@@ -1,8 +1,7 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, createElement } from 'react';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef } from 'react';
 import cn from 'classnames';
-import { Button as Button$1 } from '../../primitives/Button.js';
-import { getButtonClasses, getAppearanceClasses } from './util.js';
+import { getButtonClasses, getAppearanceClasses, createButton } from './util.js';
 
 var _excluded = ["appearance", "fluid"];
 var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
@@ -15,11 +14,9 @@ var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
   }, props.className);
-  return createElement(Button$1, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "button",
-    ref: ref
-  }));
+  return createButton(_extends({}, otherProps, {
+    'data-taco': 'button'
+  }), className, ref);
 });
 
 export { Button };

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport './Button.css';\nimport { getAppearanceClasses, getButtonClasses } from './util';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n};\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(appearance),\n        'rounded px-3',\n        {\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return <ButtonPrimitive.Button {...otherProps} className={className} data-taco=\"button\" ref={ref} />;\n});\n"],"names":["Button","React","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","ButtonPrimitive"],"mappings":";;;;;;;IAcaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,UAAR,GAA6CF,KAA7C,CAAQE,UAAR;AAAA,MAAoBC,KAApB,GAA6CH,KAA7C,CAAoBG,KAApB;AAAA,MAA8BC,UAA9B,iCAA6CJ,KAA7C;;AACA,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACN,UAAD,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCF,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUN;AAHd,GAJgB,EAShBH,KAAK,CAACK,SATU,CAApB;AAYA,SAAON,aAAA,CAACW,QAAD,oBAA4BN;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAASJ,IAAAA,GAAG,EAAEA;IAAtF,CAAP;AACH,CAlBqB;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButton } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: React.ReactElement<DialogProps>;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: React.ReactElement<HangerProps>;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: React.ReactElement<PopoverProps>;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { appearance, fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(appearance),\n        'rounded px-3',\n        {\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButton({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n"],"names":["Button","React","props","ref","appearance","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton"],"mappings":";;;;;;IAiCaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CACnCE,KADmC,EAEnCC,GAFmC;AAInC,MAAQC,UAAR,GAA6CF,KAA7C,CAAQE,UAAR;AAAA,MAAoBC,KAApB,GAA6CH,KAA7C,CAAoBG,KAApB;AAAA,MAA8BC,UAA9B,iCAA6CJ,KAA7C;;AACA,MAAMK,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACN,UAAD,CAFJ,EAGhB,cAHgB,EAIhB;AACI,qCAAiCF,KAAK,CAACS,QAD3C;AAEI,4CAAwC,CAACT,KAAK,CAACS,QAFnD;AAGI,cAAUN;AAHd,GAJgB,EAShBH,KAAK,CAACK,SATU,CAApB;AAYA,SAAOK,YAAY,cAAMN,UAAN;AAAkB,iBAAa;AAA/B,MAA2CC,SAA3C,EAAsDJ,GAAtD,CAAnB;AACH,CAlBqB;;;;"}

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

@@ -1,3 +1,12 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { Button } from '../../primitives/Button.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Hanger } from '../Hanger/Hanger.js';
+import { Dialog } from '../Dialog/Dialog.js';
+import { Popover } from '../Popover/Popover.js';
+
+var _excluded = ["dialog", "hanger", "popover", "tooltip"];
 var getButtonClasses = function getButtonClasses() {
   return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
 };
@@ -29,6 +38,38 @@ var getAppearanceClasses = function getAppearanceClasses(value, icon) {
       return "yt-grey-solid border-grey\n                focus:bg-grey focus:yt-focus\n                active:bg-grey-dark active:text-black\n                hover:bg-grey-light hover:text-grey-darkest\n                hover:focus:bg-grey-light hover:focus:text-grey-darkest\n                disabled:hover:yt-grey-solid";
   }
 };
+var createButton = function createButton(props, className, ref) {
+  var dialog = props.dialog,
+      hanger = props.hanger,
+      popover = props.popover,
+      tooltip = props.tooltip,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var button = React__default.createElement(Button, Object.assign({}, otherProps, {
+    className: className,
+    ref: ref
+  }));
+
+  if (hanger) {
+    button = React__default.createElement(Hanger, Object.assign({}, hanger.props), React__default.createElement(Hanger.Anchor, null, button), hanger.props.children);
+  }
+
+  if (dialog) {
+    button = React__default.createElement(Dialog, Object.assign({}, dialog.props), React__default.createElement(Dialog.Trigger, null, button), dialog.props.children);
+  }
+
+  if (popover) {
+    button = React__default.createElement(Popover, Object.assign({}, popover.props), React__default.createElement(Popover.Trigger, null, button), popover.props.children);
+  }
+
+  if (tooltip) {
+    button = React__default.createElement(Tooltip, {
+      title: tooltip
+    }, button);
+  }
+
+  return button;
+};
 
-export { getAppearanceClasses, getButtonClasses };
+export { createButton, getAppearanceClasses, getButtonClasses };
 //# sourceMappingURL=util.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../src/components/Button/util.ts"],"sourcesContent":["import { Appearance } from '../../types';\n\nexport const getButtonClasses = () => {\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `yt-blue-solid border-blue\n                focus:bg-blue focus:text-white focus:yt-focus\n                active:bg-blue-dark active:text-white \n                hover:bg-blue-light hover:border-blue-light hover:text-white\n                hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n                disabled:hover:yt-blue-solid`;\n\n        case 'danger':\n            return `yt-red-solid border-red\n                focus:bg-red focus:text-white focus:yt-focus-red\n                active:bg-red-dark active:text-white \n                hover:bg-red-light hover:text-white\n                hover:focus:bg-red-light hover:focus:text-white\n                disabled:hover:yt-red-solid`;\n\n        case 'ghost':\n            return `yt-blue-inverted\n                focus:bg-transparent focus:text-blue focus:yt-focus\n                active:bg-blue-lightest active:border-blue active:text-blue-dark \n                hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n                hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n                disabled:hover:yt-blue-inverted`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent\n                    focus:text-black focus:yt-focus\n                    active:text-black\n                    hover:text-grey-darkest\n                    hover:focus:text-grey-darkest\n                    disabled:hover:yt-transparent`;\n            }\n\n            return `yt-transparent border-transparent\n                focus:text-blue focus:yt-focus\n                active:text-blue-dark\n                hover:text-blue-light\n                hover:focus:text-blue-light\n                disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `yt-grey-solid border-grey\n                focus:bg-grey focus:yt-focus\n                active:bg-grey-dark active:text-black\n                hover:bg-grey-light hover:text-grey-darkest\n                hover:focus:bg-grey-light hover:focus:text-grey-darkest\n                disabled:hover:yt-grey-solid`;\n    }\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon"],"mappings":"IAEaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,6IAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAOJ,SAAK,QAAL;AACI;;AAOJ,SAAK,OAAL;AACI;;AAOJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AAMH;;AAED;AAMH;;AAED;AACI;AA5CR;AAmDH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { Hanger } from '../Hanger/Hanger';\nimport { Dialog } from '../Dialog/Dialog';\nimport { Popover } from '../Popover/Popover';\n\nexport const getButtonClasses = () => {\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `yt-blue-solid border-blue\n                focus:bg-blue focus:text-white focus:yt-focus\n                active:bg-blue-dark active:text-white \n                hover:bg-blue-light hover:border-blue-light hover:text-white\n                hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white\n                disabled:hover:yt-blue-solid`;\n\n        case 'danger':\n            return `yt-red-solid border-red\n                focus:bg-red focus:text-white focus:yt-focus-red\n                active:bg-red-dark active:text-white \n                hover:bg-red-light hover:text-white\n                hover:focus:bg-red-light hover:focus:text-white\n                disabled:hover:yt-red-solid`;\n\n        case 'ghost':\n            return `yt-blue-inverted\n                focus:bg-transparent focus:text-blue focus:yt-focus\n                active:bg-blue-lightest active:border-blue active:text-blue-dark \n                hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light\n                hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light\n                disabled:hover:yt-blue-inverted`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent\n                    focus:text-black focus:yt-focus\n                    active:text-black\n                    hover:text-grey-darkest\n                    hover:focus:text-grey-darkest\n                    disabled:hover:yt-transparent`;\n            }\n\n            return `yt-transparent border-transparent\n                focus:text-blue focus:yt-focus\n                active:text-blue-dark\n                hover:text-blue-light\n                hover:focus:text-blue-light\n                disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `yt-grey-solid border-grey\n                focus:bg-grey focus:yt-focus\n                active:bg-grey-dark active:text-black\n                hover:bg-grey-light hover:text-grey-darkest\n                hover:focus:bg-grey-light hover:focus:text-grey-darkest\n                disabled:hover:yt-grey-solid`;\n    }\n};\n\nexport const createButton = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { dialog, hanger, popover, tooltip, ...otherProps } = props;\n\n    let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\n\n    if (hanger) {\n        button = (\n            <Hanger {...hanger.props}>\n                <Hanger.Anchor>{button}</Hanger.Anchor>\n                {hanger.props.children}\n            </Hanger>\n        );\n    }\n\n    if (dialog) {\n        button = (\n            <Dialog {...dialog.props}>\n                <Dialog.Trigger>{button}</Dialog.Trigger>\n                {dialog.props.children}\n            </Dialog>\n        );\n    }\n\n    if (popover) {\n        button = (\n            <Popover {...popover.props}>\n                <Popover.Trigger>{button}</Popover.Trigger>\n                {popover.props.children}\n            </Popover>\n        );\n    }\n\n    if (tooltip) {\n        button = <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","popover","tooltip","otherProps","button","React","ButtonPrimitive","Hanger","Anchor","children","Dialog","Trigger","Popover","Tooltip","title"],"mappings":";;;;;;;;;IAQaA,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAO,6IAAP;AACH;IAEYC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgCC,IAAhC;MAAgCA;AAAAA,IAAAA,OAAO;;;AACvE,UAAQD,KAAR;AACI,SAAK,SAAL;AACI;;AAOJ,SAAK,QAAL;AACI;;AAOJ,SAAK,OAAL;AACI;;AAOJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN;AAMH;;AAED;AAMH;;AAED;AACI;AA5CR;AAmDH;IAEYC,YAAY,GAAG,SAAfA,YAAe,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,MAAQC,MAAR,GAA4DH,KAA5D,CAAQG,MAAR;AAAA,MAAgBC,MAAhB,GAA4DJ,KAA5D,CAAgBI,MAAhB;AAAA,MAAwBC,OAAxB,GAA4DL,KAA5D,CAAwBK,OAAxB;AAAA,MAAiCC,OAAjC,GAA4DN,KAA5D,CAAiCM,OAAjC;AAAA,MAA6CC,UAA7C,iCAA4DP,KAA5D;;AAEA,MAAIQ,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYN,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAIE,MAAJ,EAAY;AACRI,IAAAA,MAAM,GACFC,4BAAA,CAACE,MAAD,oBAAYP,MAAM,CAACJ,MAAnB,EACIS,4BAAA,CAACE,MAAM,CAACC,MAAR,MAAA,EAAgBJ,MAAhB,CADJ,EAEKJ,MAAM,CAACJ,KAAP,CAAaa,QAFlB,CADJ;AAMH;;AAED,MAAIV,MAAJ,EAAY;AACRK,IAAAA,MAAM,GACFC,4BAAA,CAACK,MAAD,oBAAYX,MAAM,CAACH,MAAnB,EACIS,4BAAA,CAACK,MAAM,CAACC,OAAR,MAAA,EAAiBP,MAAjB,CADJ,EAEKL,MAAM,CAACH,KAAP,CAAaa,QAFlB,CADJ;AAMH;;AAED,MAAIR,OAAJ,EAAa;AACTG,IAAAA,MAAM,GACFC,4BAAA,CAACO,OAAD,oBAAaX,OAAO,CAACL,MAArB,EACIS,4BAAA,CAACO,OAAO,CAACD,OAAT,MAAA,EAAkBP,MAAlB,CADJ,EAEKH,OAAO,CAACL,KAAR,CAAca,QAFnB,CADJ;AAMH;;AAED,MAAIP,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACQ,OAAD;AAASC,MAAAA,KAAK,EAAEZ;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}

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

@@ -1,9 +1,9 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useState, useEffect, createElement, memo } from 'react';
 import cn from 'classnames';
+import { useLocalization } from '../Provider/Provider.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import ReactDayPicker from 'react-day-picker';
-import { useLocalization } from '../Provider/Provider.js';
 
 var _excluded = ["onChange", "value"];
 

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

@@ -21,11 +21,19 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
     'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
   }, props.className);
+  var handleChange;
+
+  if (onChange) {
+    handleChange = function handleChange(checked) {
+      return onChange(checked === 'indeterminate' ? false : checked);
+    };
+  }
+
   var element = createElement(Root, Object.assign({}, otherProps, {
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
-    onCheckedChange: onChange,
+    onCheckedChange: handleChange,
     ref: ref
   }), createElement(Indicator, {
     className: "flex h-full w-full"

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Increases visual prominenance of the checkbox */\n    highlighted?: boolean;\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean | 'indeterminate') => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\n\n    const className = cn(\n        'h-5 w-5 border rounded text-sm',\n        {\n            'mr-2': !!label,\n            'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\n            'border-grey text-blue-light cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\n            'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\n        },\n        props.className\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={onChange}\n            ref={ref}\n        >\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelClassName = cn('flex items-center cursor-pointer', {\n            'cursor-not-allowed text-grey-dark': props.disabled,\n        });\n\n        return (\n            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAsCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAChB,gCADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFvF;AAGI,sDAAkDL,KAAK,CAACW,QAH5D;AAII,oEAAgER,WAJpE;AAKI,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALjF,GAFgB,EAShBX,KAAK,CAACS,SATU,CAApB;AAYA,MAAMG,OAAO,GACTb,aAAA,CAACc,IAAD,oBACQL;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXK,IAAAA,eAAe,EAAEP;AACjBN,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACc,SAAD;AAA6BJ,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACgB,IAAD;AAAMC,IAAAA,IAAI,EAAEZ,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMW,cAAc,GAAGP,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCV,KAAK,CAACW;AADe,KAArC,CAAzB;AAIA,WACIZ,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAEQ;KAAlB,EACKL,OADL,EAEKN,KAFL,CADJ;AAMH;;AAED,SAAOM,OAAP;AACH,CA5CuB;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Increases visual prominenance of the checkbox */\n    highlighted?: boolean;\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, highlighted, indeterminate, invalid, label, onChange, ...otherProps } = props;\n\n    const className = cn(\n        'h-5 w-5 border rounded text-sm',\n        {\n            'mr-2': !!label,\n            'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,\n            'border-grey text-blue-light cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,\n            'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled,\n        },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            ref={ref}\n        >\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelClassName = cn('flex items-center cursor-pointer', {\n            'cursor-not-allowed text-grey-dark': props.disabled,\n        });\n\n        return (\n            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Checkbox","React","props","ref","checked","highlighted","indeterminate","invalid","label","onChange","otherProps","className","cn","disabled","handleChange","element","CheckboxPrimitive","onCheckedChange","Icon","name","labelClassName"],"mappings":";;;;;;;IAwCaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAAQC,OAAR,GAAyFF,KAAzF,CAAQE,OAAR;AAAA,MAAiBC,WAAjB,GAAyFH,KAAzF,CAAiBG,WAAjB;AAAA,MAA8BC,aAA9B,GAAyFJ,KAAzF,CAA8BI,aAA9B;AAAA,MAA6CC,OAA7C,GAAyFL,KAAzF,CAA6CK,OAA7C;AAAA,MAAsDC,KAAtD,GAAyFN,KAAzF,CAAsDM,KAAtD;AAAA,MAA6DC,QAA7D,GAAyFP,KAAzF,CAA6DO,QAA7D;AAAA,MAA0EC,UAA1E,iCAAyFR,KAAzF;;AAEA,MAAMS,SAAS,GAAGC,EAAE,CAChB,gCADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,mEAA+D,CAACN,KAAK,CAACW,QAAP,IAAmB,CAACN,OAFvF;AAGI,sDAAkDL,KAAK,CAACW,QAH5D;AAII,oEAAgER,WAJpE;AAKI,+DAA2DE,OAAO,IAAI,CAACL,KAAK,CAACW;AALjF,GAFgB,EAShBX,KAAK,CAACS,SATU,CAApB;AAYA,MAAIG,YAAJ;;AAEA,MAAIL,QAAJ,EAAc;AACVK,IAAAA,YAAY,GAAG,sBAACV,OAAD;AAAA,aAA2BK,QAAQ,CAACL,OAAO,KAAK,eAAZ,GAA8B,KAA9B,GAAsCA,OAAvC,CAAnC;AAAA,KAAf;AACH;;AAED,MAAMW,OAAO,GACTd,aAAA,CAACe,IAAD,oBACQN;iBACM;AACVN,IAAAA,OAAO,EAAEE,aAAa,GAAG,eAAH,GAAqBF;AAC3CO,IAAAA,SAAS,EAAEA;AACXM,IAAAA,eAAe,EAAEH;AACjBX,IAAAA,GAAG,EAAEA;IANT,EAQIF,aAAA,CAACe,SAAD;AAA6BL,IAAAA,SAAS,EAAC;GAAvC,EACIV,aAAA,CAACiB,IAAD;AAAMC,IAAAA,IAAI,EAAEb,aAAa,GAAG,MAAH,GAAY;AAAQK,IAAAA,SAAS,EAAC;GAAvD,CADJ,CARJ,CADJ;;AAeA,MAAIH,KAAJ,EAAW;AACP,QAAMY,cAAc,GAAGR,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCV,KAAK,CAACW;AADe,KAArC,CAAzB;AAIA,WACIZ,aAAA,QAAA;AAAOU,MAAAA,SAAS,EAAES;KAAlB,EACKL,OADL,EAEKP,KAFL,CADJ;AAMH;;AAED,SAAOO,OAAP;AACH,CAlDuB;;;;"}

package/dist/esm/src/components/Combobox/useCombobox.js

@@ -1,8 +1,8 @@
 import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useRef, useMemo, useState, useEffect } from 'react';
 import { v4 } from 'uuid';
-import { usePopoverState } from 'reakit/Popover';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import { usePopoverState } from 'reakit/Popover';
 import keycode from 'keycode';
 import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';

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

@@ -1,12 +1,12 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
-import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Provider.js';
+import { Popover } from '../Popover/Popover.js';
+import { IconButton } from '../IconButton/IconButton.js';
 import { Calendar } from '../Calendar/Calendar.js';
 import { Input } from '../Input/Input.js';
 import { useDatepicker } from './useDatepicker.js';
-import { Popover } from '../Popover/Popover.js';
 
 var _excluded = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
 var Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {

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

@@ -11,6 +11,7 @@ var DialogContext = /*#__PURE__*/createContext({
   },
   onClose: function onClose() {},
   props: {},
+  ref: null,
   size: 'sm'
 });
 var useCurrentDialog = function useCurrentDialog() {

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

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DialogSize } from './types';\n\nexport type DialogContext = {\n    draggable: boolean;\n    drawer?: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    close: () => void;\n    onClose?: () => void;\n    props: {};\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    close: () => {},\n    draggable: false,\n    drawer: undefined,\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    props: {},\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":["DialogContext","React","close","draggable","drawer","undefined","elements","extra","onClose","props","size","useCurrentDialog"],"mappings":";;AAAA;IAoBaA,aAAa,gBAAGC,aAAA,CAAmC;AAC5DC,EAAAA,KAAK,EAAE,mBADqD;AAE5DC,EAAAA,SAAS,EAAE,KAFiD;AAG5DC,EAAAA,MAAM,EAAEC,SAHoD;AAI5DC,EAAAA,QAAQ,EAAE;AACNF,IAAAA,MAAM,EAAEC,SADF;AAENE,IAAAA,KAAK,EAAEF;AAFD,GAJkD;AAQ5DG,EAAAA,OAAO,EAAE,qBARmD;AAS5DC,EAAAA,KAAK,EAAE,EATqD;AAU5DC,EAAAA,IAAI,EAAE;AAVsD,CAAnC;IAahBC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAOV,UAAA,CAAiBD,aAAjB,CAAP;AACH;;;;"}
+{"version":3,"file":"Context.js","sources":["../../../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DialogSize } from './types';\n\nexport type DialogContext = {\n    draggable: boolean;\n    drawer?: {\n        open: boolean;\n        toggle: () => void;\n    };\n    elements: {\n        drawer?: React.ReactNode;\n        extra?: React.ReactNode;\n    };\n    close: () => void;\n    onClose?: () => void;\n    props: {};\n    ref: React.Ref<HTMLElement>;\n    size: DialogSize;\n};\n\nexport const DialogContext = React.createContext<DialogContext>({\n    close: () => {},\n    draggable: false,\n    drawer: undefined,\n    elements: {\n        drawer: undefined,\n        extra: undefined,\n    },\n    onClose: () => {},\n    props: {},\n    ref: null,\n    size: 'sm',\n});\n\nexport const useCurrentDialog = () => {\n    return React.useContext(DialogContext);\n};\n"],"names":["DialogContext","React","close","draggable","drawer","undefined","elements","extra","onClose","props","ref","size","useCurrentDialog"],"mappings":";;AAAA;IAqBaA,aAAa,gBAAGC,aAAA,CAAmC;AAC5DC,EAAAA,KAAK,EAAE,mBADqD;AAE5DC,EAAAA,SAAS,EAAE,KAFiD;AAG5DC,EAAAA,MAAM,EAAEC,SAHoD;AAI5DC,EAAAA,QAAQ,EAAE;AACNF,IAAAA,MAAM,EAAEC,SADF;AAENE,IAAAA,KAAK,EAAEF;AAFD,GAJkD;AAQ5DG,EAAAA,OAAO,EAAE,qBARmD;AAS5DC,EAAAA,KAAK,EAAE,EATqD;AAU5DC,EAAAA,GAAG,EAAE,IAVuD;AAW5DC,EAAAA,IAAI,EAAE;AAXsD,CAAnC;IAchBC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC5B,SAAOX,UAAA,CAAiBD,aAAjB,CAAP;AACH;;;;"}

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

@@ -1,5 +1,5 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { useMemo, Children, useState, createElement } from 'react';
+import { forwardRef, useMemo, Children, useState, createElement } from 'react';
 import { Root } from '@radix-ui/react-dialog';
 import { DialogContext } from './Context.js';
 import { Trigger } from './components/Trigger.js';
@@ -27,7 +27,7 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
   }, [initialChildren]);
 };
 
-var Dialog = function Dialog(props) {
+var Dialog = /*#__PURE__*/forwardRef(function (props, ref) {
   var initialChildren = props.children,
       _props$draggable = props.draggable,
       draggable = _props$draggable === void 0 ? false : _props$draggable,
@@ -70,7 +70,8 @@ var Dialog = function Dialog(props) {
       },
       onClose: onClose,
       props: otherProps,
-      size: size
+      size: size,
+      ref: ref
     };
   }, [open, drawerOpen, drawer, extra, otherProps]);
   return createElement(DialogContext.Provider, {
@@ -80,7 +81,7 @@ var Dialog = function Dialog(props) {
     open: open,
     onOpenChange: setOpen
   }));
-};
+});
 Dialog.Trigger = Trigger;
 Dialog.Content = Content;
 Dialog.Title = Title;

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { Trigger } from './components/Trigger';\nimport { Content, Title, Footer, Close } from './components/Content';\nimport { Drawer } from './components/Drawer';\nimport { Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\n    open?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.forEach(initialChildren, (child: any) => {\n            if (child.type.displayName === 'Drawer') {\n                drawer = child;\n            } else if (child.type.displayName === 'Extra') {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport const Dialog = (props: DialogProps): JSX.Element => {\n    const { children: initialChildren, draggable = false, onClose, open: defaultOpen, size = 'sm', ...otherProps } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n\n    const [open, setOpen] = React.useState(defaultOpen);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            close: () => setOpen(false),\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            size,\n        }),\n        [open, drawerOpen, drawer, extra, otherProps]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root children={children} open={open} onOpenChange={setOpen} />\n        </DialogContext.Provider>\n    );\n};\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = Drawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","forEach","child","type","displayName","push","Dialog","props","draggable","onClose","defaultOpen","open","size","otherProps","setOpen","drawerOpen","setDrawerOpen","context","close","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Extra","Drawer","Close"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, Drawer } from './components/Drawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport { DialogContentProps, DialogTitleProps, DialogFooterProps, DialogCloseProps };\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\n    open?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.forEach(initialChildren, (child: any) => {\n            if (child.type.displayName === 'Drawer') {\n                drawer = child;\n            } else if (child.type.displayName === 'Extra') {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps>;\n};\n\nexport const Dialog = React.forwardRef((props: DialogProps, ref: React.Ref<HTMLElement>): JSX.Element => {\n    const { children: initialChildren, draggable = false, onClose, open: defaultOpen, size = 'sm', ...otherProps } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n\n    const [open, setOpen] = React.useState(defaultOpen);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            close: () => setOpen(false),\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            size,\n            ref,\n        }),\n        [open, drawerOpen, drawer, extra, otherProps]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root children={children} open={open} onOpenChange={setOpen} />\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = Drawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","forEach","child","type","displayName","push","Dialog","props","ref","draggable","onClose","defaultOpen","open","size","otherProps","setOpen","drawerOpen","setDrawerOpen","context","close","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Extra","Drawer","Close"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
-import { IconButton } from '../../IconButton/IconButton.js';
 import { useLocalization } from '../../Provider/Provider.js';
-import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
 import { Title as Title$1, Close as Close$1, Portal, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
 import { useCurrentDialog } from '../Context.js';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
 import { useDraggable } from '../../../utils/hooks/useDraggable.js';
 import { useCurrentMenu } from '../../Menu/Context.js';
 import { Group } from '../../Group/Group.js';
+import { IconButton } from '../../IconButton/IconButton.js';
 
 var Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
   return createElement(Title$1, Object.assign({}, props, {
@@ -18,7 +18,7 @@ var Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
 });
 var Footer = /*#__PURE__*/forwardRef(function DialogFooter(props, ref) {
   return createElement("div", Object.assign({}, props, {
-    className: "flex justify-end mt-8",
+    className: "mt-8 flex justify-end",
     ref: ref
   }), createElement(Group, null, props.children));
 });
@@ -53,7 +53,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     };
   }
 
-  var className = cn('bg-white rounded fixed-center', {
+  var className = cn('bg-white rounded mt-16 mx-auto', {
     'w-128 text-center justify-center': dialog.size === 'dialog',
     'w-xs': dialog.size === 'xs',
     'w-sm': dialog.size === 'sm',
@@ -97,7 +97,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     className: containerClassName
   }, output, dialog.draggable && createElement("div", Object.assign({}, dragHandleProps, {
     "aria-label": texts.dialog.drag,
-    className: "yt-dialog__drag absolute-center-x h-3 rounded bg-grey-light cursor-move text-center w-24 top-1.5"
+    className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
   })), createElement(Close$1, {
     asChild: true,
     onClick: dialog.onClose