@sonic-equipment/ui 133.0.0 → 135.0.0

package/dist/styles.css

@@ -998,13 +998,9 @@
 .checkbox-module-YNVdd {
   --selected-color: var(--color-brand-red);
   --selected-color-pressed: var(--color-brand-dark-red);
-  --disabled-color: color-mix(in srgb, var(--selected-color) 20%, transparent);
+  --disabled-color: var(--color-brand-dark-gray);
   --checkmark-color: var(--color-white);
-  --disabled-checkmark-color: color-mix(
-    in srgb,
-    var(--checkmark-color) 40%,
-    transparent
-  );
+  --disabled-checkmark-color: var(--color-white);
 
   all: unset;
   display: flex;
@@ -1031,15 +1027,17 @@
   }
 
   .checkbox-module-YNVdd .checkbox-module-pHIwh {
-    width: 1rem;
-    height: 1rem;
+    aspect-ratio: 11/8;
     fill: none;
+    inline-size: 10px;
+    margin-block-start: 1px;
     stroke: currentcolor;
     stroke-dasharray: 22px;
     stroke-dashoffset: 66;
     stroke-linecap: round;
-    stroke-width: 2px;
-    transition: all 200ms;
+    stroke-linejoin: round;
+    stroke-width: 1.45;
+    transition: all 200ms, stroke-dashoffset 600ms;
   }
 
   .checkbox-module-YNVdd[data-disabled] {
@@ -1047,12 +1045,6 @@
     opacity: 0.4;
   }
 
-  .checkbox-module-YNVdd[data-disabled] .checkbox-module-UKoyf {
-      border-color: var(--color-transparent);
-      background-color: var(--disabled-color);
-      color: var(--disabled-checkmark-color);
-    }
-
   .checkbox-module-YNVdd[data-pressed] .checkbox-module-UKoyf {
     border-color: var(--color-brand-dark-gray);
   }
@@ -1077,6 +1069,11 @@
       stroke-dashoffset: 44;
     }
 
+  .checkbox-module-YNVdd[data-selected][data-disabled] .checkbox-module-UKoyf, .checkbox-module-YNVdd[data-indeterminate][data-disabled] .checkbox-module-UKoyf {
+        border-color: transparent;
+        background: var(--disabled-color);
+      }
+
   .checkbox-module-YNVdd[data-indeterminate] .checkbox-module-pHIwh {
       fill: var(--checkmark-color);
       stroke: none;
@@ -1087,7 +1084,6 @@
   .checkbox-module-YNVdd.checkbox-module-nEhvW .checkbox-module-UKoyf {
       border: none;
       background: var(--selected-color);
-      background-size: 16px 16px;
       transition: none;
     }
 
@@ -1099,9 +1095,7 @@
             var(--selected-color)
           ),
           linear-gradient(var(--selected-color), var(--selected-color));
-        background-position:
-          2px 2px,
-          14px 14px;
+        background-position: 2px 2px, 14px 14px;
         background-repeat: no-repeat;
         background-size: 10px 10px;
       }
@@ -1204,6 +1198,7 @@
   }
 .input-module-2woJR .input-module-zjVxG {
   display: inline-grid;
+  width: 100%;
   align-items: center;
   grid-template-columns: 1fr 0;
 }
@@ -1217,23 +1212,28 @@
     color: var(--color-brand-dark-gray);
   }
 /* Don't show value-reveal button on empty password fields  */
