uikit-react-public 0.45.2 → 0.45.5

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/components/Label/Label.d.ts

@@ -5,6 +5,7 @@ export interface LabelBaseProps extends LabelHTMLAttributes<HTMLLabelElement> {
     type?: 'block' | 'inline';
     disabled?: boolean;
     optional?: boolean;
+    optionalClassName?: string;
     testId?: string;
 }
 export type LabelProps = LabelBaseProps & MarginProps;

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

@@ -9,4 +9,5 @@ export declare const Default: Story;
 export declare const Inline: Story;
 export declare const Disabled: Story;
 export declare const Optional: Story;
+export declare const OptionalWithCustomStyle: Story;
 export declare const WithLongText: Story;

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,
@@ -20949,20 +20950,21 @@ const M3 = (e, t) => {
     type: e = "block",
     disabled: t,
     optional: o,
-    testId: r = dl,
-    className: l,
-    children: i,
-    ...a
-  }, c) => {
-    const [u] = L(), {
-      disabled: s,
-      optional: f,
-      id: h
+    optionalClassName: r,
+    testId: l = dl,
+    className: i,
+    children: a,
+    ...c
+  }, u) => {
+    const [s] = L(), {
+      disabled: f,
+      optional: h,
+      id: p
     } = St(Tt);
-    t = t ?? s, o = o ?? f;
-    const p = a.htmlFor ?? h, { md: m, mdSemibold: y } = u.typography.body, b = d`
+    t = t ?? f, o = o ?? h;
+    const m = c.htmlFor ?? p, { mdSemibold: y } = s.typography.body, b = d`
       width: 100%;
-      color: ${u.colour.text.default};
+      color: ${s.colour.text.default};
       font-family: ${y.fontFamily};
       font-feature-settings: ${y.fontSettings};
       font-size: ${y.fontSize}px;
@@ -20973,32 +20975,29 @@ const M3 = (e, t) => {
     `, k = d`
       display: inline;
     `, x = d`
-      color: ${u.colour.text.disabled};
+      color: ${s.colour.text.disabled};
     `, S = A(
       dl,
       b,
-      He(a, u),
+      He(c, s),
       e === "block" && C,
       e === "inline" && k,
       t && x,
-      l
-    ), M = d`
-      font-weight: ${m.fontWeight};
-      font-style: italic;
-    `;
+      i
+    );
     return /* @__PURE__ */ g(
       "label",
       {
-        ref: c,
-        htmlFor: p,
+        ref: u,
+        htmlFor: m,
         className: S,
-        "data-testid": r,
-        ...a,
+        "data-testid": l,
+        ...c,
         children: [
-          i,
+          a,
           o && /* @__PURE__ */ g(Oe, { children: [
             " ",
-            /* @__PURE__ */ n("span", { className: M, children: "(optional)" })
+            /* @__PURE__ */ n("span", { className: r, children: "(optional)" })
           ] })
         ]
       }
@@ -28026,53 +28025,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 +28086,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
+          }
+        )
       ]
     }
   ) });

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"