@economic/taco 1.17.0-alpha.0 → 1.17.1

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

@@ -0,0 +1,118 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { Backdrop } from '../../Backdrop/Backdrop.js';
+import { getDialogPositionClassnames, getDialogSizeClassnames } from '../util.js';
+import { IconButton } from '../../IconButton/IconButton.js';
+import { useLocalization } from '../../Provider/Localization.js';
+import { useMergedRef } from '../../../hooks/useMergedRef.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 { useDraggable } from '../../../utils/hooks/useDraggable.js';
+
+const Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
+  const className = cn('text-center', props.className);
+  return /*#__PURE__*/createElement(Title$1, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const Footer = /*#__PURE__*/forwardRef(function DialogFooter(props, ref) {
+  const className = cn('mt-8 flex justify-end', props.className);
+  return /*#__PURE__*/createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }), props.children);
+});
+const Close = /*#__PURE__*/forwardRef(function DialogClose(props, ref) {
+  const dialog = useCurrentDialog();
+  return /*#__PURE__*/createElement(Close$1, Object.assign({
+    onClick: dialog.onClose
+  }, props, {
+    ref: ref,
+    asChild: true
+  }));
+});
+const RenderPropWrapper = /*#__PURE__*/forwardRef(function RenderPropWrapper({
+  children,
+  onClick,
+  renderProps
+}, ref) {
+  const close = () => {
+    onClick(new CustomEvent('close'));
+  };
+  return children({
+    close,
+    ref,
+    ...renderProps
+  });
+});
+const Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
+  const dialog = useCurrentDialog();
+  const internalRef = useMergedRef(ref);
+  const {
+    position,
+    dragging,
+    handleProps: dragHandleProps
+  } = useDraggable(internalRef);
+  const {
+    texts
+  } = useLocalization();
+  const className = cn('relative bg-white animate-[fade-in_150ms]', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size));
+  const containerClassName = cn('bg-white p-6 rounded relative z-10', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
+    'rounded-b-none': !!dialog.elements.extra
+  }, props.className);
+  const handleEscapeKeyDown = event => {
+    if (!dialog.closeOnEscape) {
+      event.preventDefault();
+    } else if (dialog.onClose) {
+      dialog.onClose();
+    }
+  };
+  // the chosen behaviour in taco is that outside clicks do not close the dialog
+  const handleInteractOutside = event => event.preventDefault();
+  let output;
+  if (typeof props.children === 'function') {
+    output = /*#__PURE__*/createElement(Close$1, {
+      asChild: true
+    }, /*#__PURE__*/createElement(RenderPropWrapper, {
+      renderProps: {
+        drawer: dialog.drawer
+      }
+    }, props.children));
+  } else {
+    output = props.children;
+  }
+  return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Overlay, {
+    asChild: true
+  }, /*#__PURE__*/createElement(Backdrop, null, /*#__PURE__*/createElement(Content$1, Object.assign({}, props, {
+    className: className,
+    onEscapeKeyDown: handleEscapeKeyDown,
+    onInteractOutside: handleInteractOutside,
+    ref: internalRef,
+    style: {
+      ...props.style,
+      left: dialog.draggable ? `${position.x}px` : undefined,
+      top: dialog.draggable ? `${position.y}px` : undefined
+    }
+  }), /*#__PURE__*/createElement("div", {
+    className: containerClassName,
+    "data-taco": "dialog"
+  }, output, dialog.draggable && /*#__PURE__*/createElement("div", Object.assign({}, dragHandleProps, {
+    role: "button",
+    draggable: true,
+    "aria-grabbed": dragging,
+    "aria-label": texts.dialog.drag,
+    className: "yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center"
+  })), dialog.showCloseButton ? /*#__PURE__*/createElement(Close$1, {
+    onClick: dialog.onClose,
+    asChild: true
+  }, /*#__PURE__*/createElement(IconButton, {
+    appearance: "discrete",
+    "aria-label": texts.dialog.close,
+    className: "absolute top-0 right-0 mt-2 mr-2",
+    icon: "close"
+  })) : null), dialog.elements.drawer, dialog.elements.extra))));
+});
+
+export { Close, Content, Footer, Title };
+//# sourceMappingURL=Content.js.map

