@symbo.ls/uikit 2.11.164 → 2.11.166

package/dist/index.cjs.js

@@ -1302,7 +1302,7 @@ var require_cjs = __commonJS({
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
       getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
       getSpacingByKey: () => getSpacingByKey3,
-      getTheme: () => getTheme2,
+      getTheme: () => getTheme,
       getTimingByKey: () => getTimingByKey2,
       getTimingFunction: () => getTimingFunction3,
       hexToRgb: () => hexToRgb,
@@ -2070,7 +2070,7 @@ var require_cjs = __commonJS({
       getMediaTheme: () => getMediaTheme2,
       getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
       getSpacingByKey: () => getSpacingByKey3,
-      getTheme: () => getTheme2,
+      getTheme: () => getTheme,
       getTimingByKey: () => getTimingByKey2,
       getTimingFunction: () => getTimingFunction3,
       runThroughMedia: () => runThroughMedia,
@@ -2232,7 +2232,7 @@ var require_cjs = __commonJS({
       theme.value = setThemeValue(theme);
       return theme.value;
     };
-    var getTheme2 = (value, modifier) => {
+    var getTheme = (value, modifier) => {
       const CONFIG22 = getActiveConfig3();
       if (CONFIG22.useVariable)
         return getMediaTheme2(value, modifier);
@@ -2273,7 +2273,7 @@ var require_cjs = __commonJS({
       }
     };
     var setPseudo = (theme, key, variant, themeValue) => {
-      const result = getTheme2(variant);
+      const result = getTheme(variant);
       themeValue[`&:${key}`] = result;
       if ((0, import_utils112.isObject)(variant) && !variant.value)
         variant.value = result;
@@ -2291,7 +2291,7 @@ var require_cjs = __commonJS({
       return theme;
     };
     var setPrefersScheme = (theme, key, variant, themeValue) => {
-      const result = getTheme2(variant);
+      const result = getTheme(variant);
       themeValue[`@media (prefers-color-scheme: ${key})`] = result;
       if ((0, import_utils112.isObject)(variant) && !variant.value)
         variant.value = result;
@@ -9330,7 +9330,7 @@ __export(domql_exports, {
   Hoverable: () => Hoverable,
   Hr: () => Hr,
   Icon: () => Icon,
-  IconButton: () => IconButton,
+  IconCommonButton: () => IconCommonButton,
   IconTab: () => IconTab,
   IconText: () => IconText,
   IcontextButton: () => IcontextButton,
@@ -9363,7 +9363,9 @@ __export(domql_exports, {
   ParagraphButtonWithCheckBox: () => ParagraphButtonWithCheckBox,
   Picture: () => Picture,
   Pills: () => Pills,
+  PlusMinusButtons: () => PlusMinusButtons,
   Position: () => Position,
+  Pracing: () => Pracing,
   ProgressCircle: () => ProgressCircle,
   ProgressCircleWithIcon: () => ProgressCircleWithIcon,
   ProgressCircleWithSideUnitValue: () => ProgressCircleWithSideUnitValue,
@@ -9887,7 +9889,6 @@ var SHAPES = {
   }),
   chevron: ({ props: props4, deps }) => ({
     position: "relative",
-    // overflow: 'hidden',
     "&:before, &:after": {
       content: '""',
       display: "block",
@@ -12734,7 +12735,7 @@ var TextAreaWithButton = {
     round: "Z2"
     // background: 'gray'
   },
-  IconButton: {
+  IconCommonButton: {
     props: {
       background: "blue",
       icon: { name: "send" }
@@ -12837,7 +12838,7 @@ var CommonField = {
       color: "gray4"
     }
   },
-  Field: { extend: Field },
+  Field: {},
   Hint: {
     extend: IconText,
     props: { color: "gray4" }
@@ -12984,9 +12985,14 @@ var CommonButton = {
   icon: {
     props: { fontSize: "C" }
   },
-  Caption: { props: { text: "Button", line_height: "1em" } }
+  Caption: {
+    props: {
+      text: "Button",
+      line_height: "1em"
+    }
+  }
 };
-var IconButton = {
+var IconCommonButton = {
   extend: CommonButton,
   props: {
     icon: { name: "smile" },
@@ -12999,7 +13005,7 @@ var IconButton = {
 var ButtonSet = {
   tag: "nav",
   extend: Flex,
-  childExtend: IconButton
+  childExtend: IconCommonButton
 };
 var CancelConfirmButtons = {
   extend: Flex,
@@ -13066,6 +13072,22 @@ var DropDownButtonWithAvatar = {
     }
   }
 };
+var PlusMinusButtons = {
+  extend: Flex,
+  props: {
+    alignItems: "center",
+    gap: "A"
+  },
+  Minus: {
+    extend: IconButton,
+    props: { icon: { name: "minus" } }
+  },
+  Value: { props: { text: "1" } },
+  Plus: {
+    extend: IconButton,
+    props: { icon: { name: "plus" } }
+  }
+};
 
 // Progress/ProgressLine.js
 var ProgressLine = {
@@ -13685,7 +13707,7 @@ var Tab = {
   }
 };
 var IconTab = {
-  extend: IconButton,
+  extend: IconCommonButton,
   props: {},
   Span: null,
   CountIndicator: {
@@ -13925,10 +13947,10 @@ var SocialLink = {
     maxHeight: `${48 / 16}em`,
     cursor: "pointer",
     icon: {
-      name: "instagram",
+      name: "twitch",
       boxSize: "A2"
     },
-    text: "Continue with Instagram"
+    text: "Continue with Twitch"
   }
 };
 
@@ -14083,21 +14105,69 @@ var Message = {
     Title: { h5: { text: "Message" } },
     Paragraph: {
       p: {
-        text: "Yes. If you change your mind and no longer wish to keep your iPhone, you have the option to return it to us. The returned iPhone must be in good condition and in the original packaging, which contains all accessories, manuals and instructions. Returns are subject to Apple\u2019s Sales and Refunds Policy."
+        props: {
+          text: "Yes. If you change your mind and no longer wish to keep your iPhone, you have the option to return it to us. The returned iPhone must be in good condition and in the original packaging, which contains all accessories, manuals and instructions. Returns are subject to Apple\u2019s Sales and Refunds Policy.",
+          lineHeight: "1.4em"
+        }
       }
     }
   },
   Content: null,
   Footer: null
-  // Content: {
-  //   P: {
-  //     props: {
-  //       text: 'Yes. If you change your mind and no longer wish to keep your iPhone, you have the option to return it to us. The returned iPhone must be in good condition and in the original packaging, which contains all accessories, manuals and instructions. Returns are subject to Apple’s Sales and Refunds Policy.',
-  //       fontSize: 'Z',
-  //       margin: '0'
-  //     }
-  //   }
-  // }
+};
+
+// Modal/Pricing.js
+var Pracing = {
+  extend: Modal,
+  props: {
+    background: "gray3",
+    gap: "A",
+    minWidth: "G+B",
+    maxWidth: "G+B",
+    padding: "A"
+  },
+  Header: null,
+  Content: {
+    props: {
+      flow: "column",
+      gap: "A"
+    },
+    childExtend: {
+      extend: UnitValue,
+      props: {
+        justifyContent: "space-between",
+        textTransform: "capitalize",
+        color: "white"
+      }
+    },
+    ...[
+      {
+        Unit: { props: { text: "subtotal" } },
+        Value: { props: { text: "$5,499.00" } }
+      },
+      {
+        Unit: { props: { text: "Shipping" } },
+        Value: { props: { text: "Free" } }
+      },
+      {
+        Unit: { props: { text: "Savings" } },
+        Value: { props: { text: "$1,600.00" } }
+      }
+    ]
+  },
+  Footer: {
+    CommonButton: {
+      flex: "1",
+      padding: "Z2 -",
+      round: "Y2",
+      background: "gray",
+      Caption: {
+        text: "Add promo code",
+        fontSize: "Z",
+        fontWeight: "500"
+      }
+    }
+  }
 };
 
 // List/List.js
@@ -14962,6 +15032,132 @@ var TimePickerItem = {
   Button_minus: { icon: "minus" }
 };
 
+// TimePicker/node_modules/@symbo.ls/icon/index.js
+var Icon2 = {
+  extend: Svg,
+  props: ({ key, props: props4, parent, context }) => {
+    const { ICONS, useIconSprite, verbose } = context && context.designSystem;
+    const { toCamelCase } = context && context.utils;
+    const iconName = props4.inheritedString || props4.name || props4.icon || key;
+    const camelCase = toCamelCase(iconName);
+    const isArray3 = camelCase.split(/([a-z])([A-Z])/g);
+    let activeIconName;
+    if (props4.active) {
+      activeIconName = props4[".active"].name || props4[".active"].icon;
+    }
+    if (parent && parent.props && parent.props.active && parent.props[".active"] && parent.props[".active"].icon) {
+      activeIconName = parent.props[".active"].icon.name || parent.props[".active"].icon.icon || parent.props[".active"].icon;
+    }
+    let validIconName;
+    if (ICONS[activeIconName])
+      validIconName = activeIconName;
+    if (ICONS[camelCase])
+      validIconName = camelCase;
+    else if (ICONS[isArray3[0] + isArray3[1]])
+      validIconName = isArray3[0] + isArray3[1];
+    else if (ICONS[isArray3[0]])
+      validIconName = isArray3[0];
+    else {
+      if (verbose)
+        console.warn("Can't find icon:", iconName, validIconName);
+    }
+    const iconFromLibrary = ICONS[validIconName];
+    const directSrc = parent && parent.props && parent.props.src || props4.src;
+    return {
+      width: "A",
+      height: "A",
+      display: "inline-block",
+      spriteId: useIconSprite && validIconName,
+      src: iconFromLibrary || directSrc || ICONS.noIcon,
+      style: { fill: "currentColor" }
+    };
+  },
+  attr: { viewBox: "0 0 24 24" }
+};
+var IconText2 = {
+  extend: Flex,
+  props: {
+    align: "center center",
+    lineHeight: 1
+  },
+  // TODO: remove this variant
+  icon: {
+    extend: Icon2,
+    if: ({ parent }) => parent.props.icon
+  },
+  Icon: {
+    props: {},
+    if: ({ props: props4 }) => props4.name || props4.icon
+  },
+  text: ({ props: props4 }) => props4.text,
+  ".reversed": {
+    props: { flow: "row-reverse" }
+  },
+  ".vertical": {
+    props: { flow: "column" }
+  }
+};
+
+// TimePicker/node_modules/@symbo.ls/button/index.js
+var Button2 = {
+  extend: [FocusableComponent, IconText2],
+  tag: "button",
+  props: {
+    fontSize: "A",
+    type: "button",
+    border: "none",
+    display: "inline-flex",
+    align: "center center",
+    textDecoration: "none",
+    lineHeight: "1",
+    whiteSpace: "nowrap",
+    padding: "Z A1",
+    fontFamily: "inherit",
+    round: "C2"
+  },
+  attr: {
+    type: ({ props: props4 }) => props4.type
+  }
+};
+var CommonButton2 = {
+  extend: Button2,
+  props: {
+    color: "white",
+    background: "blue",
+    boxSize: "fit-content",
+    padding: "A A2",
+    round: "Z2",
+    gap: "Y2",
+    position: "relative"
+  },
+  icon: {
+    props: { fontSize: "C" }
+  },
+  Caption: { props: { text: "Button", line_height: "1em" } }
+};
+var CancelConfirmButtons2 = {
+  extend: Flex,
+  childExtend: {
+    extend: CommonButton2,
+    props: {
+      minWidth: "D2",
+      ":first-child": {
+        background: "transparent",
+        border: "1px solid #20202B"
+      },
+      ":last-child": {}
+    }
+  },
+  ...[
+    { Caption: { text: "No" } },
+    { Caption: { text: "Yes" } }
+  ],
+  props: {
+    gap: "Z",
+    maxWidth: "fit-content"
+  }
+};
+
 // TimePicker/TimeSwitcher.js
 var props3 = {
   boxSize: "C B2",
@@ -14974,7 +15170,7 @@ var TimeSwitcher = {
   props: props3,
   extend: Flex,
   childExtend: {
-    extend: Button,
+    extend: Button2,
     props: ({ state, key }) => ({
       active: state.activeShift === key,
       padding: "0",
@@ -16132,7 +16328,7 @@ var UserWithButton = {
       }
     }
   },
-  IconButton: {
+  IconCommonButton: {
     round: "0",
     background: "transparent",
     icon: {
@@ -16291,7 +16487,7 @@ var CurrencyConvert = {
       flex: "1",
       padding: "Z1 -",
       round: "Z",
-      Caption: { text: "Convert" }
+      Caption: { text: "Convert", fontWeight: "500" }
     }
   }
 };