@luscii-healthtech/web-ui 35.14.2 → 36.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/_internal/HelperAndErrorText.d.ts +6 -2
  2. package/dist/components/Icons/ImageLibraryIcon.d.ts +4 -0
  3. package/dist/components/Icons/UploadIcon.d.ts +4 -0
  4. package/dist/components/Icons/VideoIcon.d.ts +4 -0
  5. package/dist/components/Icons/index.d.ts +3 -0
  6. package/dist/components/Input/LabeledInput.d.ts +25 -0
  7. package/dist/components/Input/StyledInput.d.ts +1 -1
  8. package/dist/components/Radio/LabeledRadioGroup.d.ts +17 -3
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.development.js +58 -13
  11. package/dist/index.development.js.map +1 -1
  12. package/dist/index.js +1 -1
  13. package/dist/index.js.map +1 -1
  14. package/dist/web-ui.esm.js +1 -1
  15. package/dist/web-ui.esm.js.map +1 -1
  16. package/package.json +3 -3
package/dist/_internal/HelperAndErrorText.d.ts CHANGED
@@ -1,9 +1,13 @@
1
1
  import React from "react";
2
2
  type Props = {
3
3
  errorText?: React.ReactNode;
4
- errorTextId?: string;
5
4
  helperText?: React.ReactNode;
6
- helperTextId?: string;
5
+ /**
6
+ * The ID of the element that the helper/error text describes. This is
7
+ * required for accessibility, as it allows screen readers to associate
8
+ * the helper and error text with the input field.
9
+ */
10
+ describingId: string;
7
11
  };
8
12
  export declare const HelperAndErrorText: (props: Props) => React.JSX.Element;
9
13
  export {};
package/dist/components/Icons/ImageLibraryIcon.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { IconProps } from "./types/IconProps.type";
3
+ declare const _default: (props: IconProps) => JSX.Element;
4
+ export default _default;
package/dist/components/Icons/UploadIcon.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { IconProps } from "./types/IconProps.type";
3
+ declare const _default: (props: IconProps) => JSX.Element;
4
+ export default _default;
package/dist/components/Icons/VideoIcon.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { IconProps } from "./types/IconProps.type";
3
+ declare const _default: (props: IconProps) => JSX.Element;
4
+ export default _default;
package/dist/components/Icons/index.d.ts CHANGED
@@ -54,6 +54,7 @@ export { default as HeartMinusIcon } from "./HeartMinusIcon";
54
54
  export { default as HomeIcon } from "./HomeIcon";
55
55
  export { default as IdBadgeIcon } from "./IdBadgeIcon";
56
56
  export { default as ImageIcon } from "./ImageIcon";
57
+ export { default as ImageLibraryIcon } from "./ImageLibraryIcon";
57
58
  export { default as InfoIcon } from "./InfoIcon";
58
59
  export { default as LifebuoyIcon } from "./LifebuoyIcon";
59
60
  export { default as LightBulbIcon } from "./LightBulbIcon";
@@ -94,6 +95,8 @@ export { default as TadaIcon } from "./TadaIcon";
94
95
  export { default as TrashBinIcon } from "./TrashBinIcon";
95
96
  export { default as TreeIcon } from "./TreeIcon";
96
97
  export { default as UnassignedIcon } from "./UnassignedIcon";
