@veeqo/ui 9.0.1 → 9.1.0

package/dist/components/SelectDropdown/ListItem/ListItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ListItemProps } from './types';
+export declare const ListItem: ({ id, label, href, ...props }: ListItemProps) => React.JSX.Element;

package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CheckboxIndicator: ({ checked, ...otherProps }: any) => React.JSX.Element;

package/dist/components/SelectDropdown/ListItem/components/ListItemContent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ListItemContentProps } from './types';
+export declare const ListItemContent: ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging, selectionMode, isLink, isSelected, }: ListItemContentProps) => React.JSX.Element;

package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RadioIndicator: ({ checked, ...otherProps }: any) => React.JSX.Element;

package/dist/components/SelectDropdown/ListItem/components/SelectionType.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type SelectionTypeProps = {
+    selectionMode: 'single' | 'multiple' | 'none';
+    isSelected: boolean;
+    isLink?: boolean;
+};
+export declare const SelectionType: ({ selectionMode, isSelected, isLink }: SelectionTypeProps) => React.JSX.Element | null;
+export {};

package/dist/components/SelectDropdown/ListItem/components/types.d.ts

@@ -0,0 +1,11 @@
+import { BasicListItemProps } from '../types';
+export type ListItemContentProps = BasicListItemProps & {
+    /** renders a drag icon */
+    allowsDragging?: boolean;
+    /** renders a checkbox or radio depending on state, default is radio */
+    selectionMode?: 'single' | 'multiple' | 'none';
+    /** shows item in selected state */
+    isSelected?: boolean;
+    /** Renders icon to indicate item is a link */
+    isLink?: boolean;
+};

package/dist/components/SelectDropdown/ListItem/index.d.ts

@@ -0,0 +1 @@
+export { ListItem } from './ListItem';

package/dist/components/SelectDropdown/ListItem/styled.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const StyledListItem: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").ListBoxItemProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {
+    appearance?: "primary" | "secondary" | undefined;
+}, never>;
+export declare const StyledListBox: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").ListBoxProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;
+export declare const LinkIcon: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {
+    width: string;
+    height: string;
+}, "height" | "width">;
+export declare const HorizontalContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack/types").StackProps & {
+    direction: string;
+    alignY: string;
+}, "direction" | "alignY">;
+export declare const VerticalContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack/types").StackProps & {
+    spacing: string;
+}, "spacing">;
+export declare const InfoContainer: import("styled-components").StyledComponent<"div", any, {
+    hasItemInfoSlot: boolean;
+    hasEndInfoSlot: boolean;
+}, never>;
+export declare const ItemInfoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/SelectDropdown/ListItem/types.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { ListBoxItemProps } from 'react-aria-components';
+export type BasicListItemProps = {
+    id?: string;
+    /** Label for the item */
+    label: string;
+    /** Renders the media provided, e.g Image or Icon */
+    mediaSlot?: ReactElement;
+    /** Hint text for the item */
+    hint?: string;
+    /** Slot for extra info for the item, e.g (Tooltip, mini-tag) */
+    itemInfoSlot?: ReactElement;
+    endInfoSlot?: ReactElement;
+    /** Renders mini alert, e.g (Low stock) */
+    alert?: {
+        title: string;
+        variant: 'success' | 'error' | 'warning' | 'info' | 'default' | 'recommend';
+    };
+    /** Used to differentiate between items */
+    appearance?: 'primary' | 'secondary';
+};
+export type ListItemProps = ListBoxItemProps & BasicListItemProps;

package/dist/components/SelectDropdown/ListItemSection/ListItemSection.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactElement } from 'react';
+import { SectionProps } from 'react-aria-components';
+import { ListItemProps } from '../ListItem/types';
+export type ListItemSectionProps = Omit<SectionProps<ListItemProps>, 'items'> & {
+    label: string;
+    hint?: string;
+    itemInfoSlot?: ReactElement;
+    items?: ListItemProps[];
+};
+export declare const ListItemSection: ({ label, hint, itemInfoSlot, items, children, ...props }: ListItemSectionProps) => React.JSX.Element;

package/dist/components/SelectDropdown/ListItemSection/index.d.ts

@@ -0,0 +1 @@
+export { ListItemSection } from './ListItemSection';

package/dist/components/SelectDropdown/ListItemSection/styled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const InfoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSection: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").SectionProps<T> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;

