@uniformdev/design-system 19.179.1-alpha.1 → 19.180.0

package/dist/esm/index.js

@@ -863,7 +863,8 @@ var button = css8`
   cursor: pointer;
   display: inline-flex;
   font-weight: var(--fw-medium);
-  transition: color var(--duration-fast) var(--timing-ease-out),
+  transition:
+    color var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out);
   max-width: max-content;
   gap: var(--spacing-sm);
@@ -1641,9 +1642,11 @@ var input = (whiteSpaceWrap) => css12`
   width: 100%;
   position: relative;
   white-space: ${whiteSpaceWrap};
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
 
   &::placeholder {
     color: var(--gray-400);
@@ -1763,7 +1766,8 @@ var toggleInput = css12`
   background: var(--white);
   width: var(--spacing-md);
   height: var(--spacing-md);
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
 
@@ -2002,7 +2006,9 @@ var addButton = css15`
   cursor: pointer;
   display: inline-flex;
   padding: 0;
-  transition: transform var(--duration-fast) var(--timing-ease-out), background var(--duration-slow);
+  transition:
+    transform var(--duration-fast) var(--timing-ease-out),
+    background var(--duration-slow);
   transform: scale(0.95);
   width: var(--max-size);
   height: var(--max-size);
@@ -3119,10 +3125,37 @@ var customIcons = {
 
 // src/components/Icons/systemIcons.tsx
 import { GenIcon as GenIcon2 } from "@react-icons/all-files";
+import { CgGlobeAlt } from "@react-icons/all-files/cg/CgGlobeAlt";
 import { CgList } from "@react-icons/all-files/cg/CgList";
 import { CgPen } from "@react-icons/all-files/cg/CgPen";
+import { TbBinaryTree2 } from "@react-icons/all-files/tb/TbBinaryTree2";
 import { TbBox } from "@react-icons/all-files/tb/TbBox";
 var uniformComponentIcon = TbBox;
+var uniformConditionalValuesIcon = TbBinaryTree2;
+var uniformAiIcon = customIcons["magic-wand"];
+var uniformLocaleIcon = CgGlobeAlt;
+var uniformLocaleDisabledIcon = GenIcon2({
+  tag: "svg",
+  attr: { fill: "currentColor", viewBox: "0 0 24 24", role: "img" },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fillRule: "evenodd",
+        d: "M20.123 15.88A9 9 0 0 0 8.12 3.877l2.787 2.787c.03-.073.06-.145.092-.216.294-.661.592-1.073.823-1.292a.988.988 0 0 1 .178-.14.991.991 0 0 1 .178.14c.23.22.528.63.823 1.292.366.825.665 1.901.838 3.148l3.593 3.594a9.739 9.739 0 0 0 1.548-.665 6.968 6.968 0 0 1-.385 1.827l1.528 1.528ZM14.805 5.585c.691 1.53 1.136 3.62 1.19 5.945a9.939 9.939 0 0 0 1.557-.53c.6-.266.994-.536 1.226-.756a7.016 7.016 0 0 0-3.973-4.66ZM3.877 8.12A9 9 0 0 0 15.88 20.123l-2.787-2.787a7.89 7.89 0 0 1-.092.216c-.294.661-.593 1.073-.823 1.292a.996.996 0 0 1-.178.14.99.99 0 0 1-.178-.14c-.23-.22-.529-.63-.823-1.292-.367-.825-.666-1.901-.838-3.148L6.967 11.21a8.334 8.334 0 0 1-.519-.21c-.6-.266-.995-.536-1.226-.756a6.95 6.95 0 0 1 .183-.596L3.877 8.12Zm5.317 10.295c-.577-1.278-.982-2.947-1.131-4.817-1.183-.256-2.22-.624-3.044-1.073a7.004 7.004 0 0 0 4.175 5.89Z",
+        clipRule: "evenodd"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        d: "M20.031 20.031a1.5 1.5 0 0 1-2.121 0L3.06 5.182a1.5 1.5 0 0 1 2.122-2.121L20.03 17.91a1.5 1.5 0 0 1 0 2.121Z"
+      },
+      child: []
+    }
+  ]
+});
 var uniformComponentPatternIcon = GenIcon2({
   tag: "svg",
   attr: {
@@ -12212,7 +12245,8 @@ var buttonStyle = (bgColor) => css24`
   display: block;
   font-size: var(--fs-sm);
   line-height: 1.5;
-  transition: background-color var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background-color var(--duration-fast) var(--timing-ease-out),
     outline var(--duration-fast) var(--timing-ease-out);
   outline: 1px solid transparent;
 
@@ -12624,7 +12658,8 @@ var CheckboxWithInfoInput = css29`
   border-radius: var(--rounded-sm);
   width: calc(var(--spacing-base) - 2px);
   height: calc(var(--spacing-base) - 2px);
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
 
@@ -13859,7 +13894,8 @@ var ButtonWithMenuContainer = css38`
   display: inline-flex;
   position: relative;
   min-height: 24px;
-  transition: color var(--duration-fast) var(--timing-ease-out),
+  transition:
+    color var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -14840,7 +14876,8 @@ import { css as css48 } from "@emotion/react";
 var ChipContainer = css48`
   border-radius: var(--rounded-full);
   display: inline-flex;
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
   position: relative;
 
@@ -15116,7 +15153,8 @@ var MultilineChipContainer = css49`
   --gradient-rgb: var(--accent-primary-dark-rgb);
   --gradient-rgb-hover: var(--accent-primary-dark-hover-rgb);
   border-radius: var(--rounded-full);
-  background: radial-gradient(
+  background:
+    radial-gradient(
         farthest-side at 100%,
         rgba(var(--gradient-rgb), 0) 0%,
         rgba(var(--gradient-rgb), 0.2) 80%,
@@ -15149,7 +15187,8 @@ var MultilineChipContainer = css49`
     border: none;
     &:hover,
     &:focus {
-      background: radial-gradient(
+      background:
+        radial-gradient(
             farthest-side at 100%,
             rgba(var(--gradient-rgb-hover), 0) 0%,
             rgba(var(--gradient-rgb-hover), 0.2) 80%,
@@ -15202,17 +15241,19 @@ var MultilineChip = ({ children, onClick, ...props }) => {
 
 // src/components/Counter/Counter.styles.ts
 import { css as css50 } from "@emotion/react";
-var counterContainer = (bgColor) => css50`
+var counterContainer = (bgColor, hasIcon) => css50`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
   background: ${bgColor};
-  color: var(--typography-base);
+  color: ${bgColor === "var(--accent-dark)" ? "white" : "var(--typography-base)"};
   display: inline-flex;
-  font-size: var(--fs-xxs);
+  gap: var(--spacing-xs);
+  font-size: var(--fs-xs);
   font-weight: var(--fw-regular);
   justify-content: center;
-  width: var(--spacing-base);
+  padding: 4px;
+  width: ${hasIcon ? "auto" : "var(--spacing-base)"};
   height: var(--spacing-base);
 `;
 var counterZeroValue = css50`
@@ -15236,7 +15277,13 @@ var counterIcon = css50`
 
 // src/components/Counter/Counter.tsx
 import { jsx as jsx63, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
-var Counter = ({ count, bgColor = "transparent", ...props }) => {
+var Counter = ({
+  count,
+  bgColor = "transparent",
+  icon,
+  iconColor = "auto",
+  ...props
+}) => {
   if (typeof count === "undefined") {
     return null;
   }
@@ -15245,7 +15292,19 @@ var Counter = ({ count, bgColor = "transparent", ...props }) => {
     /* @__PURE__ */ jsx63(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ jsx63("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ jsx63("div", { css: counterContainer(bgColor), ...props, children: formatCount });
+  return /* @__PURE__ */ jsxs39("div", { css: counterContainer(bgColor, Boolean(icon)), ...props, children: [
+    icon ? /* @__PURE__ */ jsx63(
+      "span",
+      {
+        css: [
+          iconColor ? functionalColors : void 0,
+          { color: iconColor ? iconColor === "red" ? "var(--brand-secondary-5)" : iconColor : "inherit" }
+        ],
+        children: /* @__PURE__ */ jsx63(Icon, { icon, iconColor: "currentColor", size: "0.6rem" })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx63("span", { children: formatCount })
+  ] });
 };
 
 // src/components/DashedBox/DashedBox.styles.ts
@@ -19272,7 +19331,8 @@ var inputIconBtn = css88`
   color: var(--gray-500);
   background: none;
   display: flex;
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
 
   &:hover,
@@ -19446,7 +19506,8 @@ var toggleInput2 = css89`
   background: var(--white);
   width: var(--spacing-base);
   height: var(--spacing-base);
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
   font-size: var(--fs-sm);
@@ -19546,7 +19607,8 @@ var dataConnectButton = css89`
   display: flex;
   padding: var(--spacing-sm);
   position: relative;
-  transition: background var(--duration-fast) var(--timing-ease-out),
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
     outline-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
   width: 100%;
@@ -22494,7 +22556,8 @@ var SwitchInput = (size) => css105`
   width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
   height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
   margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
-  transition: transform var(--duration-fast) var(--timing-ease-out),
+  transition:
+    transform var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out),
     background-image var(--duration-fast) var(--timing-ease-out);
   z-index: var(--z-10);
@@ -23110,12 +23173,16 @@ export {
   supports,
   textInput,
   toast,
+  uniformAiIcon,
   uniformComponentIcon,
   uniformComponentPatternIcon,
   uniformCompositionPatternIcon,
+  uniformConditionalValuesIcon,
   uniformContentTypeIcon,
   uniformEntryIcon,
   uniformEntryPatternIcon,
+  uniformLocaleDisabledIcon,
+  uniformLocaleIcon,
   useBreakpoint,
   useCloseCurrentDrawer,
   useCurrentDrawer,