98
+ export { default as UploadIcon } from "./UploadIcon";
99
+ export { default as VideoIcon } from "./VideoIcon";
97
100
  /**
98
101
  * These exports are to ensure backwards compatibility with the
99
102
  * old icon names, until we are ready to make the breaking change
package/dist/components/Input/LabeledInput.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import React from "react";
2
+ import type { IconProps } from "../Icons/types/IconProps.type";
3
+ export declare const LabeledInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "width"> & {
4
+ suffix?: string | undefined;
5
+ prefix?: string | undefined;
6
+ icon?: "AbsentIcon" | "AlarmClockIcon" | "AmberAlertIcon" | "ArrowForward" | "AssignedIcon" | "BellIconSlashed" | "BellIcon" | "BluetoothIcon" | "BrushIcon" | "CakeIcon" | "CalendarDayIcon" | "CalendarMonthIcon" | "CalendarRepeatIcon" | "ChartBarsIcon" | "ChartLineAndBarsIcon" | "ChatBubbleIcon" | "ChatBubbleWithTextIcon" | "CheckIcon" | "ChevronDoubleIcon" | "ChevronDownIcon" | "ChevronLeftIcon" | "ChevronRightIcon" | "ClockIcon" | "CogwheelIcon" | "CopyToClipboardIcon" | "CrossIcon" | "CrossInCircleIcon" | "CrossInFilledCircleIcon" | "DatabaseIcon" | "DownloadIcon" | "DragIndicatorIcon" | "EarthIcon" | "EmailIcon" | "EmptyIcon" | "ExclamationMarkIcon" | "ExportIcon" | "ExternalLinkIcon" | "EyeClosedIcon" | "EyeOpenIcon" | "FilterIcon" | "FireIcon" | "FirstAidKitIcon" | "FlagIcon" | "FolderIcon" | "ForwardIcon" | "GrayAlertIcon" | "GroupIcon" | "GroupOfThreeIcon" | "HamburgerIcon" | "HandshakeIcon" | "HeartIcon" | "HeartMinusIcon" | "HomeIcon" | "IdBadgeIcon" | "ImageIcon" | "ImageLibraryIcon" | "InfoIcon" | "LifebuoyIcon" | "LightBulbIcon" | "LinkIcon" | "ListIcon" | "LockIcon" | "LogInIcon" | "LogOutIcon" | "MessageWithArrowIcon" | "MoreIcon" | "MouseIcon" | "NoteIcon" | "PageIcon" | "PageViewIcon" | "PaperclipIcon" | "PatientIcon" | "PencilIcon" | "PersonIcon" | "PhoneIcon" | "PieChartIcon" | "PinIcon" | "PlusIcon" | "PrinterIcon" | "RedAlertIcon" | "RobotIcon" | "RocketIcon" | "SearchIcon" | "ShareIcon" | "SmallArrowDownIcon" | "SmallArrowUpIcon" | "SmallCircleIcon" | "SmallDiamondIcon" | "SmallSquareIcon" | "SmallUpsideDownTriangleIcon" | "StarIcon" | "StopwatchIcon" | "TadaIcon" | "TrashBinIcon" | "TreeIcon" | "UnassignedIcon" | "UploadIcon" | "VideoIcon" | "AddIcon" | "AlertsIcon" | "ChartIcon" | "ChatBoxIcon" | "DeleteIcon" | "DragIcon" | "EditIcon" | "EyeIcon" | "EyeIconSlashed" | "GearIcon" | "MessagesIcon" | "NotesIcon" | "PrintIcon" | "SpaceRocketIcon" | "SettingsIcon" | "RightArrowIcon" | "DownArrowIcon" | "LeftArrowIcon" | "WarningIcon" | "ChartLineColoredIcon" | "FlagDeColoredIcon" | "FlagFrColoredIcon" | "FlagNlColoredIcon" | "FlagPtColoredIcon" | "FlagUkColoredIcon" | "GearColoredIcon" | "GroupColoredIcon" | "StatusColoredIcon" | React.FC<IconProps> | undefined;
7
+ width?: import("../../types/general.types").FormFieldSize | [import("../../types/general.types").FormFieldSize, (import("../../types/general.types").FormFieldSize | undefined)?, (import("../../types/general.types").FormFieldSize | undefined)?, (import("../../types/general.types").FormFieldSize | undefined)?, (import("../../types/general.types").FormFieldSize | undefined)?] | undefined;
8
+ isError?: boolean | undefined;
9
+ isClearIconVisible?: boolean | undefined; /**
10
+ * All props except the ones we are destructuring are spread onto the input component.
11
+ */
12
+ onClickClearField?: (() => void) | undefined;
13
+ } & React.RefAttributes<HTMLInputElement>, "ref">, "icon" | "width"> & {
14
+ label?: string | undefined;
15
+ icon?: React.FC<IconProps> | undefined;
16
+ /**
17
+ * Any additional information to show underneath the input.
18
+ */
19
+ helperText?: React.ReactNode;
20
+ /**
21
+ * An error message that should be shown when there's something wrong
22
+ * with the user's input.
23
+ */
24
+ errorText?: React.ReactNode;
25
+ } & React.RefAttributes<HTMLInputElement>>;
package/dist/components/Input/StyledInput.d.ts CHANGED
@@ -4,7 +4,7 @@ import { FormFieldSize } from "../../types/general.types";
4
4
  export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "width"> & {
5
5
  suffix?: string | undefined;
6
6
  prefix?: string | undefined;
7
- icon?: "AbsentIcon" | "AlarmClockIcon" | "AmberAlertIcon" | "ArrowForward" | "AssignedIcon" | "BellIconSlashed" | "BellIcon" | "BluetoothIcon" | "BrushIcon" | "CakeIcon" | "CalendarDayIcon" | "CalendarMonthIcon" | "CalendarRepeatIcon" | "ChartBarsIcon" | "ChartLineAndBarsIcon" | "ChatBubbleIcon" | "ChatBubbleWithTextIcon" | "CheckIcon" | "ChevronDoubleIcon" | "ChevronDownIcon" | "ChevronLeftIcon" | "ChevronRightIcon" | "ClockIcon" | "CogwheelIcon" | "CopyToClipboardIcon" | "CrossIcon" | "CrossInCircleIcon" | "CrossInFilledCircleIcon" | "DatabaseIcon" | "DownloadIcon" | "DragIndicatorIcon" | "EarthIcon" | "EmailIcon" | "EmptyIcon" | "ExclamationMarkIcon" | "ExportIcon" | "ExternalLinkIcon" | "EyeClosedIcon" | "EyeOpenIcon" | "FilterIcon" | "FireIcon" | "FirstAidKitIcon" | "FlagIcon" | "FolderIcon" | "ForwardIcon" | "GrayAlertIcon" | "GroupIcon" | "GroupOfThreeIcon" | "HamburgerIcon" | "HandshakeIcon" | "HeartIcon" | "HeartMinusIcon" | "HomeIcon" | "IdBadgeIcon" | "ImageIcon" | "InfoIcon" | "LifebuoyIcon" | "LightBulbIcon" | "LinkIcon" | "ListIcon" | "LockIcon" | "LogInIcon" | "LogOutIcon" | "MessageWithArrowIcon" | "MoreIcon" | "MouseIcon" | "NoteIcon" | "PageIcon" | "PageViewIcon" | "PaperclipIcon" | "PatientIcon" | "PencilIcon" | "PersonIcon" | "PhoneIcon" | "PieChartIcon" | "PinIcon" | "PlusIcon" | "PrinterIcon" | "RedAlertIcon" | "RobotIcon" | "RocketIcon" | "SearchIcon" | "ShareIcon" | "SmallArrowDownIcon" | "SmallArrowUpIcon" | "SmallCircleIcon" | "SmallDiamondIcon" | "SmallSquareIcon" | "SmallUpsideDownTriangleIcon" | "StarIcon" | "StopwatchIcon" | "TadaIcon" | "TrashBinIcon" | "TreeIcon" | "UnassignedIcon" | "AddIcon" | "AlertsIcon" | "ChartIcon" | "ChatBoxIcon" | "DeleteIcon" | "DragIcon" | "EditIcon" | "EyeIcon" | "EyeIconSlashed" | "GearIcon" | "MessagesIcon" | "NotesIcon" | "PrintIcon" | "SpaceRocketIcon" | "SettingsIcon" | "RightArrowIcon" | "DownArrowIcon" | "LeftArrowIcon" | "WarningIcon" | "ChartLineColoredIcon" | "FlagDeColoredIcon" | "FlagFrColoredIcon" | "FlagNlColoredIcon" | "FlagPtColoredIcon" | "FlagUkColoredIcon" | "GearColoredIcon" | "GroupColoredIcon" | "StatusColoredIcon" | React.FC<IconProps> | undefined;
7
+ icon?: "AbsentIcon" | "AlarmClockIcon" | "AmberAlertIcon" | "ArrowForward" | "AssignedIcon" | "BellIconSlashed" | "BellIcon" | "BluetoothIcon" | "BrushIcon" | "CakeIcon" | "CalendarDayIcon" | "CalendarMonthIcon" | "CalendarRepeatIcon" | "ChartBarsIcon" | "ChartLineAndBarsIcon" | "ChatBubbleIcon" | "ChatBubbleWithTextIcon" | "CheckIcon" | "ChevronDoubleIcon" | "ChevronDownIcon" | "ChevronLeftIcon" | "ChevronRightIcon" | "ClockIcon" | "CogwheelIcon" | "CopyToClipboardIcon" | "CrossIcon" | "CrossInCircleIcon" | "CrossInFilledCircleIcon" | "DatabaseIcon" | "DownloadIcon" | "DragIndicatorIcon" | "EarthIcon" | "EmailIcon" | "EmptyIcon" | "ExclamationMarkIcon" | "ExportIcon" | "ExternalLinkIcon" | "EyeClosedIcon" | "EyeOpenIcon" | "FilterIcon" | "FireIcon" | "FirstAidKitIcon" | "FlagIcon" | "FolderIcon" | "ForwardIcon" | "GrayAlertIcon" | "GroupIcon" | "GroupOfThreeIcon" | "HamburgerIcon" | "HandshakeIcon" | "HeartIcon" | "HeartMinusIcon" | "HomeIcon" | "IdBadgeIcon" | "ImageIcon" | "ImageLibraryIcon" | "InfoIcon" | "LifebuoyIcon" | "LightBulbIcon" | "LinkIcon" | "ListIcon" | "LockIcon" | "LogInIcon" | "LogOutIcon" | "MessageWithArrowIcon" | "MoreIcon" | "MouseIcon" | "NoteIcon" | "PageIcon" | "PageViewIcon" | "PaperclipIcon" | "PatientIcon" | "PencilIcon" | "PersonIcon" | "PhoneIcon" | "PieChartIcon" | "PinIcon" | "PlusIcon" | "PrinterIcon" | "RedAlertIcon" | "RobotIcon" | "RocketIcon" | "SearchIcon" | "ShareIcon" | "SmallArrowDownIcon" | "SmallArrowUpIcon" | "SmallCircleIcon" | "SmallDiamondIcon" | "SmallSquareIcon" | "SmallUpsideDownTriangleIcon" | "StarIcon" | "StopwatchIcon" | "TadaIcon" | "TrashBinIcon" | "TreeIcon" | "UnassignedIcon" | "UploadIcon" | "VideoIcon" | "AddIcon" | "AlertsIcon" | "ChartIcon" | "ChatBoxIcon" | "DeleteIcon" | "DragIcon" | "EditIcon" | "EyeIcon" | "EyeIconSlashed" | "GearIcon" | "MessagesIcon" | "NotesIcon" | "PrintIcon" | "SpaceRocketIcon" | "SettingsIcon" | "RightArrowIcon" | "DownArrowIcon" | "LeftArrowIcon" | "WarningIcon" | "ChartLineColoredIcon" | "FlagDeColoredIcon" | "FlagFrColoredIcon" | "FlagNlColoredIcon" | "FlagPtColoredIcon" | "FlagUkColoredIcon" | "GearColoredIcon" | "GroupColoredIcon" | "StatusColoredIcon" | React.FC<IconProps> | undefined;
8
8
  width?: FormFieldSize | [FormFieldSize, (FormFieldSize | undefined)?, (FormFieldSize | undefined)?, (FormFieldSize | undefined)?, (FormFieldSize | undefined)?] | undefined;
9
9
  isError?: boolean | undefined;
10
10
  isClearIconVisible?: boolean | undefined;
package/dist/components/Radio/LabeledRadioGroup.d.ts CHANGED
@@ -1,9 +1,23 @@
1
1
  import React from "react";
2
- import { HelperAndErrorText } from "../../_internal/HelperAndErrorText";
3
- type Props = React.ComponentProps<typeof HelperAndErrorText> & {
4
- children?: React.ReactNode;
2
+ type Props = {
3
+ children: React.ReactNode;
5
4
  title?: string;
6
5
  className?: string;
6
+ /**
7
+ * Any additional information to show underneath the radio group.
8
+ */
9
+ helperText?: React.ReactNode;
10
+ /**
11
+ * An error message that should be shown when there's something wrong
12
+ * with the user's input.
13
+ */
14
+ errorText?: React.ReactNode;
7
15
  };
16
+ /**
17
+ * This component is used to group radio buttons together with a title, and provide
18
+ * a semantic helper and error text to the group. It requires children to function,
19
+ * in practice these are always `LabeledRadio` components (as opposed to `LabeledRadio`
20
+ * and `LabeledInput`, which provide the HTML `input` element themselves).
21
+ */
8
22
  export declare const LabeledRadioGroup: React.FC<Props>;
9
23
  export {};
package/dist/index.d.ts CHANGED
@@ -37,6 +37,7 @@ export { default as Input } from "./components/Input/Input";
37
37
  export { FlyOutMenu } from "./components/FlyOutMenu/FlyOutMenu";
38
38
  export { StyledInput } from "./components/Input/StyledInput";
39
39
  export { StyledRadio } from "./components/Radio/StyledRadio";
40
+ export { LabeledInput } from "./components/Input/LabeledInput";
40
41
  export { LabeledRadio } from "./components/Radio/LabeledRadio";
41
42
  export { LabeledRadioGroup } from "./components/Radio/LabeledRadioGroup";
42
43
  export { default as Line } from "./components/Line/Line";
package/dist/index.development.js CHANGED
@@ -911,6 +911,13 @@ const SvgImageIcon = (props) => React__namespace.default.createElement(
911
911
  );
912
912
  var ImageIcon = IconWrapper(SvgImageIcon);
913
913
 
914
+ const SvgImageLibraryIcon = (props) => React__namespace.default.createElement(
915
+ "svg",
916
+ Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props),
917
+ React__namespace.default.createElement("path", { fill: "currentColor", d: "m12.942 12.808-1.207-1.5a.441.441 0 0 0-.357-.171.433.433 0 0 0-.357.18l-1.377 1.806c-.12.154-.14.313-.058.477a.424.424 0 0 0 .41.246h7.508a.424.424 0 0 0 .41-.246.427.427 0 0 0-.049-.477l-2.184-2.886a.438.438 0 0 0-.362-.181.437.437 0 0 0-.361.18l-2.016 2.572ZM8.058 17.5c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V4.308c0-.505.175-.933.525-1.283.35-.35.778-.525 1.283-.525h11.384c.505 0 .933.175 1.283.525.35.35.525.778.525 1.283v11.384c0 .505-.175.933-.525 1.283-.35.35-.778.525-1.283.525H8.058Zm0-1.5h11.384a.294.294 0 0 0 .212-.096.294.294 0 0 0 .096-.212V4.308a.294.294 0 0 0-.096-.212.294.294 0 0 0-.212-.096H8.058a.294.294 0 0 0-.212.096.294.294 0 0 0-.096.212v11.384c0 .077.032.148.096.212a.294.294 0 0 0 .212.096Zm-3.5 5c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283V7.058c0-.213.072-.391.216-.535a.726.726 0 0 1 .534-.215.73.73 0 0 1 .535.215.727.727 0 0 1 .215.535v12.134c0 .077.032.148.096.212a.294.294 0 0 0 .212.096h12.134a.73.73 0 0 1 .535.215.726.726 0 0 1 .215.535.726.726 0 0 1-.215.535.726.726 0 0 1-.535.215H4.558Z" })
918
+ );
919
+ var ImageLibraryIcon = IconWrapper(SvgImageLibraryIcon);
920
+
914
921
  const SvgInfoIcon = (props) => React__namespace.default.createElement(
915
922
  "svg",
916
923
  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props),
@@ -1194,6 +1201,20 @@ const SvgUnassignedIcon = (props) => React__namespace.default.createElement(
1194
1201
  );
1195
1202
  var UnassignedIcon = IconWrapper(SvgUnassignedIcon);
1196
1203
 
1204
+ const SvgUploadIcon = (props) => React__namespace.default.createElement(
1205
+ "svg",
1206
+ Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props),
1207
+ React__namespace.default.createElement("path", { fill: "currentColor", d: "m11.25 12.215-1.333 1.318a.692.692 0 0 1-.513.207.726.726 0 0 1-.531-.223.683.683 0 0 1-.212-.526.732.732 0 0 1 .212-.527l2.494-2.495A.867.867 0 0 1 12 9.698c.241 0 .452.09.633.271l2.494 2.495a.749.749 0 0 1 .22.518.681.681 0 0 1-.22.536.715.715 0 0 1-.52.21.746.746 0 0 1-.534-.205l-1.323-1.308v5.477c0 .077.032.148.096.212a.294.294 0 0 0 .212.096H18.5c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C19.792 13.242 19.2 13 18.5 13H17v-2c0-1.383-.488-2.563-1.463-3.537C14.563 6.487 13.383 6 12 6s-2.563.487-3.537 1.463C7.488 8.437 7 9.617 7 11h-.52c-.947 0-1.764.342-2.45 1.025A3.364 3.364 0 0 0 3 14.5c0 .967.342 1.792 1.025 2.475A3.372 3.372 0 0 0 6.5 18h1.75c.213 0 .39.072.534.216A.726.726 0 0 1 9 18.75a.726.726 0 0 1-.216.535.726.726 0 0 1-.534.215H6.5c-1.382 0-2.56-.48-3.537-1.438-.975-.96-1.463-2.13-1.463-3.516 0-1.242.4-2.335 1.199-3.278.8-.943 1.79-1.501 2.974-1.676.32-1.495 1.072-2.717 2.255-3.667C9.111 4.975 10.468 4.5 12 4.5c1.81 0 3.347.63 4.608 1.892C17.869 7.653 18.5 9.189 18.5 11v.5h.308c1.054.082 1.932.506 2.636 1.271.704.766 1.056 1.675 1.056 2.729 0 1.115-.385 2.06-1.154 2.837-.77.775-1.711 1.163-2.827 1.163h-5.461c-.505 0-.933-.175-1.283-.525a1.745 1.745 0 0 1-.525-1.283v-5.477Z" })
1208
+ );
1209
+ var UploadIcon = IconWrapper(SvgUploadIcon);
1210
+
1211
+ const SvgVideoIcon = (props) => React__namespace.default.createElement(
1212
+ "svg",
1213
+ Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props),
1214
+ React__namespace.default.createElement("path", { fill: "currentColor", d: "m10.794 15.365 4.356-2.798a.637.637 0 0 0 .321-.566.642.642 0 0 0-.321-.568l-4.356-2.798a.616.616 0 0 0-.69-.037.643.643 0 0 0-.354.604v5.596c0 .274.118.475.354.604.236.13.466.117.69-.037Zm1.208 6.135a9.254 9.254 0 0 1-3.706-.748 9.596 9.596 0 0 1-3.016-2.03 9.595 9.595 0 0 1-2.032-3.016 9.246 9.246 0 0 1-.748-3.704c0-1.314.25-2.55.748-3.706a9.596 9.596 0 0 1 2.03-3.016 9.594 9.594 0 0 1 3.016-2.032 9.246 9.246 0 0 1 3.704-.748c1.314 0 2.55.25 3.706.748a9.596 9.596 0 0 1 3.017 2.03 9.594 9.594 0 0 1 2.03 3.016 9.247 9.247 0 0 1 .749 3.704 9.27 9.27 0 0 1-.748 3.706 9.596 9.596 0 0 1-2.03 3.017 9.595 9.595 0 0 1-3.016 2.03 9.247 9.247 0 0 1-3.704.749ZM12 20c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z" })
1215
+ );
1216
+ var VideoIcon = IconWrapper(SvgVideoIcon);
1217
+
1197
1218
  var Icons = /*#__PURE__*/Object.freeze({
1198
1219
  __proto__: null,
1199
1220
  AbsentIcon: AbsentIcon,
@@ -1270,6 +1291,7 @@ var Icons = /*#__PURE__*/Object.freeze({
1270
1291
  HomeIcon: HomeIcon,
1271
1292
  IdBadgeIcon: IdBadgeIcon,
1272
1293
  ImageIcon: ImageIcon,
1294
+ ImageLibraryIcon: ImageLibraryIcon,
1273
1295
  InfoIcon: InfoIcon,
1274
1296
  LeftArrowIcon: LeftArrowIcon,
1275
1297
  LifebuoyIcon: LifebuoyIcon,
@@ -1318,6 +1340,8 @@ var Icons = /*#__PURE__*/Object.freeze({
1318
1340
  TrashBinIcon: TrashBinIcon,
1319
1341
  TreeIcon: TreeIcon,
1320
1342
  UnassignedIcon: UnassignedIcon,
1343
+ UploadIcon: UploadIcon,
1344
+ VideoIcon: VideoIcon,
1321
1345
  WarningIcon: ExclamationMarkIcon
1322
1346
  });
1323
1347
 
@@ -3185,12 +3209,14 @@ NotificationBanner.defaultProps = {
3185
3209
 
3186
3210
  const HelperAndErrorText = (props) => {
3187
3211
  const showHelperText = Boolean(props.helperText) && !props.errorText;
3188
- return React__namespace.default.createElement(
3189
- Box,
3190
- null,
3191
- props.errorText && React__namespace.default.createElement(Text, { variant: "sm", color: "red", id: props.errorTextId }, props.errorText),
3192
- showHelperText && React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500", id: props.helperTextId }, props.helperText)
3193
- );
3212
+ if (showHelperText) {
3213
+ return React__namespace.default.createElement(
3214
+ Box,
3215
+ { id: props.describingId },
3216
+ React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, props.helperText)
3217
+ );
3218
+ }
3219
+ return React__namespace.default.createElement(Box, { id: props.describingId }, props.errorText && React__namespace.default.createElement(Text, { variant: "sm", color: "red" }, props.errorText));
3194
3220
  };
3195
3221
 
3196
3222
  var css_248z$a = ".ui-radio-form-field-label input[type=\"radio\"]:checked + .ui-radio-circle {\n --tw-bg-opacity: 1;\n background-color: rgb(30 64 175 / var(--tw-bg-opacity));\n --tw-border-opacity: 1;\n border-color: rgb(30 64 175 / var(--tw-border-opacity));\n}\n.ui-radio-form-field-label input[type=\"radio\"]:disabled + .ui-radio-circle {\n opacity: 0.5;\n}\n\n.ui-radio-form-field-label[data-has-error=\"true\"] .ui-radio-circle {\n --tw-border-opacity: 1;\n border-color: rgb(185 28 28 / var(--tw-border-opacity));\n outline-color: #FFF1F1;\n}\n\n.ui-radio-form-field-label\n input[type=\"radio\"]:checked\n + .ui-radio-circle\n .ui-radio-inner-circle {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n";
@@ -3214,15 +3240,16 @@ function RadioInner(_a) {
3214
3240
  var { text, info, isError, innerRef, className, name } = _a, otherProps = __rest(_a, ["text", "info", "isError", "innerRef", "className", "name"]);
3215
3241
  const { value, disabled } = otherProps;
3216
3242
  const nameHtmlFor = `${name}-field-${value}`;
3243
+ const semanticId = React__namespace.default.useId();
3217
3244
  return React__namespace.default.createElement(
3218
3245
  Stack,
3219
3246
  { as: "label", axis: "x", gap: "xs", className: "ui-radio-form-field-label ui-flex ui-flex-row ui-leading-none", htmlFor: nameHtmlFor, "data-has-error": isError, "data-test-id": nameHtmlFor },
3220
- React__namespace.default.createElement(StyledRadio, Object.assign({}, otherProps, { name, id: nameHtmlFor, ref: innerRef })),
3247
+ React__namespace.default.createElement(StyledRadio, Object.assign({}, otherProps, { name, id: nameHtmlFor, ref: innerRef, "aria-describedby": semanticId })),
3221
3248
  React__namespace.default.createElement(
3222
3249
  "div",
3223
3250
  null,
3224
3251
  text && React__namespace.default.createElement(Text, { inline: true, variant: "base", color: disabled ? "slate-500" : void 0 }, text),
3225
- React__namespace.default.createElement(HelperAndErrorText, { helperText: info })
3252
+ React__namespace.default.createElement(HelperAndErrorText, { helperText: info, describingId: semanticId })
3226
3253
  )
3227
3254
  );
3228
3255
  }
@@ -3924,9 +3951,22 @@ const LabelText = (props) => {
3924
3951
  return React__namespace.default.createElement(Text, Object.assign({}, props));
3925
3952
  };
3926
3953
 
3954
+ const LabeledInput = React__namespace.default.forwardRef((props, ref) => {
3955
+ const { className, helperText, errorText, label, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "aria-describedby"]);
3956
+ const helperErrorTextId = React__namespace.default.useId();
3957
+ return React__namespace.default.createElement(
3958
+ Stack,
3959
+ { as: "label", gap: "xxxxs", className },
3960
+ label && React__namespace.default.createElement(LabelText, null, props.label),
3961
+ React__namespace.default.createElement(StyledInput, Object.assign({}, rest, { ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].join(" ") })),
3962
+ React__namespace.default.createElement(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })
3963
+ );
3964
+ });
3965
+
3927
3966
  const LabeledRadio = React__namespace.default.forwardRef((props, ref) => {
3928
3967
  const { children, label, helperText, errorText, className, inputClassName } = props, attributes = __rest(props, ["children", "label", "helperText", "errorText", "className", "inputClassName"]);
3929
3968
  const { id, disabled } = attributes;
3969
+ const semanticId = React__namespace.default.useId();
3930
3970
  return React__namespace.default.createElement(
3931
3971
  Stack,
3932
3972
  { as: "label", axis: "x", gap: "xs", htmlFor: id, className: classNames__default.default("ui-radio-form-field-label", className) },
@@ -3937,14 +3977,14 @@ const LabeledRadio = React__namespace.default.forwardRef((props, ref) => {
3937
3977
  React__namespace.default.createElement(
3938
3978
  "div",
3939
3979
  { className: "ui-absolute" },
3940
- React__namespace.default.createElement(StyledRadio, Object.assign({ "aria-describedby": `${id}-helper-text ${id}-error-text` }, attributes, { ref, className: inputClassName }))
3980
+ React__namespace.default.createElement(StyledRadio, Object.assign({ "aria-describedby": semanticId }, attributes, { ref, className: inputClassName }))
3941
3981
  )
3942
3982
  ),
3943
3983
  React__namespace.default.createElement(
3944
3984
  "div",
3945
3985
  null,
3946
3986
  React__namespace.default.createElement(RadioLabel, { label, disabled }, children),
3947
- React__namespace.default.createElement(HelperAndErrorText, { helperText, helperTextId: `${id}-helper-text`, errorText, errorTextId: `${id}-error-text` })
3987
+ React__namespace.default.createElement(HelperAndErrorText, { helperText, errorText, describingId: semanticId })
3948
3988
  )
3949
3989
  );
3950
3990
  });
@@ -3960,17 +4000,18 @@ function RadioLabel(props) {
3960
4000
  }
3961
4001
 
3962
4002
  const LabeledRadioGroup = (props) => {
3963
- const { children, title, className, errorText, errorTextId, helperText, helperTextId } = props;
4003
+ const { children, title, className } = props;
4004
+ const semanticId = React__namespace.default.useId();
3964
4005
  return React__namespace.default.createElement(
3965
4006
  Stack,
3966
- { as: "fieldset", className: classNames__default.default(className), gap: "xxxxs" },
4007
+ { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), gap: "xxxxs" },
3967
4008
  title && React__namespace.default.createElement(
3968
4009
  "legend",
3969
4010
  { className: "ui-contents" },
3970
4011
  React__namespace.default.createElement(Text, null, title)
3971
4012
  ),
3972
4013
  React__namespace.default.createElement(Stack, { gap: "xxs" }, children),
3973
- React__namespace.default.createElement(HelperAndErrorText, { errorText, errorTextId, helperText, helperTextId })
4014
+ React__namespace.default.createElement(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })
3974
4015
  );
3975
4016
  };
