@economic/taco 1.17.2 → 1.17.4

package/dist/taco.cjs.development.js

@@ -3886,7 +3886,7 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]', {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]', {
     // default
     'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,
     'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,
@@ -7678,18 +7678,17 @@ const Title$3 = /*#__PURE__*/React__default.forwardRef(function Listbox2Group(pr
   }));
 });
 
-const colors = {
-  green: 'bg-green-100 text-green-900',
-  yellow: 'bg-yellow-100 text-yellow-900',
-  red: 'bg-red-100 text-red-900',
-  blue: 'bg-blue-100 text-blue-900',
-  purple: 'bg-purple-100 text-purple-900',
-  orange: 'bg-orange-100 text-orange-900',
-  brown: 'bg-brown-100 text-brown-900',
-  pink: 'bg-pink-100 text-pink-900',
-  grey: 'bg-grey-200 text-grey-900'
+const TAG_COLORS = {
+  green: 'wcag-green-100',
+  yellow: 'wcag-yellow-100',
+  red: 'wcag-red-100',
+  blue: 'wcag-blue-100',
+  purple: 'wcag-purple-100',
+  orange: 'wcag-orange-100',
+  brown: 'wcag-brown-100',
+  pink: 'wcag-pink-100',
+  grey: 'wcag-grey-200'
 };
-
 const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     children,
@@ -7706,7 +7705,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     'hover:bg-opacity-75': !disabled,
     'cursor-pointer': !!otherProps.onClick,
     'pointer-events-none': disabled || readOnly
-  }, color ? colors[color] : colors.grey, props.className);
+  }, color ? TAG_COLORS[color] : TAG_COLORS.grey, props.className);
   return /*#__PURE__*/React__default.createElement("span", Object.assign({}, otherProps, {
     className: className,
     ref: ref
@@ -7748,7 +7747,7 @@ function _catch(body, recover) {
   return result;
 }
 
-const AVAILABLE_COLORS = /*#__PURE__*/Object.keys(colors);
+const AVAILABLE_COLORS = /*#__PURE__*/Object.keys(TAG_COLORS);
 const EditPopover = props => {
   const {
     color: initialColor,
@@ -7909,7 +7908,7 @@ const Colours = props => {
     value: color
   }, AVAILABLE_COLORS.map(availableColor => /*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Item, {
     "aria-label": color,
-    className: cn('flex h-6 w-6 cursor-pointer items-center justify-center rounded', colors[availableColor]),
+    className: cn('flex h-6 w-6 cursor-pointer items-center justify-center rounded', TAG_COLORS[availableColor]),
     key: availableColor,
     onFocus: () => onChangeColor(availableColor),
     value: availableColor
@@ -8139,7 +8138,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     readOnly,
     tags
   } = useSelect2Context();
-  const contentClassName = cn('truncate flex items-center gap-1');
+  const contentClassName = cn('truncate items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
   if (currentValue) {
@@ -8159,7 +8158,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   }
   return /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: contentClassName
   }, output));
 });
@@ -8184,10 +8183,10 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     className
   } = buttonProps;
   if (open) {
-    className = cn('absolute z-20', buttonProps.className);
+    className = cn('!absolute z-20', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
       className: "my-1 flex max-h-[5.5rem] flex-col"
-    }, /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
     }, valuesAsChildren.map(child => /*#__PURE__*/React__default.createElement(Tag$1, {
       key: child.props.value,
@@ -8210,7 +8209,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
       valuesAsChildren: valuesAsChildren
     });
   }
-  return /*#__PURE__*/React__default.createElement("span", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: cn('relative inline-flex flex-grow', {
       'h-8': open
     }),
@@ -8241,9 +8240,9 @@ const MultipleValue = ({
       setValue(tagValue);
     }
   };
-  return /*#__PURE__*/React__default.createElement("span", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "relative flex items-center gap-1 overflow-hidden"
-  }, /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-1 truncate",
     ref: el => setContentRef(el)
   }, valuesAsChildren.map((child, index) => {
@@ -9260,7 +9259,7 @@ const useRowSelect = onSelectedRows => {
             lastSelectedSortedIndex.current = sortedIndex;
           };
           return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, props, {
-            className: "mt-2.5",
+            className: "!mt-2.5",
             onClick: onClick,
             // this is necessary to remove console spam from eslint
             onChange: () => false
@@ -9846,7 +9845,7 @@ const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(prop
   }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup, index) => /*#__PURE__*/React__default.createElement("div", {
     key: index,
     role: "row",
-    className: "border-grey-100 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
+    className: "border-grey-300 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
   }, headerGroup.headers.map((cell, index) => /*#__PURE__*/React__default.createElement(Column, {
     key: index,
     index: index,
@@ -10226,7 +10225,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-100 flex flex-row m-0 mb-4', props.className);
+  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -10520,6 +10519,7 @@ exports.Select = Select;
 exports.Select2 = Select2;
 exports.Spinner = Spinner$1;
 exports.Switch = Switch;
+exports.TAG_COLORS = TAG_COLORS;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Tag = Tag$1;