package/dist/esm/packages/taco/src/components/Dialog/components/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Localization';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { getDialogPositionClassnames, getDialogSizeClassnames } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative bg-white animate-[fade-in_150ms]',\n        getDialogPositionClassnames(),\n        getDialogSizeClassnames(dialog.size)\n    );\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-10',\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        if (!dialog.closeOnEscape) {\n            event.preventDefault();\n        } else if (dialog.onClose) {\n            dialog.onClose();\n        }\n    };\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <DialogPrimitive.Close asChild>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </DialogPrimitive.Close>\n        );\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay asChild>\n                <Backdrop>\n                    <DialogPrimitive.Content\n                        {...props}\n                        className={className}\n                        onEscapeKeyDown={handleEscapeKeyDown}\n                        onInteractOutside={handleInteractOutside}\n                        ref={internalRef}\n                        style={{\n                            ...props.style,\n                            left: dialog.draggable ? `${position.x}px` : undefined,\n                            top: dialog.draggable ? `${position.y}px` : undefined,\n                        }}>\n                        <div className={containerClassName} data-taco=\"dialog\">\n                            {output}\n                            {dialog.draggable && (\n                                <div\n                                    {...dragHandleProps}\n                                    role=\"button\"\n                                    draggable\n                                    aria-grabbed={dragging}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center\"\n                                />\n                            )}\n                            {dialog.showCloseButton ? (\n                                <DialogPrimitive.Close onClick={dialog.onClose} asChild>\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute top-0 right-0 mt-2 mr-2\"\n                                        icon=\"close\"\n                                    />\n                                </DialogPrimitive.Close>\n                            ) : null}\n                        </div>\n                        {dialog.elements.drawer}\n                        {dialog.elements.extra}\n                    </DialogPrimitive.Content>\n                </Backdrop>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","RenderPropWrapper","renderProps","close","CustomEvent","Content","DialogContent","internalRef","useMergedRef","position","dragging","handleProps","dragHandleProps","useDraggable","texts","useLocalization","getDialogPositionClassnames","getDialogSizeClassnames","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","style","left","draggable","x","undefined","top","y","role","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Dialog/components/Drawer.js

@@ -0,0 +1,41 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { useCurrentDialog } from '../Context.js';
+import { motion } from 'framer-motion';
+
+const Drawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
+  var _dialog$drawer, _dialog$drawer2;
+  const dialog = useCurrentDialog();
+  const className = cn('absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
+  return /*#__PURE__*/createElement(motion.div, Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-drawer",
+    "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
+    variants: {
+      visible: {
+        left: '100%',
+        display: 'block',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        }
+      },
+      hidden: {
+        left: '0%',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        },
+        transitionEnd: {
+          display: 'none'
+        }
+      }
+    },
+    animate: (_dialog$drawer2 = dialog.drawer) !== null && _dialog$drawer2 !== void 0 && _dialog$drawer2.open ? 'visible' : 'hidden',
+    ref: ref
+  }), typeof props.children === 'function' ? props.children(dialog.drawer) : props.children);
+});
+Drawer.displayName = 'DialogDrawer';
+
+export { Drawer };
+//# sourceMappingURL=Drawer.js.map

