@westpac/ui 0.1.0 → 0.2.0

package/dist/components/checkbox-group/checkbox-group.stories.js

@@ -0,0 +1,141 @@
+import { CheckboxGroup } from './checkbox-group.component.js';
+const meta = {
+    title: 'Example/CheckboxGroup',
+    component: CheckboxGroup,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "flex p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    },
+    args: {
+        label: React.createElement("h2", null, "Test")
+    },
+    argTypes: {
+        orientation: {
+            description: "Controls orientation of `Checkbox` components, can't be applied directly on `Checkbox` \n\n `'horizontal'` `'vertical'`",
+            type: {
+                name: 'enum',
+                value: [
+                    'horizontal',
+                    'vertical'
+                ]
+            }
+        },
+        isDisabled: {
+            description: 'Controls whether all checkbox items are disabled or not',
+            type: {
+                name: 'boolean'
+            }
+        },
+        label: {
+            description: 'Not part of original GEL component but added for compatability with React Aria and accessibility. Styling can be done by passing tag with className as value.'
+        }
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Option 3")
+        ]
+    }
+};
+export const CheckboxGroupWithDefaultValue = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        defaultValue: [
+            'Option 1'
+        ]
+    }
+};
+export const CheckboxGroupHorizontal = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        orientation: 'horizontal'
+    }
+};
+export const CheckboxGroupDisabled = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        isDisabled: true,
+        defaultValue: [
+            'Option 1'
+        ]
+    }
+};
+export const CheckboxGroupLarge = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        size: 'large'
+    }
+};
+export const CheckboxGroupWithHiddenItems = {
+    args: {
+        children: [
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 1"
+            }, "Option 1"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 2"
+            }, "Option 2"),
+            React.createElement(CheckboxGroup.Checkbox, {
+                value: "Option 3"
+            }, "Option 3")
+        ],
+        showAmount: 1
+    }
+};

package/dist/components/checkbox-group/checkbox-group.styles.d.ts

@@ -0,0 +1,41 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            itemWrapper: string;
+        };
+        vertical: {
+            itemWrapper: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            revealButton: string;
+        };
+    };
+}, {
+    base: string;
+    itemWrapper: string;
+    revealButton: string;
+    buttonText: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    orientation: {
+        horizontal: {
+            itemWrapper: string;
+        };
+        vertical: {
+            itemWrapper: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            revealButton: string;
+        };
+    };
+}, {
+    base: string;
+    itemWrapper: string;
+    revealButton: string;
+    buttonText: string;
+}>;

package/dist/components/checkbox-group/checkbox-group.styles.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '',
+        itemWrapper: '',
+        revealButton: 'gap-1 px-0 text-text no-underline hover:underline',
+        buttonText: 'typography-body-10'
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                itemWrapper: 'flex flex-wrap'
+            },
+            vertical: {
+                itemWrapper: 'flex flex-col'
+            }
+        },
+        isFocusVisible: {
+            true: {
+                revealButton: 'focus-outline'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/checkbox-group/checkbox-group.types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { AriaCheckboxGroupProps } from 'react-aria';
+import { CheckboxGroupState } from 'react-stately';
+export type CheckboxGroupProps = {
+    /**
+     * The `CheckboxItem` components to render
+     */
+    children: ReactNode[];
+    /**
+     * String to override base style
+     */
+    className?: string;
+    /**
+     * Orientation of checkbox items
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Amount of CheckboxItems to display, remainder will be hidden behind reveal button
+     */
+    showAmount?: number;
+    /**
+     * Controls size of `CheckboxItem` components, can't be applied directly to `CheckboxItem`
+     */
+    size?: 'medium' | 'large';
+} & Omit<AriaCheckboxGroupProps, 'errorMessage' | 'description'>;
+export type CheckboxGroupContextState = {
+    /**
+     * Controls orientation of `CheckboxItem` components, can't be applied directly on `CheckboxItem`
+     */
+    orientation: 'vertical' | 'horizontal';
+    /**
+     * Controls size of `CheckboxItem` components, can't be applied directly on `CheckboxItem`
+     */
+    size: 'medium' | 'large';
+} & CheckboxGroupState;

package/dist/components/checkbox-group/checkbox-group.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/checkbox-group/components/checkbox/checkbox.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    hint?: React.ReactNode;
+} & Omit<import("react-aria").AriaCheckboxGroupItemProps, "isIndeterminate"> & React.RefAttributes<unknown>>;

package/dist/components/checkbox-group/components/checkbox/checkbox.component.js

@@ -0,0 +1,64 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import { Icon } from '../../../icon/icon.component.js';
+import { CheckboxGroupContext } from '../../checkbox-group.component.js';
+import { styles as checkboxItemStyles } from './checkbox.styles.js';
+function CheckIcon({ copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        copyrightYear: copyrightYear
+    }, props), React.createElement("path", {
+        d: "M16.285 6.0003L10.769 13.8053L6.936 11.0173L5 13.6463L11.526 18.5263L19 8.0053L16.285 6.0003Z",
+        fill: "currentColor"
+    }));
+}
+function BaseCheckbox({ className , hint , children , value , ...props }, ref) {
+    const state = useContext(CheckboxGroupContext);
+    const { size , orientation  } = state;
+    const localRef = useRef(null);
+    const { inputProps , isDisabled , isSelected  } = useCheckboxGroupItem({
+        ...props,
+        value,
+        children
+    }, state, localRef);
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const styles = checkboxItemStyles({
+        isDisabled,
+        size,
+        orientation,
+        isFocusVisible
+    });
+    return React.createElement("label", {
+        className: styles.base({
+            className
+        }),
+        ref: ref
+    }, React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+        ref: localRef
+    }))), React.createElement("div", {
+        className: styles.checkbox()
+    }, isSelected && React.createElement(CheckIcon, {
+        className: styles.checkIcon(),
+        color: isDisabled ? 'border' : 'hero'
+    })), React.createElement("div", {
+        className: styles.textWrapper()
+    }, React.createElement("span", {
+        className: styles.labelText()
+    }, children), hint && React.createElement("span", {
+        className: styles.hintText()
+    }, hint)));
+}
+export const Checkbox = forwardRef(BaseCheckbox);