-.input-module-2woJR .input-module-zjVxG input[type="password"] + .input-module-oeAz2 {
+.input-module-2woJR .input-module-zjVxG input[type='password'] + .input-module-oeAz2 {
       transition: all 0.2s ease;
     }
-.input-module-2woJR .input-module-zjVxG input[type="password"][value=""] + .input-module-oeAz2 {
+.input-module-2woJR .input-module-zjVxG input[type='password'][value=''] + .input-module-oeAz2 {
       opacity: 0;
       visibility: hidden;
     }
-.input-module-2woJR .input-module-zjVxG input[type="password"]:not([value=""]) + .input-module-oeAz2 {
+.input-module-2woJR .input-module-zjVxG input[type='password']:not([value='']) + .input-module-oeAz2 {
       opacity: 1;
       visibility: visible;
     }
+
 .label-module-LGfJt {
   all: unset;
   cursor: pointer;
   font-weight: var(--font-weight-bold);
 }
 
+  .label-module-LGfJt:has(+ div [data-disabled]) {
+    cursor: default;
+  }
+
   .label-module-LGfJt :where(.label-module-oTWaS) {
     color: var(--color-brand-red);
     margin-inline-start: var(--space-4);
@@ -2437,13 +2437,13 @@
   --tooltip-bg-color: var(--color-gray-800);
 
   display: inline-block;
-  max-width: 250px;
-  padding: 10px;
-  border: 1px solid var(--tooltip-bg-color);
-  border-radius: 6px;
+  padding: var(--space-12) var(--space-16);
+  border-radius: var(--border-radius-8);
   background: var(--tooltip-bg-color);
   color: var(--color-white);
-  outline: none;
+  font-size: var(--font-size-14);
+  line-height: 1.14;
+  max-inline-size: 250px;
   overflow-wrap: break-word;
 }
 
@@ -2455,11 +2455,11 @@
   }
 
   .tooltip-module-T-DtX[data-placement='top']:has(.tooltip-module-CBW5f) {
-      margin-bottom: 6px;
+      margin-block-end: 6px;
     }
 
   .tooltip-module-T-DtX[data-placement='bottom']:has(.tooltip-module-CBW5f) {
-      margin-top: 6px;
+      margin-block-start: 6px;
     }
 
   .tooltip-module-T-DtX[data-placement='bottom'] .tooltip-module-CBW5f svg {
@@ -2467,7 +2467,7 @@
     }
 
   .tooltip-module-T-DtX[data-placement='right']:has(.tooltip-module-CBW5f) {
-      margin-left: 6px;
+      margin-inline-start: 6px;
     }
 
   .tooltip-module-T-DtX[data-placement='right'] .tooltip-module-CBW5f svg {
@@ -2475,7 +2475,7 @@
     }
 
   .tooltip-module-T-DtX[data-placement='left']:has(.tooltip-module-CBW5f) {
-      margin-right: 6px;
+      margin-inline-end: 6px;
     }
 
   .tooltip-module-T-DtX[data-placement='left'] .tooltip-module-CBW5f svg {
@@ -2495,9 +2495,9 @@
 }
 
 .tooltip-module-DRHoc .tooltip-module-3q6nr {
-    min-width: unset;
-    min-height: unset;
     color: currentcolor;
+    min-block-size: unset;
+    min-inline-size: unset;
   }
 
 .tooltip-module-DRHoc .tooltip-module-3q6nr:hover {
@@ -4109,7 +4109,8 @@ button.swiper-pagination-bullet {
     box-sizing: border-box;
     border-radius: 12px;
     background: var(--box-color);
-    transition: all 200ms;
+    transition-duration: 200ms;
+    transition-property: background;
   }
 
   .switch-module-ywpXc .switch-module-2e1rG::before {
@@ -4174,6 +4175,39 @@ button.swiper-pagination-bullet {
   .password-reveal-toggle-module-uUQbW span {
     height: var(--space-24);
   }
+.info-icon-tooltip-module-oR4nD {
+  --color-trigger: var(--color-brand-medium-gray);
+  --color-trigger-hover: var(--color-brand-dark-gray);
+  --color-trigger-active: var(--color-brand-dark-gray);
+
+  display: inline-flex;
+}
+
+  .info-icon-tooltip-module-oR4nD.info-icon-tooltip-module-5zfDr {
+    --color-trigger: currentcolor;
+    --color-trigger-hover: color-mix(in srgb, currentcolor, #000 20%);
+    --color-trigger-active: color-mix(in srgb, currentcolor, #000 20%);
+  }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K {
+    border-radius: 50%;
+    color: var(--color-trigger);
+    min-block-size: unset;
+    min-inline-size: unset;
+  }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K:hover {
+      color: var(--color-trigger-hover);
+    }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K:focus-visible {
+      box-shadow: var(--shadow-focus-outline);
+    }
+
+  .info-icon-tooltip-module-oR4nD[data-active] .info-icon-tooltip-module-0lY-K {
+    color: var(--color-trigger-active);
+  }
+
 .textarea-module-C6Xr1 {
   position: relative;
   display: inline-block;
@@ -4184,8 +4218,7 @@ button.swiper-pagination-bullet {
 }
 
   .textarea-module-C6Xr1:has([data-disabled]) {
-    background-color: var(--color-brand-light-gray);
-    color: var(--color-brand-medium-gray);
+    opacity: 0.4;
   }
 
   .textarea-module-C6Xr1:has([data-focused]) {
@@ -4233,19 +4266,37 @@ button.swiper-pagination-bullet {
 
 .text-field-module-JeaK0 {
   all: unset;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: normal;
-  gap: var(--space-4);
+  display: grid;
+  grid-template-areas:
+    'label .'
+    'field info'
+    'error .';
+  grid-template-columns: 1fr auto;
 }
 
   .text-field-module-JeaK0 span:empty {
     display: none;
   }
 
-  .text-field-module-JeaK0 input[type="password"] {
-    letter-spacing: 4px;
-  }
+.text-field-module-hFl0f {
+  grid-area: label;
+  margin-block-end: var(--space-4);
+}
+
+.text-field-module-nHYDe {
+  grid-area: field;
+}
+
+.text-field-module-kHn5y {
+  align-self: center;
+  grid-area: info;
+  margin-inline-start: var(--space-4);
+}
+
+.text-field-module-8XbgH {
+  grid-area: error;
+  margin-block-start: var(--space-4);
+}
 
 .categories-grid-module-C751R {
   --amount-of-columns: 2;
@@ -4703,6 +4754,152 @@ button.swiper-pagination-bullet {
     transform: translateY(-100%);
   }
 
+.hamburger-button-module-xER52 {
+  --width: 24px;
+  --padding-inline: 2px;
+  --transition-duration: 200ms;
+
+  position: relative;
+  display: block;
+  width: var(--width);
+  border: none;
+  aspect-ratio: 1;
+  background: none;
+  cursor: pointer;
+}
+
+  .hamburger-button-module-xER52 span {
+    position: absolute;
+    left: 1px;
+    display: block;
+    width: calc(var(--width) - 2 * var(--padding-inline));
+    height: 8%;
+    background-color: var(--color-black);
+    transition-duration: var(--transition-duration);
+    transition-property: transform, top;
+    transition-timing-function: ease;
+  }
+
+  .hamburger-button-module-xER52 span:nth-child(1) {
+      top: calc(var(--width) / 6 - 1px);
+      transition-delay: 0s, var(--transition-duration);
+    }
+
+  .hamburger-button-module-xER52 span:nth-child(2) {
+      top: calc(var(--width) / 2 - 1px);
+      opacity: 1;
+      transition-delay: var(--transition-duration);
+      transition-property: opacity;
+    }
+
+  .hamburger-button-module-xER52 span:nth-child(3) {
+      top: calc(var(--width) / 6 * 5 - 1px);
+      transition-delay: 0s, var(--transition-duration);
+    }
+
+  .hamburger-button-module-xER52:where(.hamburger-button-module-7yoVH) span:nth-child(1) {
+        top: calc(var(--width) / 2 - 1px);
+        transform: rotate(45deg);
+        transition-delay: var(--transition-duration), 0s;
+      }
+
+  .hamburger-button-module-xER52:where(.hamburger-button-module-7yoVH) span:nth-child(2) {
+        opacity: 0;
+        transition-delay: var(--transition-duration);
+        transition-property: opacity;
+      }
+
+  .hamburger-button-module-xER52:where(.hamburger-button-module-7yoVH) span:nth-child(3) {
+        top: calc(var(--width) / 2 - 1px);
+        transform: rotate(-45deg);
+        transition-delay: var(--transition-duration), 0s;
+      }
+
+.header-layout-module-VlTuk {
+  display: grid;
+  align-items: center;
+  background-color: var(--color-white);
+  gap: var(--space-8);
+  grid-template-columns: 1fr auto 1fr;
+  padding-block: var(--space-4);
+  padding-inline: var(--space-16);
+}
+
+  .header-layout-module-VlTuk,
+  .header-layout-module-VlTuk * {
+    box-sizing: border-box;
+  }
+
+  .header-layout-module-VlTuk .header-layout-module-oKPyL {
+    width: var(--space-100);
+  }
+
+  .header-layout-module-VlTuk .header-layout-module-aBOJL {
+    display: flex;
+  }
+
+  .header-layout-module-VlTuk .header-layout-module--ICLK {
+    display: none;
+    place-items: center;
+  }
+
+  .header-layout-module-VlTuk .header-layout-module-HjY-a {
+    display: flex;
+    margin-left: auto;
+  }
+
+  .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-fP3a6 {
+      display: none;
+    }
+
+  .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-4Qp5b {
+      display: flex;
+    }
+
+  @media (width >= 1024px) {.header-layout-module-VlTuk {
+    padding-block: var(--space-24);
+    padding-inline: var(--space-32)
+}
+
+    .header-layout-module-VlTuk .header-layout-module-oKPyL {
+      margin-bottom: var(--space-8);
+    }
+
+    .header-layout-module-VlTuk .header-layout-module-aBOJL {
+      display: none;
+    }
+
+    .header-layout-module-VlTuk .header-layout-module--ICLK {
+      display: block;
+    }
+      .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-fP3a6 {
+        display: block;
+      }
+  }
+
+.sonic-logo-module-5zzhF {
+  display: block;
+}
+
+  .sonic-logo-module-5zzhF,
+  .sonic-logo-module-5zzhF * {
+    box-sizing: border-box;
+  }
+
+  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq {
+    display: block;
+    width: auto;
+    height: auto;
+  }
+
+  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-Pa7pF {
+      fill: var(--color-black);
+    }
+
+  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-vTCO3 {
+      fill: var(--color-brand-red);
+    }
+
 .feature-list-module-cxc8U {
   display: grid;
   grid-template-columns: auto minmax(50%, 1fr);
@@ -5901,6 +6098,103 @@ button.swiper-pagination-bullet {
     --transition-duration: 0.3s;
   }
 
+.sign-in-form-module-4DkkP {
+  min-inline-size: 300px;
+}
+
+/* generic utility styles that we could reuse */
+
+.sign-in-form-module-bGXUd {
+  --tooltip-size: 24px;
+  --info-icon-offset: calc((var(--tooltip-size) + var(--space-4)) * -1);
+
+  display: grid;
+  container-type: inline-size;
+  gap: var(--space-16);
+}
+
+.sign-in-form-module-bGXUd p {
+    margin: 0 0 var(--space-4);
+  }
+
+.sign-in-form-module-TumIz {
+  display: grid;
+}
+
+.sign-in-form-module-TumIz .sign-in-form-module-bIzyz {
+    justify-self: flex-start;
+  }
+
+.sign-in-form-module-EoTYu {
+  display: grid;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  gap: var(--space-16);
+}
+
+.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+
+/* above 1314, where - with a minimum width of 250px and 16px gap - 5 columns would appear, we restrict it to max 4 columns */
+
+@container (min-inline-size: 1314px) {
+
+.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
+      --minimum-width: calc((100% - 3 * var(--space-16)) / 4);
+
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(var(--minimum-width), 1fr)
+      )
+  }
+    }
+
+/* info icon rules: when (visually) the last segment on a row with an icon, needs to have a negative margin */
+
+.sign-in-form-module-EoTYu .sign-in-form-module-TumIz:has([data-info]) {
+    margin-inline-end: var(--info-icon-offset);
+  }
+
+/* 2 * 250px + 16px = 516px; space for 2 columns */
+
+@container (min-inline-size: 516px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):not(:only-child) {
+        margin-inline-end: 0;
+      }
+    }
+
+@container (min-inline-size: 516px) and (max-inline-size: 781px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2n) {
+        margin-inline-end: var(--info-icon-offset);
+      }
+    }
+
+/* 3 * 250px + 2 * 16px = 782px; space for 3 columns */
+
+@container (min-inline-size: 782px) and (max-inline-size: 1047px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3n),
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
+        margin-inline-end: var(--info-icon-offset);
+      }
+    }
+
+/* 4 * 250px + 3 * 16px = 1048px; space for 4 columns */
+
+@container (min-inline-size: 1048px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(4n),
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3):last-child,
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
+        margin-inline-end: var(--info-icon-offset);
+      }
+    }
+
+.sign-in-form-module-aYBAy {
+  display: grid;
+  gap: var(--space-16);
+}
+
 :root {
   --toastify-color-light: #fff;
   --toastify-color-dark: #121212;

package/dist/tooltip/tooltip.d.ts

@@ -1,9 +1,10 @@
 import { ReactElement, ReactNode } from 'react';
 import { Placement } from 'react-aria';
 export interface TooltipProps {
+    children: ReactNode;
+    className?: string;
     offset?: number;
     placement?: Placement;
-    text: string | ReactNode;
     trigger?: ReactElement;
 }
-export declare function Tooltip({ offset, placement, text, trigger, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, className, offset, placement, trigger, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/tooltip/tooltip.js

@@ -3,6 +3,7 @@ import { useRef, useMemo, cloneElement } from 'react';
 import { usePress } from 'react-aria';
 import { DialogTrigger, Popover, OverlayArrow, Dialog } from 'react-aria-components';
 import { IconButton } from '../buttons/icon-button/icon-button.js';
+import clsx from 'clsx';
 import { StrokeInformationIcon } from '../icons/stroke/stroke-information-icon.js';
 import { useDisclosure } from '../shared/hooks/use-disclosure.js';
 import styles from './tooltip.module.css.js';
@@ -10,17 +11,17 @@ import styles from './tooltip.module.css.js';
 function InfoIcon(props) {
     return (jsx(IconButton, { ...props, className: styles.trigger, children: jsx(StrokeInformationIcon, {}) }));
 }
-function TriggerButton({ buttonRef, trigger, }) {
+function TriggerButton({ buttonRef, className, trigger, }) {
     const { pressProps } = usePress({ ref: buttonRef });
     const triggerWithHandler = useMemo(() => cloneElement(trigger, {
         ...pressProps,
     }), [trigger, pressProps]);
-    return (jsx("div", { ref: buttonRef, className: styles['trigger-wrapper'], children: triggerWithHandler }));
+    return (jsx("div", { ref: buttonRef, className: clsx(className, styles['trigger-wrapper']), children: triggerWithHandler }));
 }
-function Tooltip({ offset, placement = 'bottom', text, trigger = jsx(InfoIcon, {}), }) {
+function Tooltip({ children, className, offset, placement = 'bottom', trigger = jsx(InfoIcon, {}), }) {
     const { isOpen, setIsOpen } = useDisclosure();
     const triggerRef = useRef(null);
-    return (jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [jsx(TriggerButton, { buttonRef: triggerRef, trigger: trigger }), jsxs(Popover, { className: styles.popover, offset: offset, placement: placement, triggerRef: triggerRef, children: [jsx(OverlayArrow, { className: styles.arrow, children: jsx("svg", { height: 12, viewBox: "0 0 12 12", width: 12, children: jsx("path", { d: "M0 0 L6 6 L12 0" }) }) }), jsx(Dialog, { className: styles.dialog, children: text })] })] }));
+    return (jsxs(DialogTrigger, { isOpen: isOpen, onOpenChange: setIsOpen, children: [jsx(TriggerButton, { buttonRef: triggerRef, className: className, trigger: trigger }), jsxs(Popover, { className: styles.popover, offset: offset, placement: placement, triggerRef: triggerRef, children: [jsx(OverlayArrow, { className: styles.arrow, children: jsx("svg", { height: 12, viewBox: "0 0 12 12", width: 12, children: jsx("path", { d: "M0 0 L6 6 L12 0" }) }) }), jsx(Dialog, { className: styles.dialog, children: children })] })] }));
 }
 
 export { Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "133.0.0",
+  "version": "135.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/shared/utils/wait.d.ts

@@ -1 +0,0 @@
-export declare function wait(ms: number): Promise<unknown>;

package/dist/shared/utils/wait.js

@@ -1,5 +0,0 @@
-function wait(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export { wait };