package/dist/esm/packages/taco/src/components/Dialog/components/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'classnames';\nimport { DialogContext, useCurrentDialog } from '../Context';\n\nexport type DialogDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n> & {\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);\n};\n\nconst Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const className = cn(\n        'absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\n        props.className\n    );\n\n    return (\n        <motion.div\n            {...props}\n            className={className}\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}>\n            {typeof props.children === 'function' ? props.children(dialog.drawer) : props.children}\n        </motion.div>\n    );\n});\nDrawer.displayName = 'DialogDrawer';\n\nexport { Drawer };\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","className","cn","motion","div","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate","children","displayName"],"mappings":";;;;;MAcMA,MAAM,gBAAGC,UAAgB,CAAC,SAASC,YAAY,CAACC,KAAwB,EAAEC,GAA8B;;EAC1G,MAAMC,MAAM,GAAGC,gBAAgB,EAAE;EACjC,MAAMC,SAAS,GAAGC,EAAE,CAChB,iGAAiG,EACjGL,KAAK,CAACI,SAAS,CAClB;EAED,oBACIN,cAACQ,MAAM,CAACC,GAAG,oBACHP,KAAK;IACTI,SAAS,EAAEA,SAAS;iBACV,eAAe;mBACZ,oBAACF,MAAM,CAACM,MAAM,2CAAb,eAAeC,IAAI;IACjCC,QAAQ,EAAE;MACNC,OAAO,EAAE;QACLC,IAAI,EAAE,MAAM;QACZC,OAAO,EAAE,OAAO;QAChBC,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;;OAC5C;MACDC,MAAM,EAAE;QACJL,IAAI,EAAE,IAAI;QACVE,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;SAAK;QAC9CE,aAAa,EAAE;UACXL,OAAO,EAAE;;;KAGpB;IACDM,OAAO,EAAE,mBAAAjB,MAAM,CAACM,MAAM,4CAAb,gBAAeC,IAAI,GAAG,SAAS,GAAG,QAAQ;IACnDR,GAAG,EAAEA;MACJ,OAAOD,KAAK,CAACoB,QAAQ,KAAK,UAAU,GAAGpB,KAAK,CAACoB,QAAQ,CAAClB,MAAM,CAACM,MAAM,CAAC,GAAGR,KAAK,CAACoB,QAAQ,CAC7E;AAErB,CAAC;AACDvB,MAAM,CAACwB,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/components/Extra.js

@@ -0,0 +1,15 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+
+const Extra = /*#__PURE__*/forwardRef(function DialogExtra(props, ref) {
+  const className = cn('bg-grey-100 yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
+  return /*#__PURE__*/createElement("div", Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-extra",
+    ref: ref
+  }));
+});
+Extra.displayName = 'DialogExtra';
+
+export { Extra };
+//# sourceMappingURL=Extra.js.map

package/dist/esm/packages/taco/src/components/Dialog/components/Extra.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Extra.js","sources":["../../../../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Extra = React.forwardRef(function DialogExtra(props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'bg-grey-100 yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left',\n        props.className\n    );\n\n    return <div {...props} className={className} data-taco=\"dialog-extra\" ref={ref} />;\n});\nExtra.displayName = 'DialogExtra';\n\nexport { Extra };\n"],"names":["Extra","React","DialogExtra","props","ref","className","cn","displayName"],"mappings":";;;MAKMA,KAAK,gBAAGC,UAAgB,CAAC,SAASC,WAAW,CAACC,KAAuB,EAAEC,GAA8B;EACvG,MAAMC,SAAS,GAAGC,EAAE,CAChB,2GAA2G,EAC3GH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOJ,uCAASE,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACD,GAAG,EAAEA;KAAO;AACtF,CAAC;AACDJ,KAAK,CAACO,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/components/Trigger.js

@@ -0,0 +1,19 @@
+import { forwardRef, createElement } from 'react';
+import { mergeRefs } from '../../../utils/mergeRefs.js';
+import { Trigger as Trigger$1 } from '@radix-ui/react-dialog';
+import { useCurrentDialog } from '../Context.js';
+
+const Trigger = /*#__PURE__*/forwardRef(function DialogTrigger(props, externalRef) {
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useCurrentDialog();
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, parentProps, props, {
+    ref: refCallback,
+    asChild: true
+  }));
+});
+
+export { Trigger };
+//# sourceMappingURL=Trigger.js.map

package/dist/esm/packages/taco/src/components/Dialog/components/Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Dialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useCurrentDialog } from '../Context';\nimport { mergeRefs } from '../../../utils/mergeRefs';\n\nexport type DialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function DialogTrigger(\n    props: DialogTriggerProps,\n    externalRef: React.Ref<HTMLButtonElement>\n) {\n    const { ref: parentRef, props: parentProps } = useCurrentDialog();\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    return <DialogPrimitive.Trigger {...parentProps} {...props} ref={refCallback} asChild />;\n});\n"],"names":["Trigger","React","DialogTrigger","props","externalRef","ref","parentRef","parentProps","useCurrentDialog","refCallback","mergeRefs","DialogPrimitive","asChild"],"mappings":";;;;;MAOaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,aAAa,CAC1DC,KAAyB,EACzBC,WAAyC;EAEzC,MAAM;IAAEC,GAAG,EAAEC,SAAS;IAAEH,KAAK,EAAEI;GAAa,GAAGC,gBAAgB,EAAE;EACjE,MAAMC,WAAW,GAAGC,SAAS,CAAC,CAACJ,SAAS,EAAEF,WAAW,CAAC,CAAC;EAEvD,oBAAOH,cAACU,SAAuB,oBAAKJ,WAAW,EAAMJ,KAAK;IAAEE,GAAG,EAAEI,WAAW;IAAEG,OAAO;KAAG;AAC5F,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/util.js