package/dist/components/SelectDropdown/SelectDropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SelectDropdownProps } from './types';
+export declare const SelectDropdown: ({ id, className, placeholder, multiple, compact, hasError, options, value, actions, isLoading, searchValue, emptyStateSlot, onSearchChange, onChange, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: SelectDropdownProps) => React.JSX.Element;

package/dist/components/SelectDropdown/components/SelectDropdownState.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react';
+type SelectDropdownStateProps = {
+    isLoading: boolean;
+    emptyStateSlot?: ReactElement;
+};
+export declare const SelectDropdownState: ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => React.JSX.Element;
+export {};

package/dist/components/SelectDropdown/components/SelectedOption.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectDropdownItem } from '../types';
+type SelectedOptionProps = {
+    placeholder: string;
+    options: SelectDropdownItem[];
+    selectionMode: 'single' | 'multiple';
+};
+export declare const SelectedOption: ({ placeholder, options, selectionMode }: SelectedOptionProps) => React.JSX.Element;
+export {};

package/dist/components/SelectDropdown/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const SelectDropdown: import("react").FC<{
+    children?: import("react").ReactNode | ((item: import("./types").SelectDropdownItem) => import("react").ReactNode);
+    onScroll?: ((e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
+    disabledKeys?: Iterable<import("react-aria").Key> | undefined;
+    dragAndDropHooks?: import("react-aria-components").DragAndDropHooks | undefined;
+} & {
+    id?: string | undefined;
+    className?: string | undefined;
+    multiple?: boolean | undefined;
+    compact?: boolean | undefined;
+    hasError?: boolean | undefined;
+    options: import("./types").SelectDropdownItem[];
+    emptyStateSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    isLoading?: boolean | undefined;
+    onChange: (selectedItems: import("./types").SelectDropdownItem[]) => void;
+    value?: import("react-aria").Key[] | undefined;
+    placeholder?: string | undefined;
+    actions?: (Omit<import("../Button/types").ButtonProps, "variant"> & {
+        label: string;
+    })[] | undefined;
+    searchValue?: string | undefined;
+    onSearchChange?: ((value: string) => void) | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+} & import("../../hoc/withLabels/withLabels").WithLabelsProps>;

package/dist/components/SelectDropdown/styled.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { DropdownProps } from '../Dropdown/types';
+export declare const StyledListBox: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").ListBoxProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;
+export declare const StyledDropdown: React.FC<DropdownProps & {
+    hasError: boolean;
+}>;
+export declare const StyledSearch: import("styled-components").StyledComponent<({ type, disabled, onClearClick, onChange, onBlur, onFocus, onKeyUp, onKeyDown, onKeyPress, value, error, placeholder, className, name, isLoading, fill, reversed, autoComplete, size, }: import("../Search/types").SearchProps) => import("react").JSX.Element, any, {}, never>;
+export declare const Separator: import("styled-components").StyledComponent<"hr", any, {}, never>;
+export declare const CTAButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode;
+    variant?: import("../Button/types").ButtonVariant | undefined;
+    size?: "base" | "sm" | undefined;
+    iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    dropdown?: boolean | undefined;
+    loading?: boolean | undefined;
+    contentStyles?: import("react").CSSProperties | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>, any, {
+    variant: "flat";
+}, "variant">;

package/dist/components/SelectDropdown/types.d.ts

@@ -0,0 +1,35 @@
+import { Key, ListBoxProps } from 'react-aria-components';
+import { ReactElement } from 'react';
+import { ButtonProps } from '../Button/types';
+import { ListItemProps } from './ListItem/types';
+import { ListItemSectionProps } from './ListItemSection/ListItemSection';
+export type SelectDropdownProps = ImportedListBoxProps & {
+    id?: string;
+    className?: string;
+    multiple?: boolean;
+    compact?: boolean;
+    hasError?: boolean;
+    options: SelectDropdownItem[];
+    emptyStateSlot?: ReactElement;
+    isLoading?: boolean;
+    onChange: (selectedItems: SelectDropdownItem[]) => void;
+    value?: Key[];
+    placeholder?: string;
+    actions?: CTAButtonProps[];
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+type CTAButtonProps = Omit<ButtonProps, 'variant'> & {
+    label: string;
+};
+export type SelectDropdownItem = ListItemProps | ListItemSectionProps;
+type ImportedListBoxProps = Pick<ListBoxProps<SelectDropdownItem>, 'children' | 'dragAndDropHooks' | 'onScroll' | 'disabledKeys'>;
+export type ClassNamesReturnPayload = {
+    button?: string;
+    optionsContainer?: string;
+    popover?: string;
+};
+export {};

package/dist/components/SelectDropdown/utils.d.ts

@@ -0,0 +1,4 @@
+import { Key } from 'react-aria-components';
+import { ClassNamesReturnPayload, SelectDropdownItem } from './types';
+export declare const getValuesFromKeys: (items: SelectDropdownItem[], hasSection: boolean, keys?: Key[]) => SelectDropdownItem[];
+export declare const generateClassNames: (prefix?: string) => ClassNamesReturnPayload;

package/dist/hoc/withLabels/withLabels.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var AttentionIcon = require('../../tempIcons/AttentionIcon.cjs');
 var index = require('../../theme/index.cjs');
 var Stack = require('../../components/Stack/Stack.cjs');
 var styled = require('./styled.cjs');
@@ -21,9 +22,11 @@ const withLabels = (Component) => ({ label, hint, error, tooltip, ...otherProps
                 React__default.default.createElement(styled.Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
                 tooltip && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip },
                     React__default.default.createElement(HelpIcon.HelpIcon, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
-            hint && React__default.default.createElement(styled.Hint, null, hint)),
+            hint && React__default.default.createElement(styled.Hint, { id: `${componentId}-hint` }, hint)),
         React__default.default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
-        error && React__default.default.createElement(styled.Error, null, error)));
+        error && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
+            React__default.default.createElement(AttentionIcon.AttentionIcon, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
+            React__default.default.createElement(styled.Error, null, error)))));
 };
 
 exports.withLabels = withLabels;