3976
4017
 
@@ -7325,9 +7366,11 @@ exports.Icon = Icon;
7325
7366
  exports.IdBadgeIcon = IdBadgeIcon;
7326
7367
  exports.Image = Image$2;
7327
7368
  exports.ImageIcon = ImageIcon;
7369
+ exports.ImageLibraryIcon = ImageLibraryIcon;
7328
7370
  exports.InfoField = InfoField;
7329
7371
  exports.InfoIcon = InfoIcon;
7330
7372
  exports.Input = Input;
7373
+ exports.LabeledInput = LabeledInput;
7331
7374
  exports.LabeledRadio = LabeledRadio;
7332
7375
  exports.LabeledRadioGroup = LabeledRadioGroup;
7333
7376
  exports.LeftArrowIcon = LeftArrowIcon;
@@ -7432,7 +7475,9 @@ exports.TreeIcon = TreeIcon;
7432
7475
  exports.UList = UnorderedList;
7433
7476
  exports.UnassignedIcon = UnassignedIcon;
7434
7477
  exports.UnorderedList = UnorderedList;
7478
+ exports.UploadIcon = UploadIcon;
7435
7479
  exports.VerticalMenu = VerticalMenu;
7480
+ exports.VideoIcon = VideoIcon;
7436
7481
  exports.WarningIcon = ExclamationMarkIcon;
7437
7482
  exports.WeekdaysPicker = WeekdaysPicker;
7438
7483
  exports.getDndListItemProps = getDndListItemProps;