@@ -0,0 +1,19 @@
+const getDialogSizeClassnames = size => {
+  switch (size) {
+    case 'dialog':
+      return 'w-128';
+    case 'xs':
+      return 'w-xs';
+    case 'sm':
+      return 'w-sm';
+    case 'md':
+      return 'w-md';
+    case 'lg':
+      return 'w-lg';
+  }
+};
+const getDialogPositionClassnames = () => 'mt-16 mx-auto';
+const getDialogStylingClassnames = () => 'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';
+
+export { getDialogPositionClassnames, getDialogSizeClassnames, getDialogStylingClassnames };
+//# sourceMappingURL=util.js.map

package/dist/esm/packages/taco/src/components/Dialog/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Dialog/util.ts"],"sourcesContent":["import { DialogSize } from './types';\n\nexport const getDialogSizeClassnames = (size: DialogSize) => {\n    switch (size) {\n        case 'dialog':\n            return 'w-128';\n        case 'xs':\n            return 'w-xs';\n        case 'sm':\n            return 'w-sm';\n        case 'md':\n            return 'w-md';\n        case 'lg':\n            return 'w-lg';\n    }\n};\n\nexport const getDialogPositionClassnames = () => 'mt-16 mx-auto';\n\nexport const getDialogStylingClassnames = () =>\n    'bg-white rounded animate-[fade-in_150ms] shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]';\n"],"names":["getDialogSizeClassnames","size","getDialogPositionClassnames","getDialogStylingClassnames"],"mappings":"MAEaA,uBAAuB,GAAIC,IAAgB;EACpD,QAAQA,IAAI;IACR,KAAK,QAAQ;MACT,OAAO,OAAO;IAClB,KAAK,IAAI;MACL,OAAO,MAAM;IACjB,KAAK,IAAI;MACL,OAAO,MAAM;IACjB,KAAK,IAAI;MACL,OAAO,MAAM;IACjB,KAAK,IAAI;MACL,OAAO,MAAM;;AAEzB;MAEaC,2BAA2B,GAAG,MAAM;MAEpCC,0BAA0B,GAAG,MACtC;;;;"}

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