package/dist/hoc/withLabels/withLabels.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC } from 'react';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: string;\n  hint?: string | React.ReactNode;\n  error?: string;\n  tooltip?: string;\n}\n\nexport const withLabels =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n  ({ label, hint, error, tooltip, ...otherProps }: WithLabelsProps) => {\n    const componentId = useId({ id: otherProps?.id, prefix: Component.name });\n\n    if (!label) return <Component hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <div style={{ marginBottom: theme.sizes.xs }}>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            <Label id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Label>\n            {tooltip && (\n              <BlockTooltip text={tooltip}>\n                <HelpIcon\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <Hint>{hint}</Hint>}\n        </div>\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && <Error>{error}</Error>}\n      </RootStack>\n    );\n  };\n"],"names":["useId","React","RootStack","theme","Stack","Label","BlockTooltip","HelpIcon","Hint","Error"],"mappings":";;;;;;;;;;;;;MAgBa,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClE,MAAM,WAAW,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzE,IAAA,IAAI,CAAC,KAAK;QAAE,OAAOC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACEA,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtCD,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAEE,WAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAAF,sBAAA,CAAA,aAAA,CAACG,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAH,sBAAA,CAAA,aAAA,CAACI,YAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,OAAO,KACNJ,sBAAA,CAAA,aAAA,CAACK,mBAAY,EAAC,EAAA,IAAI,EAAE,OAAO,EAAA;AACzB,oBAAAL,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EACP,KAAK,EAAEJ,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;AACP,YAAA,IAAI,IAAIF,sBAAC,CAAA,aAAA,CAAAO,WAAI,EAAE,IAAA,EAAA,IAAI,CAAQ,CACxB;AACN,QAAAP,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;QACvE,KAAK,IAAIA,qCAACQ,YAAK,EAAA,IAAA,EAAE,KAAK,CAAS,CACtB;AAEhB;;;;"}
+{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC } from 'react';\nimport { AttentionIcon } from '../../tempIcons/AttentionIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: string;\n  hint?: string | React.ReactNode;\n  error?: string;\n  tooltip?: string;\n}\n\nexport const withLabels =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n  ({ label, hint, error, tooltip, ...otherProps }: WithLabelsProps) => {\n    const componentId = useId({ id: otherProps?.id, prefix: Component.name });\n\n    if (!label) return <Component hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <div style={{ marginBottom: theme.sizes.xs }}>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            <Label id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Label>\n            {tooltip && (\n              <BlockTooltip text={tooltip}>\n                <HelpIcon\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        </div>\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <AttentionIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n"],"names":["useId","React","RootStack","theme","Stack","Label","BlockTooltip","HelpIcon","Hint","AttentionIcon","Error"],"mappings":";;;;;;;;;;;;;;MAiBa,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClE,MAAM,WAAW,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzE,IAAA,IAAI,CAAC,KAAK;QAAE,OAAOC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACEA,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtCD,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAEE,WAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAAF,sBAAA,CAAA,aAAA,CAACG,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAH,sBAAA,CAAA,aAAA,CAACI,YAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,OAAO,KACNJ,sBAAA,CAAA,aAAA,CAACK,mBAAY,EAAC,EAAA,IAAI,EAAE,OAAO,EAAA;AACzB,oBAAAL,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EACP,KAAK,EAAEJ,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;AACP,YAAA,IAAI,IAAIF,sBAAA,CAAA,aAAA,CAACO,WAAI,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAO,KAAA,CAAA,EAAA,EAAG,IAAI,CAAQ,CACnD;AACN,QAAAP,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,QAAA,KAAK,KACJA,sBAAC,CAAA,aAAA,CAAAG,WAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;YACxDH,sBAAC,CAAA,aAAA,CAAAQ,2BAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAEN,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;YAChFF,sBAAC,CAAA,aAAA,CAAAS,YAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB;;;;"}

