uikit-react-public 0.45.1 → 0.45.4

package/dist/components/Alert/Alert.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+import { IconProps } from '../Icon';
 import { default as AlertMessage } from './AlertMessage';
 import { default as AlertTitle } from './AlertTitle';
 import { MarginProps } from '../common/marginsStyle';
@@ -11,11 +12,13 @@ export declare const AlertContext: import('react').Context<AlertContextProps | n
 export declare function useAlertContext(): AlertContextProps;
 export interface AlertBaseProps extends HTMLAttributes<HTMLDivElement> {
     type: AlertType;
+    iconProps?: Omit<IconProps, 'svg'>;
+    contentProps?: HTMLAttributes<HTMLDivElement>;
     testId?: string;
 }
 export type AlertProps = AlertBaseProps & MarginProps;
 declare const Alert: {
-    ({ type, children, testId, className, ...props }: AlertProps): import("react").JSX.Element;
+    ({ type, iconProps, contentProps, children, testId, className, ...props }: AlertProps): import("react").JSX.Element;
     Title: ({ children, testId, className, ...props }: import('./AlertTitle').AlertTitleProps) => import("react").JSX.Element;
     Message: ({ testId, className, children, ...props }: import('./AlertMessage').AlertMessageProps) => import("react").JSX.Element;
 };

package/dist/components/Alert/Alert.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
     component: {
-        ({ type, children, testId, className, ...props }: import('./Alert').AlertProps): import("react").JSX.Element;
+        ({ type, iconProps, contentProps, children, testId, className, ...props }: import('./Alert').AlertProps): import("react").JSX.Element;
         Title: ({ children, testId, className, ...props }: import('./AlertTitle').AlertTitleProps) => import("react").JSX.Element;
         Message: ({ testId, className, children, ...props }: import('./AlertMessage').AlertMessageProps) => import("react").JSX.Element;
     } & import('./Alert').IAlertSubComponents;

package/dist/index.js