@@ -0,0 +1,31 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+
+const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
+  const {
+    disabled,
+    children,
+    invalid = false,
+    message,
+    ...otherProps
+  } = props;
+  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+    'text-grey-300': disabled
+  }, props.className);
+  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+    'text-grey-700': !invalid,
+    'text-red-500': invalid,
+    'opacity-50': disabled
+  }, props.className);
+  return /*#__PURE__*/createElement("label", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "label",
+    ref: ref
+  }), children, message && /*#__PURE__*/createElement("span", {
+    className: messageClassName,
+    role: invalid ? 'alert' : undefined
+  }, message));
+});
+
+export { Field };
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../../../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const { disabled, children, invalid = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn(\n        'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\n        {\n            'text-grey-700': !invalid,\n            'text-red-500': invalid,\n            'opacity-50': disabled,\n        },\n        props.className\n    );\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <span className={messageClassName} role={invalid ? 'alert' : undefined}>\n                    {message}\n                </span>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","disabled","children","invalid","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAK,CAACE,KAAiB,EAAEC,GAAgC;EACpG,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC7E,MAAMO,SAAS,GAAGC,EAAE,CAChB,8EAA8E,EAC9E;IACI,eAAe,EAAEN;GACpB,EACDF,KAAK,CAACO,SAAS,CAClB;EACD,MAAME,gBAAgB,GAAGD,EAAE,CACvB,iEAAiE,EACjE;IACI,eAAe,EAAE,CAACJ,OAAO;IACzB,cAAc,EAAEA,OAAO;IACvB,YAAY,EAAEF;GACjB,EACDF,KAAK,CAACO,SAAS,CAClB;EAED,oBACIR,yCAAWO,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACN,GAAG,EAAEA;MAC/DE,QAAQ,EACRE,OAAO,iBACJN;IAAMQ,SAAS,EAAEE,gBAAgB;IAAEC,IAAI,EAAEN,OAAO,GAAG,OAAO,GAAGO;KACxDN,OAAO,CAEf,CACG;AAEhB,CAAC;;;;"}

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

@@ -0,0 +1,20 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+
+const Form = /*#__PURE__*/forwardRef(function Form(props, ref) {
+  const {
+    horizontal = false,
+    ...otherProps
+  } = props;
+  const className = cn('yt-form', {
+    'yt-form--horizontal flex flex-wrap': horizontal
+  }, props.className);
+  return /*#__PURE__*/createElement("form", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "form",
+    ref: ref
+  }));
+});
+
+export { Form };
+//# sourceMappingURL=Form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport './Form.css';\n\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\n    /** Content should be composed of other Taco form elements */\n    children: React.ReactNode;\n    /** Display the form fields in a horizontal layout */\n    horizontal?: boolean;\n};\n\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\n    const { horizontal = false, ...otherProps } = props;\n    const className = cn(\n        'yt-form',\n        {\n            'yt-form--horizontal flex flex-wrap': horizontal,\n        },\n        props.className\n    );\n\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\n});\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":";;;MAWaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAI,CAACE,KAAgB,EAAEC,GAA+B;EAChG,MAAM;IAAEC,UAAU,GAAG,KAAK;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACnD,MAAMI,SAAS,GAAGC,EAAE,CAChB,SAAS,EACT;IACI,oCAAoC,EAAEH;GACzC,EACDF,KAAK,CAACI,SAAS,CAClB;EAED,oBAAOL,wCAAUI,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}

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

@@ -0,0 +1,21 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+
+const Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
+  const {
+    as: Tag = 'span',
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('flex ', 'gap-2', {
+    'flex-col ': orientation === 'vertical'
+  }, props.className);
+  return /*#__PURE__*/createElement(Tag, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "group",
+    ref: ref
+  }));
+});
+
+export { Group };
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sources":["../../../../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn('flex ', 'gap-2', { 'flex-col ': orientation === 'vertical' }, props.className);\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group","React","props","ref","as","Tag","orientation","otherProps","className","cn"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAK,CAACE,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,EAAE,EAAEC,GAAG,GAAG,MAAM;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC7E,MAAMM,SAAS,GAAGC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE;IAAE,WAAW,EAAEH,WAAW,KAAK;GAAY,EAAEJ,KAAK,CAACM,SAAS,CAAC;EACpG,oBAAOP,cAACI,GAAG,oBAAKE,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACL,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}

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