package/dist/hoc/withLabels/withLabels.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AttentionIcon } from '../../tempIcons/AttentionIcon.js';
 import { theme } from '../../theme/index.js';
 import { Stack } from '../../components/Stack/Stack.js';
 import { RootStack, Label, BlockTooltip, Hint, Error } from './styled.js';
@@ -15,9 +16,11 @@ const withLabels = (Component) => ({ label, hint, error, tooltip, ...otherProps
                 React.createElement(Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
                 tooltip && (React.createElement(BlockTooltip, { text: tooltip },
                     React.createElement(HelpIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
-            hint && React.createElement(Hint, null, hint)),
+            hint && React.createElement(Hint, { id: `${componentId}-hint` }, hint)),
         React.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
-        error && React.createElement(Error, null, error)));
+        error && (React.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
+            React.createElement(AttentionIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
+            React.createElement(Error, null, error)))));
 };
 
 export { withLabels };

package/dist/hoc/withLabels/withLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC } from 'react';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: string;\n  hint?: string | React.ReactNode;\n  error?: string;\n  tooltip?: string;\n}\n\nexport const withLabels =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n  ({ label, hint, error, tooltip, ...otherProps }: WithLabelsProps) => {\n    const componentId = useId({ id: otherProps?.id, prefix: Component.name });\n\n    if (!label) return <Component hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <div style={{ marginBottom: theme.sizes.xs }}>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            <Label id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Label>\n            {tooltip && (\n              <BlockTooltip text={tooltip}>\n                <HelpIcon\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <Hint>{hint}</Hint>}\n        </div>\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && <Error>{error}</Error>}\n      </RootStack>\n    );\n  };\n"],"names":[],"mappings":";;;;;;;MAgBa,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClE,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzE,IAAA,IAAI,CAAC,KAAK;QAAE,OAAO,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,OAAO,KACN,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,IAAI,EAAE,OAAO,EAAA;AACzB,oBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;AACP,YAAA,IAAI,IAAI,KAAC,CAAA,aAAA,CAAA,IAAI,EAAE,IAAA,EAAA,IAAI,CAAQ,CACxB;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;QACvE,KAAK,IAAI,oBAAC,KAAK,EAAA,IAAA,EAAE,KAAK,CAAS,CACtB;AAEhB;;;;"}
+{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC } from 'react';\nimport { AttentionIcon } from '../../tempIcons/AttentionIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: string;\n  hint?: string | React.ReactNode;\n  error?: string;\n  tooltip?: string;\n}\n\nexport const withLabels =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n  ({ label, hint, error, tooltip, ...otherProps }: WithLabelsProps) => {\n    const componentId = useId({ id: otherProps?.id, prefix: Component.name });\n\n    if (!label) return <Component hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <div style={{ marginBottom: theme.sizes.xs }}>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            <Label id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Label>\n            {tooltip && (\n              <BlockTooltip text={tooltip}>\n                <HelpIcon\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        </div>\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <AttentionIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n"],"names":[],"mappings":";;;;;;;;MAiBa,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClE,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzE,IAAA,IAAI,CAAC,KAAK;QAAE,OAAO,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,OAAO,KACN,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,IAAI,EAAE,OAAO,EAAA;AACzB,oBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;AACP,YAAA,IAAI,IAAI,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAO,KAAA,CAAA,EAAA,EAAG,IAAI,CAAQ,CACnD;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,QAAA,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;YACxD,KAAC,CAAA,aAAA,CAAA,aAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;YAChF,KAAC,CAAA,aAAA,CAAA,KAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB;;;;"}

package/dist/tempIcons/ActiveCheckboxIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ActiveCheckboxIcon: (props: any) => React.JSX.Element;

package/dist/tempIcons/ActiveRadioIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ActiveRadioIcon: (props: any) => React.JSX.Element;

package/dist/tempIcons/DestructiveIcon.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const DestructiveIcon: (props: any) => React.JSX.Element;

package/dist/tempIcons/DragIndicatorIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DragIndicatorIcon: (props: any) => React.JSX.Element;

package/dist/tempIcons/InactiveCheckboxIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const InactiveCheckboxIcon: (props: any) => React.JSX.Element;

package/dist/tempIcons/InactiveRadioIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const InactiveRadioIcon: (props: any) => React.JSX.Element;

package/dist/tempIcons/PlusIcon.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const PlusIcon: (props: any) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",
@@ -113,7 +113,8 @@
     "ts-jest": "^29.1.1",
     "tsc-alias": "^1.8.8",
     "typescript": "^5.2.2",
-    "typescript-plugin-styled-components": "^3.0.0"
+    "typescript-plugin-styled-components": "^3.0.0",
+    "storybook-addon-deep-controls": "^0.9.2"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.5.4",