@@ -935,6 +935,7 @@ const kr = "ucl-uikit-icon", Bc = ({
 }) => {
   const u = d`
     vertical-align: middle;
+    flex-shrink: 0;
   `, s = A(kr, u, a);
   return /* @__PURE__ */ n(
     e,
@@ -28026,53 +28027,59 @@ const Li = "ucl-uikit-alert__message", t5 = ({
   );
 }, n5 = (e) => e.charAt(0).toUpperCase() + e.slice(1), Hi = "ucl-uikit-alert", r5 = ct(null), dr = ({
   type: e,
-  children: t,
-  testId: o = Hi,
-  className: r,
-  ...l
+  iconProps: t,
+  contentProps: o,
+  children: r,
+  testId: l = Hi,
+  className: i,
+  ...a
 }) => {
-  const i = n5(e), [a] = L(), { padding: c } = a, u = d`
+  const c = n5(e), [u] = L(), { padding: s } = u, f = d`
     display: flex;
     align-items: flex-start;
-    gap: ${a.margin.m8};
-    padding: ${c.p16} ${c.p12} ${c.p16} ${c.p8};
+    gap: ${u.margin.m8};
+    padding: ${s.p16} ${s.p12} ${s.p16} ${s.p8};
     border-left-width: 4px;
     border-left-style: solid;
-  `, s = d`
-    background-color: ${a.colour.surface.brand};
-    border-color: ${a.colour.border.brand};
-  `, f = d`
-    background-color: ${a.colour.surface.success};
-    border-color: ${a.colour.border.success};
   `, h = d`
-    background-color: ${a.colour.surface.warning};
-    border-color: ${a.colour.border.warning};
+    background-color: ${u.colour.surface.brand};
+    border-color: ${u.colour.border.brand};
   `, p = d`
-    background-color: ${a.colour.surface.critical};
-    border-color: ${a.colour.border.critical};
-  `, m = A(
+    background-color: ${u.colour.surface.success};
+    border-color: ${u.colour.border.success};
+  `, m = d`
+    background-color: ${u.colour.surface.warning};
+    border-color: ${u.colour.border.warning};
+  `, y = d`
+    background-color: ${u.colour.surface.critical};
+    border-color: ${u.colour.border.critical};
+  `, b = A(
     Hi,
-    u,
-    He(l, a),
-    e === "info" && s,
-    e === "success" && f,
-    e === "warning" && h,
-    e === "error" && p,
-    r
-  ), y = A(
+    f,
+    He(a, u),
+    e === "info" && h,
+    e === "success" && p,
+    e === "warning" && m,
+    e === "error" && y,
+    i
+  ), C = A(
     e === "info" && d`
-        color: ${a.colour.icon.brand};
+        color: ${u.colour.icon.brand};
       `,
     e === "success" && d`
-        color: ${a.colour.icon.success};
+        color: ${u.colour.icon.success};
       `,
     e === "warning" && d`
-        color: ${a.colour.icon.warning};
+        color: ${u.colour.icon.warning};
       `,
     e === "error" && d`
-        color: ${a.colour.icon.critical};
+        color: ${u.colour.icon.critical};
       `
-  ), b = {
+  ), k = d`
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  `, x = {
     info: P.Info,
     success: P.CheckCircle,
     warning: P.AlertTriangle,
@@ -28081,19 +28088,27 @@ const Li = "ucl-uikit-alert__message", t5 = ({
   return /* @__PURE__ */ n(r5.Provider, { value: { type: e }, children: /* @__PURE__ */ g(
     "div",
     {
-      className: m,
-      "data-testid": o,
+      className: b,
+      "data-testid": l,
       role: "alert",
-      ...l,
+      ...a,
       children: [
         /* @__PURE__ */ n(
-          b,
+          x,
           {
-            className: y,
-            "aria-label": i
+            className: C,
+            "aria-label": c,
+            ...t
           }
         ),
-        /* @__PURE__ */ n("div", { children: t })
+        /* @__PURE__ */ n(
+          "div",
+          {
+            ...o,
+            className: A(k, o == null ? void 0 : o.className),
+            children: r
+          }
+        )
       ]
     }
   ) });
@@ -29481,79 +29496,79 @@ const ji = "ucl-uikit-base-dialog", N5 = 495, T5 = 495, R5 = 740, V5 = We(
   children: c,
   ...u
 }) => {
-  const [s] = L(), {
-    colour: { icon: f }
-  } = s, h = d`
+  const s = typeof c == "string", [f] = L(), {
+    colour: { icon: h }
+  } = f, p = d`
     display: block;
-    margin-top: ${s.margin.m32};
-    margin-bottom: ${s.margin.m32};
+    margin-top: ${f.margin.m32};
+    margin-bottom: ${f.margin.m32};
     margin-left: auto;
     margin-right: auto;
-  `, p = A(
-    h,
+  `, m = A(
+    p,
     e === "success" && d`
-        color: ${f.success};
+        color: ${h.success};
       `,
     e === "warning" && d`
-        color: ${f.warning};
+        color: ${h.warning};
       `,
     e === "error" && d`
-        color: ${f.critical};
+        color: ${h.critical};
       `
-  ), m = {
+  ), y = {
     success: /* @__PURE__ */ n(
       P.CheckCircle,
       {
         size: Ln,
-        className: p
+        className: m
       }
     ),
     error: /* @__PURE__ */ n(
       P.XCircle,
       {
         size: Ln,
-        className: p
+        className: m
       }
     ),
     warning: /* @__PURE__ */ n(
       P.AlertTriangle,
       {
         size: Ln,
-        className: p
+        className: m
       }
     )
-  }[e], y = d``, b = A(Yi, y, a), C = d`
-    text-align: center;
-  `, k = d`
+  }[e], b = d``, C = A(Yi, b, a), k = d`
     text-align: center;
-    margin: ${s.margin.m24};
   `, x = d`
-    margin-top: ${s.margin.m40};
-    margin-bottom: ${s.margin.m48};
+    text-align: center;
+    margin: ${f.margin.m24};
+  `, S = d`
+    margin-top: ${f.margin.m40};
+    margin-bottom: ${f.margin.m48};
     justify-content: center;
   `;
   return /* @__PURE__ */ g(
     jt,
     {
       testId: i,
-      className: b,
+      className: C,
       ...u,
       children: [
         /* @__PURE__ */ n(
           jt.Header,
           {
-            decoration: m,
+            decoration: y,
             headingProps: {
-              className: C
+              className: k
             },
             children: t
           }
         ),
-        /* @__PURE__ */ n(Ue, { className: k, children: c }),
+        s ? /* @__PURE__ */ n(Ue, { className: x, children: c }) : /* @__PURE__ */ n("div", { className: x, children: c }),
         /* @__PURE__ */ n(
           jt.Footer,
           {
-            className: x,
+            className: S,
             primaryButton: o,
             primaryButtonProps: {
               variant: r,

package/lib/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`Accordion > snapshot: no props 1`] = `
   >
     Heading
     <svg
-      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-2eekj2"
+      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-2wx333"
       data-testid="ucl-uikit-icon"
       fill="none"
       focusable="false"
@@ -51,7 +51,7 @@ exports[`Accordion > snapshot: testId prop 1`] = `
   >
     Heading
     <svg
-      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-2eekj2"
+      class="ucl-uikit-icon ucl-uikit-accordion__heading__icon css-2wx333"
       data-testid="ucl-uikit-icon"
       fill="none"
       focusable="false"

package/lib/components/Alert/Alert.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import Icon from '../Icon';
+import Icon, { IconProps } from '../Icon';
 import AlertMessage from './AlertMessage';
 import AlertTitle from './AlertTitle';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
@@ -27,6 +27,8 @@ export function useAlertContext() {
 
 export interface AlertBaseProps extends HTMLAttributes<HTMLDivElement> {
   type: AlertType;
+  iconProps?: Omit<IconProps, 'svg'>;
+  contentProps?: HTMLAttributes<HTMLDivElement>;
   testId?: string;
 }
 
@@ -34,6 +36,8 @@ export type AlertProps = AlertBaseProps & MarginProps;
 
 const Alert = ({
   type,
+  iconProps,
+  contentProps,
   children,
   testId = NAME,
   className,
@@ -104,6 +108,12 @@ const Alert = ({
       `
   );
 
+  const contentStyle = css`
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  `;
+
   const IconComp = {
     info: Icon.Info,
     success: Icon.CheckCircle,
@@ -122,8 +132,14 @@ const Alert = ({
         <IconComp
           className={iconStyle}
           aria-label={typeName}
+          {...iconProps}
         />
-        <div>{children}</div>
+        <div
+          {...contentProps}
+          className={cx(contentStyle, contentProps?.className)}
+        >
+          {children}
+        </div>
       </div>
     </AlertContext.Provider>
   );

package/lib/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Alert > snapshot: type=error 1`] = `
 >
   <svg
     aria-label="Error"
-    class="ucl-uikit-icon css-nysdxe"
+    class="ucl-uikit-icon css-16jv6ib"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
@@ -30,7 +30,9 @@ exports[`Alert > snapshot: type=error 1`] = `
       d="m15 9-6 6m0-6 6 6"
     />
   </svg>
-  <div>
+  <div
+    class="css-1ig476w"
+  >
     <h3
       class="ucl-uikit-alert__title css-mm5n7t"
       data-test-id="ucl-uikit-alert__title"
@@ -60,7 +62,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
 >
   <svg
     aria-label="Info"
-    class="ucl-uikit-icon css-1oh4ubr"
+    class="ucl-uikit-icon css-b4260q"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
@@ -82,7 +84,9 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
       d="M12 16v-4m0-4h.01"
     />
   </svg>
-  <div>
+  <div
+    class="css-1ig476w"
+  >
     <p
       class="ucl-uikit-paragraph ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
@@ -101,7 +105,7 @@ exports[`Alert > snapshot: type=success 1`] = `
 >
   <svg
     aria-label="Success"
-    class="ucl-uikit-icon css-4xbsfp"
+    class="ucl-uikit-icon css-t5um01"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
@@ -121,7 +125,9 @@ exports[`Alert > snapshot: type=success 1`] = `
       d="M22 4 12 14.01l-3-3"
     />
   </svg>
-  <div>
+  <div
+    class="css-1ig476w"
+  >
     <h3
       class="ucl-uikit-alert__title css-mm5n7t"
       data-test-id="ucl-uikit-alert__title"
@@ -151,7 +157,7 @@ exports[`Alert > snapshot: type=warning 1`] = `
 >
   <svg
     aria-label="Warning"
-    class="ucl-uikit-icon css-1k868z9"
+    class="ucl-uikit-icon css-12gjszp"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
@@ -168,7 +174,9 @@ exports[`Alert > snapshot: type=warning 1`] = `
       d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4m0 4h.01"
     />
   </svg>
-  <div>
+  <div
+    class="css-1ig476w"
+  >
     <h3
       class="ucl-uikit-alert__title css-mm5n7t"
       data-test-id="ucl-uikit-alert__title"

package/lib/components/AppMenu/__tests__/__snapshots__/AppMenu.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
     tabindex="0"
   >
     <svg
-      class="ucl-uikit-icon css-148hpxb"
+      class="ucl-uikit-icon css-f962ig"
       data-testid="ucl-uikit-icon"
       fill="none"
       focusable="false"
@@ -54,7 +54,7 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
         class="css-1epmcqg"
       >
         <svg
-          class="ucl-uikit-icon css-148hpxb"
+          class="ucl-uikit-icon css-f962ig"
           data-testid="ucl-uikit-icon"
           fill="none"
           focusable="false"

package/lib/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Avatar > Snapshot: Default 1`] = `
   data-testid="ucl-uikit-avatar"
 >
   <svg
-    class="ucl-uikit-icon css-1jd3cs6"
+    class="ucl-uikit-icon css-8xhukk"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -36,7 +36,7 @@ exports[`Avatar > Snapshot: Default with disabled prop 1`] = `
   disabled=""
 >
   <svg
-    class="ucl-uikit-icon css-vtowat"
+    class="ucl-uikit-icon css-1eyulv8"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -66,7 +66,7 @@ exports[`Avatar > Snapshot: icon variant with disabled prop 1`] = `
   disabled=""
 >
   <svg
-    class="ucl-uikit-icon css-vtowat"
+    class="ucl-uikit-icon css-1eyulv8"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -95,7 +95,7 @@ exports[`Avatar > Snapshot: icon variant with no props 1`] = `
   data-testid="ucl-uikit-avatar"
 >
   <svg
-    class="ucl-uikit-icon css-1jd3cs6"
+    class="ucl-uikit-icon css-8xhukk"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -180,7 +180,7 @@ exports[`Avatar > Snapshot: image variant with no props 1`] = `
   data-testid="ucl-uikit-avatar"
 >
   <svg
-    class="ucl-uikit-icon css-1jd3cs6"
+    class="ucl-uikit-icon css-8xhukk"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -236,7 +236,7 @@ exports[`Avatar > Snapshot: initials variant with no props 1`] = `
   data-testid="ucl-uikit-avatar"
 >
   <svg
-    class="ucl-uikit-icon css-1jd3cs6"
+    class="ucl-uikit-icon css-8xhukk"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"

package/lib/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`Badge > snapshot: variant=critical with icon 1`] = `
 >
   <svg
     aria-hidden="true"
-    class="ucl-uikit-icon css-y1s4m2"
+    class="ucl-uikit-icon css-16viqlt"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
@@ -80,7 +80,7 @@ exports[`Badge > snapshot: variant=info with icon 1`] = `
 >
   <svg
     aria-hidden="true"
-    class="ucl-uikit-icon css-y1s4m2"
+    class="ucl-uikit-icon css-16viqlt"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
@@ -122,7 +122,7 @@ exports[`Badge > snapshot: variant=success with icon 1`] = `
 >
   <svg
     aria-hidden="true"
-    class="ucl-uikit-icon css-y1s4m2"
+    class="ucl-uikit-icon css-16viqlt"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
@@ -153,7 +153,7 @@ exports[`Badge > snapshot: variant=warning with icon 1`] = `
 >
   <svg
     aria-hidden="true"
-    class="ucl-uikit-icon css-y1s4m2"
+    class="ucl-uikit-icon css-16viqlt"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"

package/lib/components/Breadcrumbs/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`Breadcrumbs > Snapshot: No props 1`] = `
       Home
     </span>
     <svg
-      class="ucl-uikit-icon css-1ez1cy1"
+      class="ucl-uikit-icon css-17jji3v"
       data-testid="ucl-uikit-icon"
       fill="none"
       focusable="false"
@@ -44,7 +44,7 @@ exports[`Breadcrumbs > Snapshot: No props 1`] = `
       Timetable
     </a>
     <svg
-      class="ucl-uikit-icon css-1ez1cy1"
+      class="ucl-uikit-icon css-17jji3v"
       data-testid="ucl-uikit-icon"
       fill="none"
       focusable="false"
@@ -91,7 +91,7 @@ exports[`Breadcrumbs > snapshot: Custom Test ID 1`] = `
       Home
     </span>
     <svg
-      class="ucl-uikit-icon css-1ez1cy1"
+      class="ucl-uikit-icon css-17jji3v"
       data-testid="ucl-uikit-icon"
       fill="none"
       focusable="false"
@@ -120,7 +120,7 @@ exports[`Breadcrumbs > snapshot: Custom Test ID 1`] = `
       Timetable
     </a>
     <svg
-      class="ucl-uikit-icon css-1ez1cy1"
+      class="ucl-uikit-icon css-17jji3v"
       data-testid="ucl-uikit-icon"
       fill="none"
       focusable="false"

package/lib/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -95,7 +95,7 @@ exports[`Button > snapshot: with icon 1`] = `
   data-testid="ucl-uikit-button"
 >
   <svg
-    class="ucl-uikit-icon css-148hpxb"
+    class="ucl-uikit-icon css-f962ig"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
@@ -124,7 +124,7 @@ exports[`Button > snapshot: with icon and iconPosition right 1`] = `
 >
   Download
   <svg
-    class="ucl-uikit-icon css-148hpxb"
+    class="ucl-uikit-icon css-f962ig"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"

package/lib/components/Calendar/__tests__/__snapshots__/Calendar.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         type="button"
       >
         <svg
-          class="ucl-uikit-icon css-148hpxb"
+          class="ucl-uikit-icon css-f962ig"
           data-testid="ucl-uikit-icon"
           fill="none"
           focusable="false"
@@ -56,7 +56,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
             March
           </span>
           <svg
-            class="ucl-uikit-icon css-63f9x4"
+            class="ucl-uikit-icon css-discc8"
             data-testid="ucl-uikit-icon"
             fill="none"
             focusable="false"
@@ -103,7 +103,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
             2025
           </span>
           <svg
-            class="ucl-uikit-icon css-63f9x4"
+            class="ucl-uikit-icon css-discc8"
             data-testid="ucl-uikit-icon"
             fill="none"
             focusable="false"
@@ -134,7 +134,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         type="button"
       >
         <svg
-          class="ucl-uikit-icon css-148hpxb"
+          class="ucl-uikit-icon css-f962ig"
           data-testid="ucl-uikit-icon"
           fill="none"
           focusable="false"
@@ -899,7 +899,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         type="button"
       >
         <svg
-          class="ucl-uikit-icon css-148hpxb"
+          class="ucl-uikit-icon css-f962ig"
           data-testid="ucl-uikit-icon"
           fill="none"
           focusable="false"
@@ -936,7 +936,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
             January
           </span>
           <svg
-            class="ucl-uikit-icon css-63f9x4"
+            class="ucl-uikit-icon css-discc8"
             data-testid="ucl-uikit-icon"
             fill="none"
             focusable="false"
@@ -983,7 +983,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
             2025
           </span>
           <svg
-            class="ucl-uikit-icon css-63f9x4"
+            class="ucl-uikit-icon css-discc8"
             data-testid="ucl-uikit-icon"
             fill="none"
             focusable="false"
@@ -1014,7 +1014,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         type="button"
       >
         <svg
-          class="ucl-uikit-icon css-148hpxb"
+          class="ucl-uikit-icon css-f962ig"
           data-testid="ucl-uikit-icon"
           fill="none"
           focusable="false"

package/lib/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`Checkbox > snapshot: checked prop 1`] = `
     class="css-g3adpt"
   >
     <svg
-      class="ucl-uikit-icon css-1nacdsu"
+      class="ucl-uikit-icon css-hkwk1r"
       data-testid="ucl-uikit-icon"
       fill="none"
       height="24"
@@ -52,7 +52,7 @@ exports[`Checkbox > snapshot: indeterminate prop 1`] = `
     class="css-g3adpt"
   >
     <svg
-      class="ucl-uikit-icon css-2i3jn5"
+      class="ucl-uikit-icon css-1vb3wpa"
       data-testid="ucl-uikit-icon"
       fill="none"
       height="24"