@@ -0,0 +1,101 @@
+import { forwardRef, createElement, useMemo, useState, useEffect, createContext, useContext, isValidElement } from 'react';
+import { mergeRefs } from '../../utils/mergeRefs.js';
+import cn from 'classnames';
+import { IconButton } from '../IconButton/IconButton.js';
+import { useLocalization } from '../Provider/Localization.js';
+import { Root, Anchor as Anchor$1, Portal, Content as Content$1, Close } from '@radix-ui/react-popover';
+import { UnstyledArrow } from '../Popover/Primitives.js';
+
+const HangerContext = /*#__PURE__*/createContext({
+  onClose: undefined,
+  props: {},
+  ref: null
+});
+const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, externalRef) {
+  var _props$children;
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useContext(HangerContext);
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  let children = props.children;
+  if ( /*#__PURE__*/isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
+    console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
+    children = /*#__PURE__*/createElement("span", null, props.children);
+  }
+  return /*#__PURE__*/createElement(Anchor$1, Object.assign({}, parentProps, props, {
+    ref: refCallback,
+    asChild: true
+  }), children);
+});
+const Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
+  const className = cn('mb-1 text-base font-bold flex w-full', props.className);
+  return /*#__PURE__*/createElement("span", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
+  const {
+    placement: side
+  } = props;
+  const context = useContext(HangerContext);
+  const {
+    texts
+  } = useLocalization();
+  const className = cn('wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
+  const handleInteractOutside = event => {
+    event.preventDefault();
+  };
+  return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content$1, {
+    className: className,
+    "data-taco": "hanger",
+    onInteractOutside: handleInteractOutside,
+    side: side,
+    sideOffset: 1,
+    ref: ref
+  }, props.children, /*#__PURE__*/createElement(UnstyledArrow, {
+    className: "text-blue-500"
+  }), /*#__PURE__*/createElement(Close, {
+    asChild: true
+  }, /*#__PURE__*/createElement(IconButton, {
+    appearance: "primary",
+    "aria-label": texts.hanger.close,
+    className: "absolute top-0 right-0 ml-2 mr-2 mt-2 text-white",
+    icon: "close",
+    onClick: context.onClose
+  }))));
+});
+const Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
+  const {
+    anchor,
+    children,
+    defaultOpen = true,
+    onClose,
+    ...otherProps
+  } = props;
+  const context = useMemo(() => ({
+    onClose,
+    props: otherProps,
+    ref
+  }), [onClose, otherProps]);
+  // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (defaultOpen) {
+      setOpen(defaultOpen);
+    }
+  }, []);
+  return /*#__PURE__*/createElement(HangerContext.Provider, {
+    value: context
+  }, /*#__PURE__*/createElement(Root, {
+    key: String(open),
+    defaultOpen: open
+  }, anchor && /*#__PURE__*/createElement(Anchor, null, anchor), children));
+});
+Hanger.Anchor = Anchor;
+Hanger.Content = Content;
+Hanger.Title = Title;
+
+export { Hanger, Title };
+//# sourceMappingURL=Hanger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hanger.js","sources":["../../../../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Localization';\nimport './Hanger.css';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...parentProps} {...props} ref={refCallback} asChild>\n            {children}\n        </PopoverPrimitive.Anchor>\n    );\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue-500\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["HangerContext","React","onClose","undefined","props","ref","Anchor","HangerAnchor","externalRef","parentRef","parentProps","refCallback","mergeRefs","children","type","console","warn","name","PopoverPrimitive","asChild","Title","DialogTitle","className","cn","Content","HangerContent","placement","side","context","texts","useLocalization","handleInteractOutside","event","preventDefault","onInteractOutside","sideOffset","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}

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