package/dist/components/checkbox-group/components/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Checkbox } from './checkbox.component.js';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Base Checkbox Item, unchecked as that is handled by Checkbox
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Checkbox Item with hint example
+ */
+export declare const CheckboxItemWithHint: Story;
+/**
+ * > Disabled Checkbox Item example
+ */
+export declare const CheckboxItemDisabled: Story;

package/dist/components/checkbox-group/components/checkbox/checkbox.stories.js

@@ -0,0 +1,45 @@
+import { Checkbox } from './checkbox.component.js';
+const meta = {
+    title: 'Example/CheckboxGroup/Checkbox',
+    component: Checkbox,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "flex justify-center p-3"
+            }, React.createElement(Story, null), ' ')
+    ],
+    parameters: {
+        layout: 'center'
+    },
+    argTypes: {
+        isDisabled: {
+            description: 'Controls whether individual checkbox items are disabled or not',
+            type: {
+                name: 'boolean'
+            }
+        }
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: 'Option 1',
+        value: 'Option 1'
+    }
+};
+export const CheckboxItemWithHint = {
+    args: {
+        children: 'Option 1',
+        value: 'Option 1',
+        hint: 'Test hint'
+    }
+};
+export const CheckboxItemDisabled = {
+    args: {
+        children: 'Option 1',
+        value: 'Option 1',
+        isDisabled: true
+    }
+};

package/dist/components/checkbox-group/components/checkbox/checkbox.styles.d.ts

