npm - @economic/taco - Versions diffs - 2.39.2 → 2.40.1 - Mend

@economic/taco 2.39.2 → 2.40.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/dist/components/OverflowGroup/OverflowGroup.d.ts CHANGED Viewed

@@ -2,5 +2,4 @@ import React from 'react';
 import { ButtonProps } from '../Button/Button';
 export declare const OverflowGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
     moreButton?: ((moreButtonText: string) => React.ReactElement<ButtonProps>) | undefined;
-    wrapChild?: true | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Table/hooks/useRowCreation.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Row, RowIndexPath, LegacyTableRef } from '../types';
-export declare const insertChildTableRow: <TRow>(data: Row<TRow>[], rowIndexPath?: RowIndexPath, values?: any) => [Row<TRow>[], RowIndexPath];
-export declare const removeChildTableRow: <TRow>(data: Row<TRow>[], rowIndexPath: RowIndexPath) => Row<TRow>[];
-export declare type useTableRowCreation<TRow> = {
+export declare const insertChildTableRow: <TRow extends {}>(data: Row<TRow>[], rowIndexPath?: RowIndexPath, values?: any) => [Row<TRow>[], RowIndexPath];
+export declare const removeChildTableRow: <TRow extends {}>(data: Row<TRow>[], rowIndexPath: RowIndexPath) => Row<TRow>[];
+export declare type useTableRowCreation<TRow extends {}> = {
     data: Row<TRow>[];
     create: (rowIndexPath: RowIndexPath, values?: object | undefined) => RowIndexPath;
     remove: (rowIndexPath: RowIndexPath) => void;
     isCreating: boolean;
 };
-export declare const useTableRowCreation: <TRow>(data: Row<TRow>[], tableRef: React.RefObject<LegacyTableRef>) => useTableRowCreation<TRow>;
+export declare const useTableRowCreation: <TRow extends {}>(data: Row<TRow>[], tableRef: React.RefObject<LegacyTableRef>) => useTableRowCreation<TRow>;

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

@@ -7,7 +7,7 @@ export declare type RowIndexPath = string | undefined;
 export declare type Row<TRow extends {}> = TRow & {
     subRows?: Row<TRow>[];
 };
-export declare type LegacyTableRow<TRow> = {
+export declare type LegacyTableRow<TRow extends {}> = {
     /**
      * Index of the row.
      * Note: This index is relative to the root or parent row if it is a sub row
@@ -36,14 +36,14 @@ export declare type LegacyTableRow<TRow> = {
     isEditing?: boolean;
     toggleRowEditing?: () => void;
 };
-export declare type LegacyTableCell<TRow> = {
+export declare type LegacyTableCell<TRow extends {}> = {
     accessor: string;
     /** Represents the row which renders the specific cell, exposing its properties */
     row: LegacyTableRow<TRow>;
     /** Access the rendered value in the cell */
     value: any;
 };
-export declare type LegacyTableColumnProps<TRow> = {
+export declare type LegacyTableColumnProps<TRow extends {}> = {
     /**
      * This string is used to build the data model for your column.
      * It should match one of the properties defined in your `data` object on `Table`,
@@ -96,7 +96,7 @@ export declare type LegacyTableColumnProps<TRow> = {
      */
     style?: object;
 };
-export declare type LegacyTableGroupProps<TRow> = {
+export declare type LegacyTableGroupProps<TRow extends {}> = {
     /** Content of a group should be another `Table.Group` or a `Table.Column` */
     children: React.ReactElement<LegacyTableColumnProps<TRow>> | React.ReactElement<LegacyTableColumnProps<TRow>>[];
     /** Hide the entire group (and columns defined within group) */
@@ -104,8 +104,8 @@ export declare type LegacyTableGroupProps<TRow> = {
     /** Text displayed in the group's header */
     title: string;
 };
-export declare type RowClickHandler<TRow> = (row: LegacyTableRow<TRow>, event: React.MouseEvent) => void;
-export declare type RowDragHandler<TRow> = (rows: Array<LegacyTableRow<TRow>>, showPlaceholder: (placeholder: string) => void, event: React.DragEvent) => void;
+export declare type RowClickHandler<TRow extends {}> = (row: LegacyTableRow<TRow>, event: React.MouseEvent) => void;
+export declare type RowDragHandler<TRow extends {}> = (rows: Array<LegacyTableRow<TRow>>, showPlaceholder: (placeholder: string) => void, event: React.DragEvent) => void;
 export declare type SortRule<T> = {
     /** Name of the accessor you want to sort */
     accessor: IdType<T>;
@@ -116,12 +116,12 @@ export declare type SelectedRowsState = Record<number, boolean>;
 export declare type SelectedRowsHandler = React.Dispatch<React.SetStateAction<SelectedRowsState>>;
 export declare type SortHandler<T> = (sortRules: SortRule<T>[] | undefined, sortedData?: T[]) => void;
 export declare type PaginationHandler = (pageNumber: number, pageSize: number) => void;
-export declare type RowCreateHandler<TRow> = (parentRow: LegacyTableRow<TRow>, event: React.MouseEvent<HTMLButtonElement>) => void;
-export declare type RowEditHandler<TRow> = (row: LegacyTableRow<TRow>, event: React.MouseEvent<HTMLButtonElement>) => void;
-export declare type RowCopyHandler<TRow> = (row: LegacyTableRow<TRow>, event: React.MouseEvent<HTMLButtonElement>) => void;
-export declare type RowDeleteHandler<TRow> = (row: LegacyTableRow<TRow>, event: React.MouseEvent<HTMLButtonElement>) => void;
-export declare type RowActiveHandler<TRow> = (row: LegacyTableRow<TRow>) => void;
-export declare type RowAction<TRow> = {
+export declare type RowCreateHandler<TRow extends {}> = (parentRow: LegacyTableRow<TRow>, event: React.MouseEvent<HTMLButtonElement>) => void;
+export declare type RowEditHandler<TRow extends {}> = (row: LegacyTableRow<TRow>, event: React.MouseEvent<HTMLButtonElement>) => void;
+export declare type RowCopyHandler<TRow extends {}> = (row: LegacyTableRow<TRow>, event: React.MouseEvent<HTMLButtonElement>) => void;
+export declare type RowDeleteHandler<TRow extends {}> = (row: LegacyTableRow<TRow>, event: React.MouseEvent<HTMLButtonElement>) => void;
+export declare type RowActiveHandler<TRow extends {}> = (row: LegacyTableRow<TRow>) => void;
+export declare type RowAction<TRow extends {}> = {
     disabled?: ((row: LegacyTableRow<TRow>) => boolean) | boolean;
     icon: ((row: LegacyTableRow<TRow>) => IconName) | IconName;
     onClick: (row: LegacyTableRow<TRow>, event: React.MouseEvent<HTMLElement>) => void;
@@ -130,8 +130,8 @@ export declare type RowAction<TRow> = {
     showOnRow?: boolean;
     visible?: ((row: LegacyTableRow<TRow>) => boolean) | boolean;
 };
-export declare type RowActionHandler<TRow> = RowAction<TRow> | undefined | null | boolean;
-export declare type LegacyTableProps<TRow> = React.HTMLAttributes<HTMLDivElement> & {
+export declare type RowActionHandler<TRow extends {}> = RowAction<TRow> | undefined | null | boolean;
+export declare type LegacyTableProps<TRow extends {}> = React.HTMLAttributes<HTMLDivElement> & {
     /** Autofocus the table when loaded */
     autoFocus?: boolean;
     /**
@@ -234,18 +234,18 @@ export declare type LegacyTableRef = HTMLDivElement & {
 };
 export declare type ForwardedGenericTableWithStatics = React.ForwardRefExoticComponent<LegacyTableProps<any> & React.RefAttributes<HTMLDivElement>> & {
     /** Represents a column in your table */
-    Column: <TRow>(props: LegacyTableColumnProps<TRow>) => JSX.Element | null;
+    Column: <TRow extends {}>(props: LegacyTableColumnProps<TRow>) => JSX.Element | null;
     /**
      * Container for columns.
      * Visually this adds a column above and spans all group children.
      * *Note* that groups can only be nested two levels deep
      */
-    Group: <TRow>(props: LegacyTableGroupProps<TRow>) => JSX.Element | null;
-} & (<TRow>(props: LegacyTableProps<TRow> & {
+    Group: <TRow extends {}>(props: LegacyTableGroupProps<TRow>) => JSX.Element | null;
+} & (<TRow extends {}>(props: LegacyTableProps<TRow> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => JSX.Element);
-export declare type LegacyTableChild<TRow> = React.ReactElement<LegacyTableColumnProps<TRow>> | React.ReactElement<LegacyTableGroupProps<TRow>> | boolean | null;
-export declare type LegacyTableChildren<TRow> = LegacyTableChild<TRow> | LegacyTableChild<TRow>[];
+export declare type LegacyTableChild<TRow extends {}> = React.ReactElement<LegacyTableColumnProps<TRow>> | React.ReactElement<LegacyTableGroupProps<TRow>> | boolean | null;
+export declare type LegacyTableChildren<TRow extends {}> = LegacyTableChild<TRow> | LegacyTableChild<TRow>[];
 /** @internal */
 export declare type InternalTableColumn = LegacyTableColumnProps<any> & ColumnInstance & UseSortByColumnProps<{}> & {
     className?: string;

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

@@ -44,11 +44,6 @@ export declare type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {
      * A unique value that associates the content with a trigger.
      */
     id: string;
-    /**
-     * Used to force mounting when more control is needed. Useful when
-     * controlling animation with React animation libraries.
-     */
-    forceMount?: true;
 };
 export declare type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
     /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */

package/dist/esm/packages/taco/src/components/Alert/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { getColorByState, getSubtleColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: React.ReactNode;\n state?: State;\n onClose?: () => void;\n};\n\nconst getIconName = (state: State \| undefined): IconName => {\n switch (state) {\n case 'information':\n return 'info';\n case 'warning':\n return 'warning';\n case 'error':\n return 'close';\n case 'success':\n return 'tick';\n default:\n return 'question-mark';\n }\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n const { children, title, state, onClose } = props;\n\n const className = cn(\n `flex w-full flex-row items-start gap-2 rounded-md border-transparent p-3 ${getSubtleColorShadeClasses(\n getColorByState(state)\n )}`,\n props.className\n );\n\n return (\n <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n <BadgeIcon className=\"flex-none\" icon={getIconName(state)} color={getColorByState(state)} />\n <div className=\"grow text-sm\">\n {title && <div className=\"font-bold\">{title}</div>}\n {children}\n </div>\n {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} />}\n </div>\n );\n});\n"],"names":["getIconName","state","Alert","React","forwardRef","props","ref","children","title","onClose","className","cn","getSubtleColorShadeClasses","getColorByState","role","BadgeIcon","icon","color","Icon","name","onClick"],"mappings":";;;;;;AAaA,MAAMA,WAAW,GAAIC,KAAwB;EACzC,QAAQA,KAAK;IACT,KAAK,aAAa;MACd,OAAO,MAAM;IACjB,KAAK,SAAS;MACV,OAAO,SAAS;IACpB,KAAK,OAAO;MACR,OAAO,OAAO;IAClB,KAAK,SAAS;MACV,OAAO,MAAM;IACjB;MACI,OAAO,eAAe;;AAElC,CAAC;MAEYC,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAACG,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEP,KAAK;IAAEQ;GAAS,GAAGJ,KAAK;EAEjD,MAAMK,SAAS,GAAGC,EAAE,~~6EAC4DC~~,0BAA0B,CAClGC,eAAe,CAACZ,KAAK,CAAC,~~GACvB~~,EACHI,KAAK,CAACK,SAAS,CAClB;EAED,oBACIP,sDAASE,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEI,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACI,IAAI,EAAC;mBACnEX,6BAACY,SAAS;IAACL,SAAS,EAAC,WAAW;IAACM,IAAI,EAAEhB,WAAW,CAACC,KAAK,CAAC;IAAEgB,KAAK,EAAEJ,eAAe,CAACZ,KAAK;IAAK,eAC5FE;IAAKO,SAAS,EAAC;KACVF,KAAK,iBAAIL;IAAKO,SAAS,EAAC;KAAaF,KAAK,CAAO,EACjDD,QAAQ,CACP,EACLE,OAAO,iBAAIN,6BAACe,IAAI;IAACR,SAAS,EAAC,0BAA0B;IAACS,IAAI,EAAC,OAAO;IAACC,OAAO,EAAEX;IAAW,CACtF;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"Alert.js","sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\nimport { getColorByState, getSubtleColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { State } from '../../types';\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: React.ReactNode;\n state?: State;\n onClose?: () => void;\n};\n\nconst getIconName = (state: State \| undefined): IconName => {\n switch (state) {\n case 'information':\n return 'info';\n case 'warning':\n return 'warning';\n case 'error':\n return 'close';\n case 'success':\n return 'tick';\n default:\n return 'question-mark';\n }\n};\n\nexport const Alert = React.forwardRef(function Alert(props: AlertProps, ref: React.Ref<HTMLDivElement>) {\n const { children, title, state, onClose } = props;\n\n const className = cn(\n `flex w-full flex-row items-start gap-2 rounded-md border-transparent p-3 ${getSubtleColorShadeClasses(\n getColorByState(state)\n )}`,\n props.className\n );\n\n return (\n <div {...props} ref={ref} className={className} data-taco=\"alert\" role=\"alert\">\n <BadgeIcon className=\"flex-none\" icon={getIconName(state)} color={getColorByState(state)} />\n <div className=\"grow text-sm\">\n {title && <div className=\"font-bold\">{title}</div>}\n {children}\n </div>\n {onClose && <Icon className=\"flex-none cursor-pointer\" name=\"close\" onClick={onClose} />}\n </div>\n );\n});\n"],"names":["getIconName","state","Alert","React","forwardRef","props","ref","children","title","onClose","className","cn","getSubtleColorShadeClasses","getColorByState","role","BadgeIcon","icon","color","Icon","name","onClick"],"mappings":";;;;;;AAaA,MAAMA,WAAW,GAAIC,KAAwB;EACzC,QAAQA,KAAK;IACT,KAAK,aAAa;MACd,OAAO,MAAM;IACjB,KAAK,SAAS;MACV,OAAO,SAAS;IACpB,KAAK,OAAO;MACR,OAAO,OAAO;IAClB,KAAK,SAAS;MACV,OAAO,MAAM;IACjB;MACI,OAAO,eAAe;;AAElC,CAAC;MAEYC,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAACG,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEP,KAAK;IAAEQ;GAAS,GAAGJ,KAAK;EAEjD,MAAMK,SAAS,GAAGC,EAAE,CAChB,4EAA4EC,0BAA0B,CAClGC,eAAe,CAACZ,KAAK,CAAC,CACzB,EAAE,EACHI,KAAK,CAACK,SAAS,CAClB;EAED,oBACIP,sDAASE,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEI,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACI,IAAI,EAAC;mBACnEX,6BAACY,SAAS;IAACL,SAAS,EAAC,WAAW;IAACM,IAAI,EAAEhB,WAAW,CAACC,KAAK,CAAC;IAAEgB,KAAK,EAAEJ,eAAe,CAACZ,KAAK;IAAK,eAC5FE;IAAKO,SAAS,EAAC;KACVF,KAAK,iBAAIL;IAAKO,SAAS,EAAC;KAAaF,KAAK,CAAO,EACjDD,QAAQ,CACP,EACLE,OAAO,iBAAIN,6BAACe,IAAI;IAACR,SAAS,EAAC,0BAA0B;IAACS,IAAI,EAAC,OAAO;IAACC,OAAO,EAAEX;IAAW,CACtF;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Badge/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n / Content should be a numerical value or tag/status like text /\n children: React.ReactNode;\n / Show small version of badge /\n small?: boolean;\n / Background color /\n color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: boolean;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: never;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: boolean;\n / Show subtle version /\n subtle?: never;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: boolean;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: boolean;\n / Show status dot - can be used only in subtle badge /\n status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps \| OutlineBadgeProps \| SubtleBadgeProps \| StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n const {\n children,\n compact = false,\n outline = false,\n status = false,\n subtle = false,\n small = false,\n color,\n ...otherProps\n } = props;\n const isTransparent = color === 'transparent';\n const className = cn(\n 'rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n {\n [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,\n 'h-4 min-w-0 py-0 px-1 text-xs': small,\n 'h-2 w-2 min-w-0': compact,\n 'font-bold': outline \|\| !subtle,\n 'text-sm': !small,\n 'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n '!bg-grey-700': compact && isTransparent,\n },\n props.className\n );\n\n const content = () => {\n if (compact) {\n return <VisuallyHidden>{children}</VisuallyHidden>;\n }\n if (status) {\n return (\n <>\n <div className={cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))} />\n {children}\n </>\n );\n }\n return children;\n };\n\n return (\n <span\n {...otherProps}\n aria-atomic=\"true\"\n aria-live=\"polite\"\n className={className}\n data-taco=\"badge\"\n ref={ref}\n role=\"status\"\n title={props['aria-label']}>\n {content()}\n </span>\n );\n});\n"],"names":["Badge","React","props","ref","children","compact","outline","status","subtle","small","color","otherProps","isTransparent","className","cn","getOutlineColorShadeClasses","getSubtleColorShadeClasses","getColorShadeClasses","content","VisuallyHidden","role","title"],"mappings":";;;;;MA8DaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA+B;EACnG,MAAM;IACFC,QAAQ;IACRC,OAAO,GAAG,KAAK;IACfC,OAAO,GAAG,KAAK;IACfC,MAAM,GAAG,KAAK;IACdC,MAAM,GAAG,KAAK;IACdC,KAAK,GAAG,KAAK;IACbC,KAAK;IACL,GAAGC;GACN,GAAGT,KAAK;EACT,MAAMU,aAAa,GAAGF,KAAK,KAAK,aAAa;EAC7C,MAAMG,SAAS,GAAGC,EAAE,CAChB,+FAA+F,EAC/F;IACI,~~WAAWC~~,2BAA2B,CAACL,KAAK,~~GAAG~~,GAAGJ,OAAO;IACzD,~~mCAAmCU~~,0BAA0B,CAACN,KAAK,~~GAAG~~,GAAGF,MAAM;IAC/E,~~uBAAuBS~~,oBAAoB,CAACP,KAAK,~~GAAG~~,GAAG,CAACJ,OAAO,IAAI,CAACE,MAAM;IAC1E,+BAA+B,EAAEC,KAAK;IACtC,iBAAiB,EAAEJ,OAAO;IAC1B,WAAW,EAAEC,OAAO,IAAI,CAACE,MAAM;IAC/B,SAAS,EAAE,CAACC,KAAK;IACjB,iBAAiB,EAAE,CAACJ,OAAO,IAAI,CAACI,KAAK;IACrC,cAAc,EAAEJ,OAAO,IAAIO;GAC9B,EACDV,KAAK,CAACW,SAAS,CAClB;EAED,MAAMK,OAAO,GAAGA;IACZ,IAAIb,OAAO,EAAE;MACT,oBAAOJ,cAACkB,cAAc,QAAEf,QAAQ,CAAkB;;IAEtD,IAAIG,MAAM,EAAE;MACR,oBACIN,2CACIA;QAAKY,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAEG,oBAAoB,CAACP,KAAK,CAAC;QAAK,EAC/EN,QAAQ,CACV;;IAGX,OAAOA,QAAQ;GAClB;EAED,oBACIH,wCACQU,UAAU;mBACF,MAAM;iBACR,QAAQ;IAClBE,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBV,GAAG,EAAEA,GAAG;IACRiB,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEnB,KAAK,CAAC,YAAY;MACxBgB,OAAO,EAAE,CACP;AAEf,CAAC;;;;"}
1	+ {"version":3,"file":"Badge.js","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n / Content should be a numerical value or tag/status like text /\n children: React.ReactNode;\n / Show small version of badge /\n small?: boolean;\n / Background color /\n color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: boolean;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: never;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: boolean;\n / Show subtle version /\n subtle?: never;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: boolean;\n / Show status dot - can be used only in subtle badge /\n status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n / Show compact version /\n compact?: never;\n / Show outlined version /\n outline?: never;\n / Show subtle version /\n subtle?: boolean;\n / Show status dot - can be used only in subtle badge /\n status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps \| OutlineBadgeProps \| SubtleBadgeProps \| StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n const {\n children,\n compact = false,\n outline = false,\n status = false,\n subtle = false,\n small = false,\n color,\n ...otherProps\n } = props;\n const isTransparent = color === 'transparent';\n const className = cn(\n 'rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n {\n [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,\n 'h-4 min-w-0 py-0 px-1 text-xs': small,\n 'h-2 w-2 min-w-0': compact,\n 'font-bold': outline \|\| !subtle,\n 'text-sm': !small,\n 'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n '!bg-grey-700': compact && isTransparent,\n },\n props.className\n );\n\n const content = () => {\n if (compact) {\n return <VisuallyHidden>{children}</VisuallyHidden>;\n }\n if (status) {\n return (\n <>\n <div className={cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))} />\n {children}\n </>\n );\n }\n return children;\n };\n\n return (\n <span\n {...otherProps}\n aria-atomic=\"true\"\n aria-live=\"polite\"\n className={className}\n data-taco=\"badge\"\n ref={ref}\n role=\"status\"\n title={props['aria-label']}>\n {content()}\n </span>\n );\n});\n"],"names":["Badge","React","props","ref","children","compact","outline","status","subtle","small","color","otherProps","isTransparent","className","cn","getOutlineColorShadeClasses","getSubtleColorShadeClasses","getColorShadeClasses","content","VisuallyHidden","role","title"],"mappings":";;;;;MA8DaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA+B;EACnG,MAAM;IACFC,QAAQ;IACRC,OAAO,GAAG,KAAK;IACfC,OAAO,GAAG,KAAK;IACfC,MAAM,GAAG,KAAK;IACdC,MAAM,GAAG,KAAK;IACdC,KAAK,GAAG,KAAK;IACbC,KAAK;IACL,GAAGC;GACN,GAAGT,KAAK;EACT,MAAMU,aAAa,GAAGF,KAAK,KAAK,aAAa;EAC7C,MAAMG,SAAS,GAAGC,EAAE,CAChB,+FAA+F,EAC/F;IACI,CAAC,UAAUC,2BAA2B,CAACL,KAAK,CAAC,EAAE,GAAGJ,OAAO;IACzD,CAAC,kCAAkCU,0BAA0B,CAACN,KAAK,CAAC,EAAE,GAAGF,MAAM;IAC/E,CAAC,sBAAsBS,oBAAoB,CAACP,KAAK,CAAC,EAAE,GAAG,CAACJ,OAAO,IAAI,CAACE,MAAM;IAC1E,+BAA+B,EAAEC,KAAK;IACtC,iBAAiB,EAAEJ,OAAO;IAC1B,WAAW,EAAEC,OAAO,IAAI,CAACE,MAAM;IAC/B,SAAS,EAAE,CAACC,KAAK;IACjB,iBAAiB,EAAE,CAACJ,OAAO,IAAI,CAACI,KAAK;IACrC,cAAc,EAAEJ,OAAO,IAAIO;GAC9B,EACDV,KAAK,CAACW,SAAS,CAClB;EAED,MAAMK,OAAO,GAAGA;IACZ,IAAIb,OAAO,EAAE;MACT,oBAAOJ,cAACkB,cAAc,QAAEf,QAAQ,CAAkB;;IAEtD,IAAIG,MAAM,EAAE;MACR,oBACIN,2CACIA;QAAKY,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAEG,oBAAoB,CAACP,KAAK,CAAC;QAAK,EAC/EN,QAAQ,CACV;;IAGX,OAAOA,QAAQ;GAClB;EAED,oBACIH,wCACQU,UAAU;mBACF,MAAM;iBACR,QAAQ;IAClBE,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBV,GAAG,EAAEA,GAAG;IACRiB,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEnB,KAAK,CAAC,YAAY;MACxBgB,OAAO,EAAE,CACP;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/BadgeIcon/BadgeIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BadgeIcon.js","sources":["../../../../../../../src/components/BadgeIcon/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { getSubtleColorShadeClasses, getColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { Color } from '../../types';\n\nexport type BadgeIconProps = React.HTMLAttributes<HTMLSpanElement> & {\n / Icon type /\n icon: IconName;\n / Background color /\n color?: Color;\n / Show subtle version /\n subtle?: boolean;\n / Show small version of badge icon /\n small?: boolean;\n};\n\nexport const BadgeIcon = React.forwardRef(function Badge(props: BadgeIconProps, ref: React.Ref<HTMLSpanElement>) {\n const { color, icon, subtle, small, ...otherProps } = props;\n\n const className = cn(\n `rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full`,\n { 'w-5 h-5': !small },\n { 'w-4 h-4 text-xs': small },\n { [getSubtleColorShadeClasses(color)]: subtle, [getColorShadeClasses(color)]: !subtle },\n props.className\n );\n\n const iconProps = {\n strokeWidth: 1,\n stroke: 'currentColor',\n };\n\n return (\n <span\n {...otherProps}\n aria-label=\"icon\"\n className={className}\n data-taco=\"badge-icon\"\n ref={ref}\n role=\"status\"\n title={props['aria-label']}>\n <Icon name={icon} {...iconProps} />\n </span>\n );\n});\n"],"names":["BadgeIcon","React","Badge","props","ref","color","icon","subtle","small","otherProps","className","cn","getSubtleColorShadeClasses","getColorShadeClasses","iconProps","strokeWidth","stroke","role","title","Icon","name"],"mappings":";;;;;MAiBaA,SAAS,gBAAGC,UAAgB,CAAC,SAASC,KAAKA,CAACC,KAAqB,EAAEC,GAA+B;EAC3G,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAE3D,MAAMO,SAAS,GAAGC,EAAE,~~oIACmH~~,EACnI;IAAE,SAAS,EAAE,CAACH;GAAO,EACrB;IAAE,iBAAiB,EAAEA;GAAO,EAC5B;IAAE,CAACI,0BAA0B,CAACP,KAAK,CAAC,GAAGE,MAAM;IAAE,CAACM,oBAAoB,CAACR,KAAK,CAAC,GAAG,CAACE;GAAQ,EACvFJ,KAAK,CAACO,SAAS,CAClB;EAED,MAAMI,SAAS,GAAG;IACdC,WAAW,EAAE,CAAC;IACdC,MAAM,EAAE;GACX;EAED,oBACIf,wCACQQ,UAAU;kBACH,MAAM;IACjBC,SAAS,EAAEA,SAAS;iBACV,YAAY;IACtBN,GAAG,EAAEA,GAAG;IACRa,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEf,KAAK,CAAC,YAAY;mBACzBF,cAACkB,IAAI;IAACC,IAAI,EAAEd;KAAUQ,SAAS,EAAI,CAChC;AAEf,CAAC;;;;"}
1	+ {"version":3,"file":"BadgeIcon.js","sources":["../../../../../../../src/components/BadgeIcon/BadgeIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { getSubtleColorShadeClasses, getColorShadeClasses } from '../../utils/tailwind';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { Color } from '../../types';\n\nexport type BadgeIconProps = React.HTMLAttributes<HTMLSpanElement> & {\n / Icon type /\n icon: IconName;\n / Background color /\n color?: Color;\n / Show subtle version /\n subtle?: boolean;\n / Show small version of badge icon /\n small?: boolean;\n};\n\nexport const BadgeIcon = React.forwardRef(function Badge(props: BadgeIconProps, ref: React.Ref<HTMLSpanElement>) {\n const { color, icon, subtle, small, ...otherProps } = props;\n\n const className = cn(\n `rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full`,\n { 'w-5 h-5': !small },\n { 'w-4 h-4 text-xs': small },\n { [getSubtleColorShadeClasses(color)]: subtle, [getColorShadeClasses(color)]: !subtle },\n props.className\n );\n\n const iconProps = {\n strokeWidth: 1,\n stroke: 'currentColor',\n };\n\n return (\n <span\n {...otherProps}\n aria-label=\"icon\"\n className={className}\n data-taco=\"badge-icon\"\n ref={ref}\n role=\"status\"\n title={props['aria-label']}>\n <Icon name={icon} {...iconProps} />\n </span>\n );\n});\n"],"names":["BadgeIcon","React","Badge","props","ref","color","icon","subtle","small","otherProps","className","cn","getSubtleColorShadeClasses","getColorShadeClasses","iconProps","strokeWidth","stroke","role","title","Icon","name"],"mappings":";;;;;MAiBaA,SAAS,gBAAGC,UAAgB,CAAC,SAASC,KAAKA,CAACC,KAAqB,EAAEC,GAA+B;EAC3G,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAE3D,MAAMO,SAAS,GAAGC,EAAE,CAChB,mIAAmI,EACnI;IAAE,SAAS,EAAE,CAACH;GAAO,EACrB;IAAE,iBAAiB,EAAEA;GAAO,EAC5B;IAAE,CAACI,0BAA0B,CAACP,KAAK,CAAC,GAAGE,MAAM;IAAE,CAACM,oBAAoB,CAACR,KAAK,CAAC,GAAG,CAACE;GAAQ,EACvFJ,KAAK,CAACO,SAAS,CAClB;EAED,MAAMI,SAAS,GAAG;IACdC,WAAW,EAAE,CAAC;IACdC,MAAM,EAAE;GACX;EAED,oBACIf,wCACQQ,UAAU;kBACH,MAAM;IACjBC,SAAS,EAAEA,SAAS;iBACV,YAAY;IACtBN,GAAG,EAAEA,GAAG;IACRa,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEf,KAAK,CAAC,YAAY;mBACzBF,cAACkB,IAAI;IAACC,IAAI,EAAEd;KAAUQ,SAAS,EAAI,CAChC;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Banner/Banner.js CHANGED Viewed

@@ -18,7 +18,7 @@ const Banner = /*#__PURE__*/forwardRef(function Banner(props, ref) {
     className: className,
     "data-taco": "banner",
     ref: ref
-  }, getBannerIcon(state), children, onClose ? ( /*#__PURE__*/createElement(IconButton, {
+  }, getBannerIcon(state), children, onClose ? (/*#__PURE__*/createElement(IconButton, {
     "aria-label": texts.banner.close,
     className: "-mr-2 ml-auto self-start",
     icon: "close",

package/dist/esm/packages/taco/src/components/Banner/Banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.js","sources":["../../../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Content can be any react element, for e.g. a `div` /\n children: React.ReactNode;\n /* State will change the icon displayed in banner /\n state: State;\n onClose?: () => void;\n};\n\nexport type BannerTexts = {\n /* Aria-label for the close icon button of banner */\n close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n const { children, state, onClose } = props;\n const { texts } = useLocalization();\n const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n return (\n <div className={className} data-taco=\"banner\" ref={ref}>\n {getBannerIcon(state)}\n {children}\n {onClose ? (\n <IconButton\n aria-label={texts.banner.close}\n className=\"-mr-2 ml-auto self-start\"\n icon=\"close\"\n appearance=\"discrete\"\n onClick={onClose}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","texts","useLocalization","className","cn","getBannerIcon","IconButton","banner","close","icon","appearance","onClick"],"mappings":";;;;;;MAoBaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAA8B;EACrG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;GAAS,GAAGJ,KAAK;EAC1C,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGC,EAAE,CAAC,8EAA8E,EAAER,KAAK,CAACO,SAAS,CAAC;EAErH,oBACIR;IAAKQ,SAAS,EAAEA,SAAS;iBAAY,QAAQ;IAACN,GAAG,EAAEA;KAC9CQ,aAAa,CAACN,KAAK,CAAC,EACpBD,QAAQ,EACRE,OAAO,~~kBACJL~~,cAACW,UAAU;kBACKL,KAAK,CAACM,MAAM,CAACC,KAAK;IAC9BL,SAAS,EAAC,0BAA0B;IACpCM,IAAI,EAAC,OAAO;IACZC,UAAU,EAAC,UAAU;IACrBC,OAAO,EAAEX;IACX,IACF,IAAI,CACN;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"Banner.js","sources":["../../../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Content can be any react element, for e.g. a `div` /\n children: React.ReactNode;\n /* State will change the icon displayed in banner /\n state: State;\n onClose?: () => void;\n};\n\nexport type BannerTexts = {\n /* Aria-label for the close icon button of banner */\n close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n const { children, state, onClose } = props;\n const { texts } = useLocalization();\n const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n return (\n <div className={className} data-taco=\"banner\" ref={ref}>\n {getBannerIcon(state)}\n {children}\n {onClose ? (\n <IconButton\n aria-label={texts.banner.close}\n className=\"-mr-2 ml-auto self-start\"\n icon=\"close\"\n appearance=\"discrete\"\n onClick={onClose}\n />\n ) : null}\n </div>\n );\n});\n"],"names":["Banner","React","props","ref","children","state","onClose","texts","useLocalization","className","cn","getBannerIcon","IconButton","banner","close","icon","appearance","onClick"],"mappings":";;;;;;MAoBaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAA8B;EACrG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC;GAAS,GAAGJ,KAAK;EAC1C,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGC,EAAE,CAAC,8EAA8E,EAAER,KAAK,CAACO,SAAS,CAAC;EAErH,oBACIR;IAAKQ,SAAS,EAAEA,SAAS;iBAAY,QAAQ;IAACN,GAAG,EAAEA;KAC9CQ,aAAa,CAACN,KAAK,CAAC,EACpBD,QAAQ,EACRE,OAAO,iBACJL,cAACW,UAAU;kBACKL,KAAK,CAACM,MAAM,CAACC,KAAK;IAC9BL,SAAS,EAAC,0BAA0B;IACpCM,IAAI,EAAC,OAAO;IACZC,UAAU,EAAC,UAAU;IACrBC,OAAO,EAAEX;IACX,IACF,IAAI,CACN;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Button/util.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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';\n\nexport const getButtonClasses = () => {\n return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance \| undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;\n\n case 'danger':\n return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;\n\n case 'ghost':\n return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;\n }\n\n return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;\n }\n\n case 'transparent': {\n return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n }\n\n default:\n return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;\n }\n};\n\nexport const createButtonWithTooltip = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n): JSX.Element => {\n const { tooltip, ...buttonProps } = props;\n const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n if (tooltip) {\n return <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n const { dialog, drawer, hanger, menu, popover } = props;\n let button = buttonBase;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof drawer === 'function') {\n button = drawer({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n if (typeof hanger === 'function') {\n button = hanger({ anchor: button });\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,uLAAuL;AAClM;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,~~4JAA4J~~;IAEhK,KAAK,QAAQ;MACT,~~sJAAsJ~~;IAE1J,KAAK,OAAO;MACR,~~yMAAyM~~;IAE7M,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,~~wGAAwG~~;;QAG5G,~~8GAA8G~~;;IAGlH,KAAK,aAAa;MAAE;QAChB,~~sJAAsJ~~;;IAG1J;MACI,~~yHAAyH~~;;AAErI;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}
1	+ {"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';\n\nexport const getButtonClasses = () => {\n return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';\n};\n\nexport const getAppearanceClasses = (value: Appearance \| undefined, icon = false): string => {\n switch (value) {\n case 'primary':\n return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;\n\n case 'danger':\n return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;\n\n case 'ghost':\n return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;\n\n case 'discrete': {\n if (icon) {\n return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;\n }\n\n return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;\n }\n\n case 'transparent': {\n return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;\n }\n\n default:\n return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;\n }\n};\n\nexport const createButtonWithTooltip = (\n props: any,\n className: string,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>\n): JSX.Element => {\n const { tooltip, ...buttonProps } = props;\n const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n if (tooltip) {\n return <Tooltip title={tooltip}>{button}</Tooltip>;\n }\n\n return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n const { dialog, drawer, hanger, menu, popover } = props;\n let button = buttonBase;\n\n if (typeof dialog === 'function') {\n button = dialog({ trigger: button });\n } else if (typeof drawer === 'function') {\n button = drawer({ trigger: button });\n } else if (typeof menu === 'function') {\n button = menu({ trigger: button });\n } else if (typeof popover === 'function') {\n button = popover({ trigger: button });\n }\n\n if (typeof hanger === 'function') {\n button = hanger({ anchor: button });\n }\n\n return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,uLAAuL;AAClM;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,OAAO,qJAAqJ;IAEhK,KAAK,QAAQ;MACT,OAAO,+IAA+I;IAE1J,KAAK,OAAO;MACR,OAAO,kMAAkM;IAE7M,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,OAAO,iGAAiG;;QAG5G,OAAO,uGAAuG;;IAGlH,KAAK,aAAa;MAAE;QAChB,OAAO,+IAA+I;;IAG1J;MACI,OAAO,kHAAkH;;AAErI;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}

package/dist/esm/packages/taco/src/components/Calendar/Calendar.js CHANGED Viewed

@@ -44,7 +44,7 @@ const Navbar = /*#__PURE__*/memo(({
     name: "month",
     onChange: handleChange,
     value: value.getMonth()
-  }, months.map((month, i) => ( /*#__PURE__*/createElement("option", {
+  }, months.map((month, i) => (/*#__PURE__*/createElement("option", {
     key: month,
     value: i
   }, month)))), /*#__PURE__*/createElement("select", {
@@ -52,7 +52,7 @@ const Navbar = /*#__PURE__*/memo(({
     name: "year",
     onChange: handleChange,
     value: value.getFullYear()
-  }, years.map(year => ( /*#__PURE__*/createElement("option", {
+  }, years.map(year => (/*#__PURE__*/createElement("option", {
     key: year,
     value: year
   }, String(year)))))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
@@ -129,13 +129,13 @@ const Calendar = props => {
         onMonthChange: setVisibleMonth,
         value: visibleMonth
       })),
-      Footer: () => ( /*#__PURE__*/createElement("tfoot", null, /*#__PURE__*/createElement("tr", null, /*#__PURE__*/createElement("td", {
+      Footer: () => (/*#__PURE__*/createElement("tfoot", null, /*#__PURE__*/createElement("tr", null, /*#__PURE__*/createElement("td", {
         colSpan: 7,
         className: "text-center"
       }, /*#__PURE__*/createElement(TodayButton, {
         handleChange: handleChange
       }))))),
-      HeadRow: () => ( /*#__PURE__*/createElement("tr", null, texts.calendar.weekdaysShort.map((weekday, index) => {
+      HeadRow: () => (/*#__PURE__*/createElement("tr", null, texts.calendar.weekdaysShort.map((weekday, index) => {
         const label = texts.calendar.weekdays && texts.calendar.weekdays[index];
         return /*#__PURE__*/createElement("th", {
           key: weekday,

package/dist/esm/packages/taco/src/components/Calendar/Calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Button, CaptionProps, DayClickEventHandler, DayPicker, Matcher } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n /** Aria-label for previous month action button /\n previousMonth: string;\n /* Aria-label for next month action button /\n nextMonth: string;\n /* Aria-label for previous year action button /\n previousYear: string;\n /* Aria-label for next year action button /\n nextYear: string;\n /* Text displayed within today action button /\n today: string;\n};\n\nexport type CalendarTexts = {\n /* Text and aria-label for action buttons in Calendar /\n actions: CalendarTextsActions;\n /* Text abbreviation for months in Calendar's header, starting with January /\n months: string[];\n /* Text abbreviation for days in Calendar's header, starting with Sunday /\n weekdaysShort: string[];\n /* Text for days in Calendar's header, starting with Sunday /\n weekdays: string[];\n};\n\n/* @internal /\ntype CustomNavbarElementProps = {\n onMonthChange: (month: Date) => void;\n value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n years.push(i);\n}\n\nconst Navbar = React.memo(({ onMonthChange, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n const {\n texts: {\n calendar: { actions, months },\n },\n } = useLocalization();\n\n const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n const { year, month } = event.target.form as HTMLFormElement;\n onMonthChange(new Date(year.value, month.value));\n };\n\n const onNextClick = () => {\n onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));\n };\n\n const onPreviousClick = () => {\n onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));\n };\n\n return (\n <div className=\"mb-3 flex items-center justify-between\">\n <form className=\"inline-flex space-x-1\">\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n {months.map((month, i) => (\n <option key={month} value={i}>\n {month}\n </option>\n ))}\n </select>\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n {years.map(year => (\n <option key={year} value={year}>\n {String(year)}\n </option>\n ))}\n </select>\n </form>\n <div>\n <Tooltip title={actions.previousMonth}>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-left\"\n aria-label={actions.previousMonth}\n onClick={onPreviousClick}\n rounded\n />\n </Tooltip>\n <Tooltip title={actions.nextMonth}>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-right\"\n aria-label={actions.nextMonth}\n onClick={onNextClick}\n rounded\n />\n </Tooltip>\n </div>\n </div>\n );\n});\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' \| 'value'> & {\n /* Handler called when a day is clicked in calendar */\n onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n value?: Date;\n disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n const { texts } = useLocalization();\n\n const handleCalendarClickToday = (): void => {\n const today = new Date();\n\n // set to midday to avoid UTC offset causing dates to be mismatched server side\n today.setHours(12);\n today.setMinutes(0);\n today.setSeconds(0);\n\n handleChange(today);\n };\n return (\n <Button\n className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n onClick={handleCalendarClickToday}>\n {texts.calendar.actions.today}\n </Button>\n );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n const { texts } = useLocalization();\n\n React.useEffect(() => {\n if (visibleMonth !== value) {\n setVisibleMonth(value ?? new Date());\n }\n // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n }, [value]);\n\n const handleDayClick: DayClickEventHandler = (date, modifiers, event) => {\n if (modifiers.outside \|\| modifiers.disabled) {\n return;\n }\n\n handleChange(date, event);\n };\n\n const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n return (\n <div data-taco=\"calendar\">\n <DayPicker\n className={className}\n captionLayout=\"dropdown-buttons\"\n weekStartsOn={1}\n month={visibleMonth}\n numberOfMonths={1}\n components={{\n Caption: (props: CaptionProps) => <Navbar {...props} onMonthChange={setVisibleMonth} value={visibleMonth} />,\n Footer: () => (\n <tfoot>\n <tr>\n <td colSpan={7} className=\"text-center\">\n <TodayButton handleChange={handleChange} />\n </td>\n </tr>\n </tfoot>\n ),\n HeadRow: () => (\n <tr>\n {texts.calendar.weekdaysShort.map((weekday, index) => {\n const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n return (\n <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n {weekday}\n </th>\n );\n })}\n </tr>\n ),\n }}\n onDayClick={handleDayClick}\n selected={value}\n disabled={disabledDays}\n />\n </div>\n );\n};\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","onNextClick","getMonth","getDay","onPreviousClick","className","name","onChange","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","TodayButton","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","Button","Calendar","props","disabledDays","otherProps","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","cn","DayPicker","captionLayout","weekStartsOn","numberOfMonths","components","Caption","Footer","colSpan","HeadRow","weekdaysShort","weekday","index","label","weekdays","onDayClick","selected"],"mappings":"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"}
1	+ {"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Button, CaptionProps, DayClickEventHandler, DayPicker, Matcher } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n /** Aria-label for previous month action button /\n previousMonth: string;\n /* Aria-label for next month action button /\n nextMonth: string;\n /* Aria-label for previous year action button /\n previousYear: string;\n /* Aria-label for next year action button /\n nextYear: string;\n /* Text displayed within today action button /\n today: string;\n};\n\nexport type CalendarTexts = {\n /* Text and aria-label for action buttons in Calendar /\n actions: CalendarTextsActions;\n /* Text abbreviation for months in Calendar's header, starting with January /\n months: string[];\n /* Text abbreviation for days in Calendar's header, starting with Sunday /\n weekdaysShort: string[];\n /* Text for days in Calendar's header, starting with Sunday /\n weekdays: string[];\n};\n\n/* @internal /\ntype CustomNavbarElementProps = {\n onMonthChange: (month: Date) => void;\n value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n years.push(i);\n}\n\nconst Navbar = React.memo(({ onMonthChange, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n const {\n texts: {\n calendar: { actions, months },\n },\n } = useLocalization();\n\n const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n const { year, month } = event.target.form as HTMLFormElement;\n onMonthChange(new Date(year.value, month.value));\n };\n\n const onNextClick = () => {\n onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));\n };\n\n const onPreviousClick = () => {\n onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));\n };\n\n return (\n <div className=\"mb-3 flex items-center justify-between\">\n <form className=\"inline-flex space-x-1\">\n <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n {months.map((month, i) => (\n <option key={month} value={i}>\n {month}\n </option>\n ))}\n </select>\n <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n {years.map(year => (\n <option key={year} value={year}>\n {String(year)}\n </option>\n ))}\n </select>\n </form>\n <div>\n <Tooltip title={actions.previousMonth}>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-left\"\n aria-label={actions.previousMonth}\n onClick={onPreviousClick}\n rounded\n />\n </Tooltip>\n <Tooltip title={actions.nextMonth}>\n <IconButton\n appearance=\"discrete\"\n icon=\"chevron-right\"\n aria-label={actions.nextMonth}\n onClick={onNextClick}\n rounded\n />\n </Tooltip>\n </div>\n </div>\n );\n});\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' \| 'value'> & {\n /* Handler called when a day is clicked in calendar */\n onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n value?: Date;\n disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n const { texts } = useLocalization();\n\n const handleCalendarClickToday = (): void => {\n const today = new Date();\n\n // set to midday to avoid UTC offset causing dates to be mismatched server side\n today.setHours(12);\n today.setMinutes(0);\n today.setSeconds(0);\n\n handleChange(today);\n };\n return (\n <Button\n className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n onClick={handleCalendarClickToday}>\n {texts.calendar.actions.today}\n </Button>\n );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n const { texts } = useLocalization();\n\n React.useEffect(() => {\n if (visibleMonth !== value) {\n setVisibleMonth(value ?? new Date());\n }\n // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n }, [value]);\n\n const handleDayClick: DayClickEventHandler = (date, modifiers, event) => {\n if (modifiers.outside \|\| modifiers.disabled) {\n return;\n }\n\n handleChange(date, event);\n };\n\n const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n return (\n <div data-taco=\"calendar\">\n <DayPicker\n className={className}\n captionLayout=\"dropdown-buttons\"\n weekStartsOn={1}\n month={visibleMonth}\n numberOfMonths={1}\n components={{\n Caption: (props: CaptionProps) => <Navbar {...props} onMonthChange={setVisibleMonth} value={visibleMonth} />,\n Footer: () => (\n <tfoot>\n <tr>\n <td colSpan={7} className=\"text-center\">\n <TodayButton handleChange={handleChange} />\n </td>\n </tr>\n </tfoot>\n ),\n HeadRow: () => (\n <tr>\n {texts.calendar.weekdaysShort.map((weekday, index) => {\n const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n return (\n <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n {weekday}\n </th>\n );\n })}\n </tr>\n ),\n }}\n onDayClick={handleDayClick}\n selected={value}\n disabled={disabledDays}\n />\n </div>\n );\n};\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","onNextClick","getMonth","getDay","onPreviousClick","className","name","onChange","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","TodayButton","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","Button","Calendar","props","disabledDays","otherProps","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","cn","DayPicker","captionLayout","weekStartsOn","numberOfMonths","components","Caption","Footer","colSpan","HeadRow","weekdaysShort","weekday","index","label","weekdays","onDayClick","selected"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Card/Card.js CHANGED Viewed

@@ -29,8 +29,8 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     "data-taco": "card",
     ref: ref
   }, /*#__PURE__*/createElement("div", {
-    className: "mx-4 mb-2 mt-4 flex"
-  }, title && ( /*#__PURE__*/createElement(Truncate, {
+    className: "mx-4 mb-2 mt-4 flex justify-between"
+  }, title && (/*#__PURE__*/createElement(Truncate, {
     tooltip: title
   }, /*#__PURE__*/createElement("h4", {
     className: "mb-0 flex-grow truncate text-left"

package/dist/esm/packages/taco/src/components/Card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n const { noPadding, ...props } = externalProps;\n const className = cn(\n 'flex-grow overflow-auto',\n {\n 'mx-4 mb-4': !noPadding,\n },\n props.className\n );\n return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Title of the Card /\n title: string \| React.ReactElement;\n /* Menu component associated with the Card */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n const { title, menu, children } = props;\n const className = cn(\n 'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n props.className\n );\n\n return (\n <div className={className} data-taco=\"card\" ref={ref}>\n <div className=\"mx-4 mb-2 mt-4 flex\">\n {title && (\n <Truncate tooltip={title}>\n <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n </Truncate>\n )}\n {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n </div>\n {children}\n </div>\n );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACH,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC;GAAU,GAAGN,KAAK;EACvC,MAAMC,SAAS,GAAGC,EAAE,CAChB,kHAAkH,EAClHF,KAAK,CAACC,SAAS,CAClB;EAED,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;kBAC7CH;IAAKM,SAAS,EAAC;KACVG,KAAK,~~mBACFT~~,cAACY,QAAQ;IAACC,OAAO,EAAEJ;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACc,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACN,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}
1	+ {"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n const { noPadding, ...props } = externalProps;\n const className = cn(\n 'flex-grow overflow-auto',\n {\n 'mx-4 mb-4': !noPadding,\n },\n props.className\n );\n return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Title of the Card /\n title: string \| React.ReactElement;\n /* Menu component associated with the Card */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n const { title, menu, children } = props;\n const className = cn(\n 'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n props.className\n );\n\n return (\n <div className={className} data-taco=\"card\" ref={ref}>\n <div className=\"mx-4 mb-2 mt-4 flex justify-between\">\n {title && (\n <Truncate tooltip={title}>\n <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n </Truncate>\n )}\n {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n </div>\n {children}\n </div>\n );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACH,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC;GAAU,GAAGN,KAAK;EACvC,MAAMC,SAAS,GAAGC,EAAE,CAChB,kHAAkH,EAClHF,KAAK,CAACC,SAAS,CAClB;EAED,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;kBAC7CH;IAAKM,SAAS,EAAC;KACVG,KAAK,kBACFT,cAACY,QAAQ;IAACC,OAAO,EAAEJ;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACc,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACN,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js CHANGED Viewed

@@ -55,9 +55,9 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     onCheckedChange: handleChange,
     onKeyDown: handleKeyDown,
     ref: ref
-  }), loading ? ( /*#__PURE__*/createElement(Spinner, {
+  }), loading ? (/*#__PURE__*/createElement(Spinner, {
     className: spinnerClassname
-  })) : ( /*#__PURE__*/createElement(Indicator, {
+  })) : (/*#__PURE__*/createElement(Indicator, {
     className: "flex h-full w-full"
   }, /*#__PURE__*/createElement(Icon, {
     name: indeterminate ? 'line' : 'tick',

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean \| 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' \| 'onChange'> & {\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 /* Displays loading state in checkbox /\n loading?: boolean;\n / Whether user input is required /\n required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n checked?: never;\n onChange?: never;\n / The default checked state (uncontrolled) /\n defaultChecked?: boolean;\n}\n\nexport interface 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, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n const id = useId(props.id);\n\n const className = cn(\n 'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n {\n 'self-start': !!label,\n },\n invalid\n ? {\n 'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n !props.disabled,\n 'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n }\n : {\n 'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n !props.disabled,\n 'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': 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 let labelledByProps: Record<string, string> \| null = null;\n\n if (label) {\n labelledByProps = {\n 'aria-labelledby': `${id}-label`,\n id,\n };\n }\n\n // the enter keyboard shortcut isn't supported by default, but we want it\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter') {\n event.currentTarget.click();\n }\n };\n\n const spinnerClassname = cn(\n //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n { 'text-blue-500': !checked && !indeterminate }\n );\n\n const element = (\n <CheckboxPrimitive.Root\n {...otherProps}\n {...labelledByProps}\n aria-invalid={invalid ? 'true' : undefined}\n data-taco=\"checkbox\"\n checked={indeterminate ? 'indeterminate' : checked}\n className={className}\n onCheckedChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}>\n {loading ? (\n <Spinner className={spinnerClassname} />\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 )}\n </CheckboxPrimitive.Root>\n );\n\n if (label) {\n const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n 'cursor-not-allowed text-grey-300': props.disabled,\n });\n\n return (\n <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n {element}\n <label htmlFor={id} id={`${id}-label`}>\n {label}\n </label>\n </span>\n );\n }\n\n return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACP;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,~~KAAKN~~,~~UAAU~~;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,~~kBACJP~~,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,~~mBAExCtB~~,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,~~KAAKA~~;~~OACtBJ~~,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean \| 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' \| 'onChange'> & {\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 /* Displays loading state in checkbox /\n loading?: boolean;\n / Whether user input is required /\n required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n checked?: never;\n onChange?: never;\n / The default checked state (uncontrolled) /\n defaultChecked?: boolean;\n}\n\nexport interface 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, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n const id = useId(props.id);\n\n const className = cn(\n 'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n {\n 'self-start': !!label,\n },\n invalid\n ? {\n 'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n !props.disabled,\n 'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n }\n : {\n 'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n !props.disabled,\n 'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': 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 let labelledByProps: Record<string, string> \| null = null;\n\n if (label) {\n labelledByProps = {\n 'aria-labelledby': `${id}-label`,\n id,\n };\n }\n\n // the enter keyboard shortcut isn't supported by default, but we want it\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter') {\n event.currentTarget.click();\n }\n };\n\n const spinnerClassname = cn(\n //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n { 'text-blue-500': !checked && !indeterminate }\n );\n\n const element = (\n <CheckboxPrimitive.Root\n {...otherProps}\n {...labelledByProps}\n aria-invalid={invalid ? 'true' : undefined}\n data-taco=\"checkbox\"\n checked={indeterminate ? 'indeterminate' : checked}\n className={className}\n onCheckedChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}>\n {loading ? (\n <Spinner className={spinnerClassname} />\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 )}\n </CheckboxPrimitive.Root>\n );\n\n if (label) {\n const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n 'cursor-not-allowed text-grey-300': props.disabled,\n });\n\n return (\n <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n {element}\n <label htmlFor={id} id={`${id}-label`}>\n {label}\n </label>\n </span>\n );\n }\n\n return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACP;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGN,EAAE,QAAQ;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCtB,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBJ,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/Combobox/Combobox.js CHANGED Viewed

@@ -42,7 +42,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     ref: ref
   }), /*#__PURE__*/createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
-    button: props.readOnly ? undefined : props.inline ? ( /*#__PURE__*/createElement(IconButton
+    button: props.readOnly ? undefined : props.inline ? (/*#__PURE__*/createElement(IconButton
     // In case of inline combobox, this icon button acts only as visual chevron representation,
     // so should be taken out of screen reader scope.
     , {
@@ -56,7 +56,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
         (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
       },
       tabIndex: -1
-    })) : dialog ? ( /*#__PURE__*/createElement(IconButton, {
+    })) : dialog ? (/*#__PURE__*/createElement(IconButton, {
       "aria-label": texts.combobox.tooltip,
       icon: "list-search",
       disabled: props.readOnly || props.disabled,

package/dist/esm/packages/taco/src/components/Combobox/Combobox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n /* Tooltip shown for the dialog button /\n tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' \| 'button' \| 'onChange' \| 'value'> & {\n /* Array of options in combobox /\n data?: ComboboxItem[];\n /\n Initial value of the input in combobox.\n * This is used when combobox is mounted, if no value is provided.\n * Note that combobox is a controlled component, setting this will also trigger the `onChange` event\n /\n defaultValue?: ComboboxValue;\n /* Set what value should have an empty option in combobox /\n emptyValue?: ComboboxValue;\n /* Draws attention to the combobox by changing its style and making it visually prominent /\n highlighted?: boolean;\n /* Displays loading state in listbox /\n loading?: boolean;\n /\n Handler called when user chooses an option from the provided suggestions.\n * Suggestions will be calculated based on the input value.\n * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /* Handler called when the user enters a query /\n onSearch?: (query: string) => void \| Promise<void>;\n / Value of the input in combobox /\n value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n dialog?: never;\n /\n Combobox will display its data when input is clicked/focused, even if the input is empty.\n * Note that default combobox will display matching data only when user starts typing in input.\n */\n inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n dialog: (props: Partial<DialogProps>) => JSX.Element;\n inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps \| DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n const { className: externalClassName, dialog, style, ...otherProps } = props;\n const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n const internalRef = React.useRef<HTMLDivElement>(null);\n const { texts } = useLocalization();\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn(\n 'inline-flex relative',\n {\n 'yt-combobox--inline': props.inline,\n },\n externalClassName\n );\n\n return (\n <span className={className} data-taco=\"combobox\" style={style}>\n <PopoverPrimitive.Root {...popover}>\n <PopoverPrimitive.Anchor asChild ref={internalRef}>\n <div {...combobox} className=\"inline w-full\" ref={ref}>\n <Input\n {...input}\n autoComplete=\"off\"\n button={\n props.readOnly ? undefined : props.inline ? (\n <IconButton\n // In case of inline combobox, this icon button acts only as visual chevron representation,\n // so should be taken out of screen reader scope.\n aria-hidden\n appearance=\"discrete\"\n className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n icon={popover.open ? 'chevron-up' : 'chevron-down'}\n onClick={() => {\n popover.onOpenChange(true);\n input.ref.current?.focus();\n }}\n tabIndex={-1}\n />\n ) : dialog ? (\n <IconButton\n aria-label={texts.combobox.tooltip}\n icon=\"list-search\"\n disabled={props.readOnly \|\| props.disabled}\n dialog={dialog}\n onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n event.preventDefault();\n input.ref.current?.focus();\n }}\n ref={button.ref}\n tabIndex={-1}\n tooltip={texts.combobox.tooltip}\n />\n ) : undefined\n }\n />\n </div>\n </PopoverPrimitive.Anchor>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n align=\"start\"\n onOpenAutoFocus={event => {\n event.preventDefault();\n }}\n sideOffset={4}>\n <ScrollableList\n {...list}\n className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n style={{ minWidth: selectDimensions?.width }}\n tabIndex={popover.open ? 0 : -1}\n />\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n </span>\n );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","readOnly","undefined","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","onFocus","event","preventDefault","_input$ref$current2","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACwB,QAAQ,GAAGC,SAAS,GAAGzB,KAAK,CAACmB,MAAM,~~kBACrCpB~~,cAAC2B;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBzB,SAAS,EAAC,uEAAuE;MACjF0B,IAAI,EAAElB,OAAO,CAACmB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLpB,OAAO,CAACqB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAAvB,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF/B,MAAM,~~kBACNL~~,cAAC2B,UAAU;oBACKZ,KAAK,CAACP,QAAQ,CAAC6B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAErC,KAAK,CAACwB,QAAQ,IAAIxB,KAAK,CAACqC,QAAQ;MAC1CjC,MAAM,EAAEA,MAAM;MACdkC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAAhC,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAQ,mBAAA,uBAAjBA,mBAAA,CAAmBP,KAAK,EAAE;OAC7B;MACDjC,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfkC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEtB,KAAK,CAACP,QAAQ,CAAC6B;MAC1B,IACFX;KAEV,CACA,CACgB,eAC1B1B,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDI,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5CZ,QAAQ,EAAEzB,OAAO,CAACmB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}
1	+ {"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n /* Tooltip shown for the dialog button /\n tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' \| 'button' \| 'onChange' \| 'value'> & {\n /* Array of options in combobox /\n data?: ComboboxItem[];\n /\n Initial value of the input in combobox.\n * This is used when combobox is mounted, if no value is provided.\n * Note that combobox is a controlled component, setting this will also trigger the `onChange` event\n /\n defaultValue?: ComboboxValue;\n /* Set what value should have an empty option in combobox /\n emptyValue?: ComboboxValue;\n /* Draws attention to the combobox by changing its style and making it visually prominent /\n highlighted?: boolean;\n /* Displays loading state in listbox /\n loading?: boolean;\n /\n Handler called when user chooses an option from the provided suggestions.\n * Suggestions will be calculated based on the input value.\n * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /* Handler called when the user enters a query /\n onSearch?: (query: string) => void \| Promise<void>;\n / Value of the input in combobox /\n value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n dialog?: never;\n /\n Combobox will display its data when input is clicked/focused, even if the input is empty.\n * Note that default combobox will display matching data only when user starts typing in input.\n */\n inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n dialog: (props: Partial<DialogProps>) => JSX.Element;\n inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps \| DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n const { className: externalClassName, dialog, style, ...otherProps } = props;\n const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n const internalRef = React.useRef<HTMLDivElement>(null);\n const { texts } = useLocalization();\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn(\n 'inline-flex relative',\n {\n 'yt-combobox--inline': props.inline,\n },\n externalClassName\n );\n\n return (\n <span className={className} data-taco=\"combobox\" style={style}>\n <PopoverPrimitive.Root {...popover}>\n <PopoverPrimitive.Anchor asChild ref={internalRef}>\n <div {...combobox} className=\"inline w-full\" ref={ref}>\n <Input\n {...input}\n autoComplete=\"off\"\n button={\n props.readOnly ? undefined : props.inline ? (\n <IconButton\n // In case of inline combobox, this icon button acts only as visual chevron representation,\n // so should be taken out of screen reader scope.\n aria-hidden\n appearance=\"discrete\"\n className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n icon={popover.open ? 'chevron-up' : 'chevron-down'}\n onClick={() => {\n popover.onOpenChange(true);\n input.ref.current?.focus();\n }}\n tabIndex={-1}\n />\n ) : dialog ? (\n <IconButton\n aria-label={texts.combobox.tooltip}\n icon=\"list-search\"\n disabled={props.readOnly \|\| props.disabled}\n dialog={dialog}\n onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n event.preventDefault();\n input.ref.current?.focus();\n }}\n ref={button.ref}\n tabIndex={-1}\n tooltip={texts.combobox.tooltip}\n />\n ) : undefined\n }\n />\n </div>\n </PopoverPrimitive.Anchor>\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n align=\"start\"\n onOpenAutoFocus={event => {\n event.preventDefault();\n }}\n sideOffset={4}>\n <ScrollableList\n {...list}\n className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n style={{ minWidth: selectDimensions?.width }}\n tabIndex={popover.open ? 0 : -1}\n />\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n </span>\n );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","readOnly","undefined","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","onFocus","event","preventDefault","_input$ref$current2","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACwB,QAAQ,GAAGC,SAAS,GAAGzB,KAAK,CAACmB,MAAM,iBACrCpB,cAAC2B;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBzB,SAAS,EAAC,uEAAuE;MACjF0B,IAAI,EAAElB,OAAO,CAACmB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLpB,OAAO,CAACqB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAAvB,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF/B,MAAM,iBACNL,cAAC2B,UAAU;oBACKZ,KAAK,CAACP,QAAQ,CAAC6B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAErC,KAAK,CAACwB,QAAQ,IAAIxB,KAAK,CAACqC,QAAQ;MAC1CjC,MAAM,EAAEA,MAAM;MACdkC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAAhC,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAQ,mBAAA,uBAAjBA,mBAAA,CAAmBP,KAAK,EAAE;OAC7B;MACDjC,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfkC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEtB,KAAK,CAACP,QAAQ,CAAC6B;MAC1B,IACFX;KAEV,CACA,CACgB,eAC1B1B,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDI,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5CZ,QAAQ,EAAEzB,OAAO,CAACmB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Datepicker/Datepicker.js CHANGED Viewed

@@ -36,16 +36,16 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/createElement(Input, Object.assign({}, input, {
-    button: input.readOnly ? undefined : ( /*#__PURE__*/createElement(IconButton, {
+    button: input.readOnly ? undefined : (/*#__PURE__*/createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
       tabIndex: -1,
-      popover: props => ( /*#__PURE__*/createElement(Popover, Object.assign({}, props), /*#__PURE__*/createElement(Popover.Content, {
+      popover: props => (/*#__PURE__*/createElement(Popover, Object.assign({}, props), /*#__PURE__*/createElement(Popover.Content, {
         onOpenAutoFocus: handleOpenAutofocus
       }, ({
         close
-      }) => ( /*#__PURE__*/createElement("div", {
+      }) => (/*#__PURE__*/createElement("div", {
         className: '[&_button[name="day"]:focus]:yt-focus -m-3 flex',
         ref: popoverContentRef
       }, /*#__PURE__*/createElement(Calendar, Object.assign({}, calendar, {
@@ -53,11 +53,11 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
           calendar.onChange(date, event);
           close();
         }
-      })), shortcuts && ( /*#__PURE__*/createElement("div", {
+      })), shortcuts && (/*#__PURE__*/createElement("div", {
         className: "border-grey-300 flex flex-col border-l"
       }, /*#__PURE__*/createElement("span", {
         className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
-      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/createElement("ul", null, shortcuts.map(shortcut => ( /*#__PURE__*/createElement("li", {
+      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/createElement("ul", null, shortcuts.map(shortcut => (/*#__PURE__*/createElement("li", {
         key: shortcut.text
       }, /*#__PURE__*/createElement("button", {
         type: "button",
@@ -67,7 +67,7 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
           shortcut.onClick(event);
           close();
         }
-      }, shortcut.text))))), handleReset && ( /*#__PURE__*/createElement("button", {
+      }, shortcut.text))))), handleReset && (/*#__PURE__*/createElement("button", {
         type: "button",
         className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
         onClick: event => {