@@ -0,0 +1,37 @@
+import { createElement, forwardRef } from 'react';
+import cn from 'classnames';
+import { getPopoverStyleClassnames } from '../Popover/util.js';
+import { Root, Trigger as Trigger$1, Portal, Content as Content$1 } from '@radix-ui/react-hover-card';
+import { UnstyledArrow } from './Primitives.js';
+
+const Trigger = /*#__PURE__*/forwardRef(function HoverCardTrigger(props, ref) {
+  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, props, {
+    asChild: true,
+    ref: ref
+  }));
+});
+const Content = /*#__PURE__*/forwardRef(function HoverCardContent(props, ref) {
+  const {
+    placement: side
+  } = props;
+  const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);
+  return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content$1, {
+    className: className,
+    "data-taco": "hover-card",
+    side: side,
+    sideOffset: 1,
+    ref: ref
+  }, props.children, /*#__PURE__*/createElement(UnstyledArrow, {
+    className: "text-white"
+  })));
+});
+const HoverCard = props => {
+  return /*#__PURE__*/createElement(Root, Object.assign({}, props, {
+    openDelay: 300
+  }));
+};
+HoverCard.Trigger = Trigger;
+HoverCard.Content = Content;
+
+export { HoverCard };
+//# sourceMappingURL=HoverCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.js","sources":["../../../../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Primitives';\nimport { getPopoverStyleClassnames } from '../Popover/util';\n\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement>;\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    return <HoverCardPrimitive.Trigger {...props} asChild ref={ref} />;\n});\n\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <HoverCardPrimitive.Portal>\n            <HoverCardPrimitive.Content className={className} data-taco=\"hover-card\" side={side} sideOffset={1} ref={ref}>\n                {props.children}\n                <UnstyledArrow className=\"text-white\" />\n            </HoverCardPrimitive.Content>\n        </HoverCardPrimitive.Portal>\n    );\n});\n\nexport type HoverCardProps = React.PropsWithChildren<{}>;\n\nexport const HoverCard = (props: HoverCardProps) => {\n    return <HoverCardPrimitive.Root {...props} openDelay={300} />;\n};\nHoverCard.Trigger = Trigger;\nHoverCard.Content = Content;\n"],"names":["Trigger","React","HoverCardTrigger","props","ref","HoverCardPrimitive","asChild","Content","HoverCardContent","placement","side","className","cn","getPopoverStyleClassnames","sideOffset","children","UnstyledArrow","HoverCard","openDelay"],"mappings":";;;;;;AAQA,MAAMA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,gBAAgB,CAACC,KAA4B,EAAEC,GAAiC;EACtH,oBAAOH,cAACI,SAA0B,oBAAKF,KAAK;IAAEG,OAAO;IAACF,GAAG,EAAEA;KAAO;AACtE,CAAC,CAAC;AAMF,MAAMG,OAAO,gBAAGN,UAAgB,CAAC,SAASO,gBAAgB,CAACL,KAA4B,EAAEC,GAA8B;EACnH,MAAM;IAAEK,SAAS,EAAEC;GAAM,GAAGP,KAAK;EACjC,MAAMQ,SAAS,GAAGC,EAAE,CAACC,yBAAyB,EAAE,EAAE,qDAAqD,EAAEV,KAAK,CAACQ,SAAS,CAAC;EAEzH,oBACIV,cAACI,MAAyB,qBACtBJ,cAACI,SAA0B;IAACM,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACD,IAAI,EAAEA,IAAI;IAAEI,UAAU,EAAE,CAAC;IAAEV,GAAG,EAAEA;KACpGD,KAAK,CAACY,QAAQ,eACfd,cAACe,aAAa;IAACL,SAAS,EAAC;IAAe,CACf,CACL;AAEpC,CAAC,CAAC;MAIWM,SAAS,GAAId,KAAqB;EAC3C,oBAAOF,cAACI,IAAuB,oBAAKF,KAAK;IAAEe,SAAS,EAAE;KAAO;AACjE;AACAD,SAAS,CAACjB,OAAO,GAAGA,OAAO;AAC3BiB,SAAS,CAACV,OAAO,GAAGA,OAAO;;;;"}

package/dist/esm/packages/taco/src/components/HoverCard/Primitives.js

@@ -0,0 +1,27 @@
+import { forwardRef, createElement } from 'react';
+import { Arrow } from '@radix-ui/react-hover-card';
+
+const UnstyledArrow = /*#__PURE__*/forwardRef(function HoverCardArrow(props, ref) {
+  return /*#__PURE__*/createElement(Arrow, {
+    className: "pointer-events-none -mt-px",
+    asChild: true,
+    offset: 2,
+    width: 30,
+    height: 11
+  }, /*#__PURE__*/createElement("svg", Object.assign({}, props, {
+    ref: ref,
+    viewBox: "0 19 30 11",
+    style: {
+      transform: 'rotateZ(180deg)'
+    }
+  }), /*#__PURE__*/createElement("path", {
+    className: "text-grey-300 fill-current group-focus:text-blue-300",
+    d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
+  }), /*#__PURE__*/createElement("path", {
+    className: "fill-current",
+    d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+  })));
+});
+
+export { UnstyledArrow };
+//# sourceMappingURL=Primitives.js.map