@@ -0,0 +1,87 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    isDisabled: {
+        true: {
+            labelText: string;
+            checkbox: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            checkbox: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    size: {
+        large: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+        medium: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+    };
+}, {
+    base: string;
+    checkIcon: string;
+    textWrapper: string;
+    labelText: string;
+    hintText: string;
+    checkbox: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    isDisabled: {
+        true: {
+            labelText: string;
+            checkbox: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            checkbox: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+    size: {
+        large: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+        medium: {
+            checkIcon: string;
+            base: string;
+            checkbox: string;
+        };
+    };
+}, {
+    base: string;
+    checkIcon: string;
+    textWrapper: string;
+    labelText: string;
+    hintText: string;
+    checkbox: string;
+}>;

package/dist/components/checkbox-group/components/checkbox/checkbox.styles.js

@@ -0,0 +1,55 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'flex',
+        checkIcon: 'overflow-visible',
+        textWrapper: 'flex flex-col justify-center',
+        labelText: 'typography-body-10 py-[2px] pl-1',
+        hintText: 'typography-body-10 text-muted pl-1',
+        checkbox: 'flex h-4 w-4 items-center justify-center rounded border border-hero'
+    },
+    variants: {
+        isDisabled: {
+            true: {
+                labelText: 'text-muted',
+                checkbox: 'bg-border-20 border-border'
+            },
+            false: {
+                base: 'hover:cursor-pointer'
+            }
+        },
+        isFocusVisible: {
+            true: {
+                checkbox: 'rounded focus-outline'
+            }
+        },
+        orientation: {
+            horizontal: {
+                base: 'mr-3'
+            },
+            vertical: {
+                base: ''
+            }
+        },
+        size: {
+            large: {
+                checkIcon: 'h-5 w-5',
+                base: 'mb-2',
+                checkbox: 'h-5 w-5'
+            },
+            medium: {
+                checkIcon: 'h-4 w-4',
+                base: 'mb-1',
+                checkbox: 'h-4 w-4'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/checkbox-group/components/checkbox/checkbox.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { AriaCheckboxGroupItemProps } from 'react-aria';
+export type CheckboxProps = {
+    /**
+     * `string` for overriding base style
+     */
+    className?: string;
+    /**
+     * Renders hint under option, most likely a `string` but could be something else
+     */
+    hint?: ReactNode;
+} & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

package/dist/components/checkbox-group/components/checkbox/checkbox.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/checkbox-group/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './checkbox.component.js';
+export { type CheckboxProps } from './checkbox.types.js';

package/dist/components/checkbox-group/components/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox.component.js';

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxGroup } from './checkbox-group.component.js';
+export { type CheckboxGroupProps } from './checkbox-group.types.js';

package/dist/components/checkbox-group/index.js

@@ -0,0 +1 @@
+export { CheckboxGroup } from './checkbox-group.component.js';

package/dist/components/icon/components/accessibility-icon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
 import { type IconProps } from '../icon.types.js';
 export declare function AccessibilityIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/accessibility-icon.js

@@ -14,13 +14,15 @@ function _extends() {
 }
 import React from 'react';
 import { Icon } from '../icon.component.js';
-export function AccessibilityIcon({ 'aria-label': ariaLabel = 'Accessibility' , copyrightYear ='2020' , ...props }) {
+export function AccessibilityIcon({ 'aria-label': ariaLabel = 'Accessibility' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear
     }, props), React.createElement("path", {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "M12,0 C13.375,0 14.5,1.125 14.5,2.5 C14.5,3.875 13.375,5 12,5 C10.625,5 9.5,3.875 9.5,2.5 C9.5,1.125 10.625,0 12,0 Z M22,8 L16,8 L16,24 L13,24 L13,16 L11,16 L11,24 L8,24 L8,8 L2,8 L2,6 L22,6 L22,8 Z"
+        d: "M12 5C13.375 5 14.5 3.875 14.5 2.5C14.5 1.125 13.375 0 12 0C10.625 0 9.5 1.125 9.5 2.5C9.5 3.875 10.625 5 12 5Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        d: "M12 6.02203C15.4589 6.02203 19.1989 5.65536 22.3889 4.7998L23 7.24425C20.8297 7.82767 18.3475 8.22171 16 8.43702V24H13V16H11V24H8V8.43702C5.65253 8.22171 3.17031 7.82767 1 7.24425L1.61111 4.7998C4.80111 5.65536 8.54111 6.02203 12 6.02203Z",
+        fill: "currentColor"
     }));
 }

package/dist/components/icon/components/account-icon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
 import { type IconProps } from '../icon.types.js';
-export declare function AccountIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;
+export declare function AccountIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;

package/dist/components/icon/components/account-icon.js

@@ -12,15 +12,30 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function AccountIcon({ 'aria-label': ariaLabel = 'Account' , copyrightYear ='2020' , ...props }) {
+export function AccountIcon({ look ='filled' , 'aria-label': ariaLabel = 'Account' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear
-    }, props), React.createElement("path", {
-        fill: "currentColor",
+    }, props), look === 'filled' ? React.createElement(Fragment, null, React.createElement("path", {
+        d: "M20.5 7C20.5 8.933 16.6944 10.5 12 10.5C7.30558 10.5 3.5 8.933 3.5 7C3.5 5.067 7.30558 3.5 12 3.5C16.6944 3.5 20.5 5.067 20.5 7Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
         fillRule: "evenodd",
-        d: "M24,9.85324138 C22.5,11.5084138 17.373,13.2413793 12,13.2413793 C6.62625,13.2413793 1.5,11.5084138 0,9.85324138 L0,13.1635862 C0,14.8187586 5.25,17.3793103 12,17.3793103 C18.75,17.3793103 24,14.8187586 24,13.1635862 L24,9.85324138 Z M24,16.473931 C22.5,18.1291034 17.373,19.862069 12,19.862069 C6.62625,19.862069 1.5,18.1291034 0,16.473931 L0,19.7842759 C0,21.4394483 5.25,24 12,24 C18.75,24 24,21.4394483 24,19.7842759 L24,16.473931 Z M12,0 C18.62775,0 24,2.48275862 24,4.13793103 L24,6.62068966 C24,8.27586207 18.62775,10.7586207 12,10.7586207 C5.37225,10.7586207 0,8.27586207 0,6.62068966 L0,4.13793103 C0,2.48275862 5.37225,0 12,0 L12,0 Z"
-    }));
+        clipRule: "evenodd",
+        d: "M24 18.5V5.5C24 2.46243 18.6274 0 12 0C5.37258 0 0 2.46243 0 5.5V18.5C0 21.5376 5.37258 24 12 24C18.6274 24 24 21.5376 24 18.5ZM12 12.5C14.5427 12.5 16.938 12.0794 18.7719 11.3242C19.6842 10.9486 20.5541 10.4507 21.2271 9.79542C21.9065 9.13403 22.5 8.18867 22.5 7C22.5 5.81133 21.9065 4.86598 21.2271 4.20458C20.5541 3.54935 19.6842 3.0514 18.7719 2.67577C16.938 1.92063 14.5427 1.5 12 1.5C9.45731 1.5 7.06201 1.92063 5.22809 2.67577C4.31585 3.0514 3.44592 3.54935 2.77286 4.20458C2.09348 4.86598 1.5 5.81133 1.5 7C1.5 8.18867 2.09348 9.13403 2.77286 9.79542C3.44592 10.4507 4.31585 10.9486 5.22809 11.3242C7.06201 12.0794 9.45731 12.5 12 12.5ZM2.77285 14.5454C2.19165 13.9796 1.67333 13.206 1.53564 12.25H3.58607C4.17528 13.9461 7.71784 15.25 12 15.25C16.2821 15.25 19.8247 13.9461 20.4139 12.25H22.4643C22.3267 13.206 21.8083 13.9796 21.2271 14.5454C20.5541 15.2007 19.6841 15.6986 18.7719 16.0742C16.938 16.8294 14.5427 17.25 12 17.25C9.4573 17.25 7.062 16.8294 5.22808 16.0742C4.31583 15.6986 3.44591 15.2007 2.77285 14.5454ZM1.53564 17C1.67333 17.956 2.19165 18.7296 2.77285 19.2954C3.44591 19.9507 4.31583 20.4486 5.22808 20.8242C7.062 21.5794 9.4573 22 12 22C14.5427 22 16.938 21.5794 18.7719 20.8242C19.6841 20.4486 20.5541 19.9507 21.2271 19.2954C21.8083 18.7296 22.3267 17.956 22.4643 17H20.4139C19.8247 18.6961 16.2821 20 12 20C7.71784 20 4.17528 18.6961 3.58607 17H1.53564Z",
+        fill: "currentColor"
+    })) : React.createElement(Fragment, null, React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M18.7719 11.3242C16.938 12.0794 14.5427 12.5 12 12.5C9.45731 12.5 7.06201 12.0794 5.22809 11.3242C4.31585 10.9486 3.44592 10.4507 2.77286 9.79542C2.09348 9.13403 1.5 8.18867 1.5 7C1.5 5.81133 2.09348 4.86598 2.77286 4.20458C3.44592 3.54935 4.31585 3.0514 5.22809 2.67577C7.06201 1.92063 9.45731 1.5 12 1.5C14.5427 1.5 16.938 1.92063 18.7719 2.67577C19.6842 3.0514 20.5541 3.54935 21.2271 4.20458C21.9065 4.86598 22.5 5.81133 22.5 7C22.5 8.18867 21.9065 9.13403 21.2271 9.79542C20.5541 10.4507 19.6842 10.9486 18.7719 11.3242ZM12 10.5C16.6944 10.5 20.5 8.933 20.5 7C20.5 5.067 16.6944 3.5 12 3.5C7.30558 3.5 3.5 5.067 3.5 7C3.5 8.933 7.30558 10.5 12 10.5Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        d: "M1.53564 12.25C1.67333 13.206 2.19165 13.9796 2.77285 14.5454C3.44591 15.2007 4.31583 15.6986 5.22808 16.0742C7.062 16.8294 9.4573 17.25 12 17.25C14.5427 17.25 16.938 16.8294 18.7719 16.0742C19.6841 15.6986 20.5541 15.2007 21.2271 14.5454C21.8083 13.9796 22.3267 13.206 22.4643 12.25H20.4139C19.8247 13.9461 16.2821 15.25 12 15.25C7.71784 15.25 4.17528 13.9461 3.58607 12.25H1.53564Z",
+        fill: "currentColor"
+    }), React.createElement("path", {
+        d: "M2.77285 19.2954C2.19165 18.7296 1.67333 17.956 1.53564 17H3.58607C4.17528 18.6961 7.71784 20 12 20C16.2821 20 19.8247 18.6961 20.4139 17H22.4643C22.3267 17.956 21.8083 18.7296 21.2271 19.2954C20.5541 19.9507 19.6841 20.4486 18.7719 20.8242C16.938 21.5794 14.5427 22 12 22C9.4573 22 7.062 21.5794 5.22808 20.8242C4.31583 20.4486 3.44591 19.9507 2.77285 19.2954Z",
+        fill: "currentColor"
+    })));
 }

package/dist/components/icon/components/add-circle-icon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
 import { type IconProps } from '../icon.types.js';
-export declare function AddCircleIcon({ 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;
+export declare function AddCircleIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): JSX.Element;