package/dist/esm/packages/taco/src/components/HoverCard/Primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Primitives.js","sources":["../../../../../../../src/components/HoverCard/Primitives.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card';\n\nexport const UnstyledArrow = React.forwardRef(function HoverCardArrow(\n    props: React.SVGAttributes<SVGElement>,\n    ref: React.Ref<SVGSVGElement>\n) {\n    return (\n        <HoverCardPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n                <path\n                    className=\"text-grey-300 fill-current group-focus:text-blue-300\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </HoverCardPrimitive.Arrow>\n    );\n});\n"],"names":["UnstyledArrow","React","HoverCardArrow","props","ref","HoverCardPrimitive","className","asChild","offset","width","height","viewBox","style","transform","d"],"mappings":";;;MAGaA,aAAa,gBAAGC,UAAgB,CAAC,SAASC,cAAc,CACjEC,KAAsC,EACtCC,GAA6B;EAE7B,oBACIH,cAACI,KAAwB;IAACC,SAAS,EAAC,4BAA4B;IAACC,OAAO;IAACC,MAAM,EAAE,CAAC;IAAEC,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;kBACnGT,uCAASE,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEO,OAAO,EAAC,YAAY;IAACC,KAAK,EAAE;MAAEC,SAAS,EAAE;;mBAC/DZ;IACIK,SAAS,EAAC,sDAAsD;IAChEQ,CAAC,EAAC;IAAoI,eAC1Ib;IACIK,SAAS,EAAC,cAAc;IACxBQ,CAAC,EAAC;IAA6G,CACjH,CACiB;AAEnC,CAAC;;;;"}

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

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { icons } from './components/index.js';
+export { icons } from './components/index.js';
+
+const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
+  var _props$className;
+  const {
+    name,
+    ...otherProps
+  } = props;
+  const Component = icons[name];
+  /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
+  const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
+    'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
+  });
+  return Component ? /*#__PURE__*/React__default.createElement(Component, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "icon",
+    focusable: "false",
+    ref: ref,
+    role: "img"
+  })) : null;
+});
+
+export { Icon };
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconName, icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n    /** Set what svg icon should be rendered */\n    name: IconName; // this dynamic type causes the type extraction for props to fail\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n    const { name, ...otherProps } = props;\n    const Component = icons[name];\n    /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\n    const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n        'p-[3px]': props.className?.includes('rounded-full'),\n    });\n\n    return Component ? (\n        <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\n    ) : null;\n});\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":";;;;;MAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,IAAI,CAACG,KAAgB,EAAEC,GAA6B;;EAC9F,MAAM;IAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACrC,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAI,CAAC;;EAE7B,MAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAmD,EAAEP,KAAK,CAACM,SAAS,EAAE;IACvF,SAAS,sBAAEN,KAAK,CAACM,SAAS,qDAAf,iBAAiBE,QAAQ,CAAC,cAAc;GACtD,CAAC;EAEF,OAAOJ,SAAS,gBACZN,6BAACM,SAAS,oBAAKD,UAAU;IAAEG,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACG,SAAS,EAAC,OAAO;IAACR,GAAG,EAAEA,GAAG;IAAES,IAAI,EAAC;KAAQ,GAC3G,IAAI;AACZ,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Icon/components/AccountPreview.js

@@ -0,0 +1,17 @@
+import { forwardRef, createElement } from 'react';
+
+function IconAccountPreview(props, svgRef) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/createElement("path", {
+    d: "M19.25 3c.966 0 1.75.784 1.75 1.75V11h-1.5V4.75a.25.25 0 00-.193-.243L19.25 4.5H4.75a.25.25 0 00-.243.193L4.5 4.75v14.5a.25.25 0 00.193.243l.057.007H11V21H4.75A1.75 1.75 0 013 19.25V4.75C3 3.784 3.784 3 4.75 3h14.5zm-4.5 7.25a4.5 4.5 0 013.632 7.158l.036-.05 2.362 2.362a.75.75 0 01-.976 1.133l-.084-.073-2.363-2.362-.112.077a4.5 4.5 0 11-2.495-8.245zm0 1.5a3 3 0 100 6 3 3 0 000-6zm-7 3.25a.75.75 0 110 1.5h-.5a.75.75 0 110-1.5h.5zm0-4a.75.75 0 110 1.5h-.5a.75.75 0 110-1.5h.5zm9-4a.75.75 0 110 1.5h-6.5a.75.75 0 010-1.5h6.5zm-9 0a.75.75 0 010 1.5h-.5a.75.75 0 010-1.5h.5z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+}
+var AccountPreview = /*#__PURE__*/forwardRef(IconAccountPreview);
+
+export default AccountPreview;
+//# sourceMappingURL=AccountPreview.js.map