@westpac/ui 0.2.0 → 0.3.0

package/dist/components/pictogram/index.js

@@ -0,0 +1,94 @@
+export { AccessibilityPictogram } from './components/informative/accessibility-pictogram.js';
+export { AccountsPictogram } from './components/informative/accounts-pictogram.js';
+export { AeroplanePictogram } from './components/informative/aeroplane-pictogram.js';
+export { ArrowDownPictogram } from './components/informative/arrow-down-pictogram.js';
+export { ArrowLeftPictogram } from './components/informative/arrow-left-pictogram.js';
+export { ArrowRightPictogram } from './components/informative/arrow-right-pictogram.js';
+export { ArrowUpPictogram } from './components/informative/arrow-up-pictogram.js';
+export { ArrowsPassingPictogram } from './components/informative/arrows-passing-pictogram.js';
+export { ATMPictogram } from './components/informative/atm-pictogram.js';
+export { AustraliaPictogram } from './components/informative/australia-pictogram.js';
+export { BankCardLockedPictogram } from './components/informative/bank-card-locked-pictogram.js';
+export { BankCardPictogram } from './components/informative/bank-card-pictogram.js';
+export { BankPictogram } from './components/informative/bank-pictogram.js';
+export { BirthCertificatePictogram } from './components/informative/birth-certificate-pictogram.js';
+export { BuildingPictogram } from './components/informative/building-pictogram.js';
+export { BuoyPictogram } from './components/informative/buoy-pictogram.js';
+export { BusPictogram } from './components/informative/bus-pictogram.js';
+export { BusinessPersonPictogram } from './components/informative/business-person-pictogram.js';
+export { CalculatorPictogram } from './components/informative/calculator-pictogram.js';
+export { CalendarPictogram } from './components/informative/calendar-pictogram.js';
+export { CarPictogram } from './components/informative/car-pictogram.js';
+export { CashPictogram } from './components/informative/cash-pictogram.js';
+export { CelebrationPictogram } from './components/informative/celebration-pictogram.js';
+export { ChatPictogram } from './components/informative/chat-pictogram.js';
+export { ClockPictogram } from './components/informative/clock-pictogram.js';
+export { CoffeePictogram } from './components/informative/coffee-pictogram.js';
+export { CoinsPictogram } from './components/informative/coins-pictogram.js';
+export { CompassPictogram } from './components/informative/compass-pictogram.js';
+export { CustomerProfilePictogram } from './components/informative/customer-profile-pictogram.js';
+export { DesktopComputerPictogram } from './components/informative/desktop-computer-pictogram.js';
+export { DocumentAndPenPictogram } from './components/informative/document-and-pen-pictogram.js';
+export { DollarSignPictogram } from './components/informative/dollar-sign-pictogram.js';
+export { DriversLicencePictogram } from './components/informative/drivers-licence-pictogram.js';
+export { EducationPictogram } from './components/informative/education-pictogram.js';
+export { EftposPictogram } from './components/informative/eftpos-pictogram.js';
+export { EnvelopeEmailPictogram } from './components/informative/envelope-email-pictogram.js';
+export { EnvelopePrintedPictogram } from './components/informative/envelope-printed-pictogram.js';
+export { FaceHappyPictogram } from './components/informative/face-happy-pictogram.js';
+export { FaceUnhappyPictogram } from './components/informative/face-unhappy-pictogram.js';
+export { FaceUnsurePictogram } from './components/informative/face-unsure-pictogram.js';
+export { FingerMotionPictogram } from './components/informative/finger-motion-pictogram.js';
+export { FingerprintPictogram } from './components/informative/fingerprint-pictogram.js';
+export { FootballPictogram } from './components/informative/football-pictogram.js';
+export { ForkKnifePictogram } from './components/informative/fork-knife-pictogram.js';
+export { GenericDocumentPictogram } from './components/informative/generic-document-pictogram.js';
+export { GiftPictogram } from './components/informative/gift-pictogram.js';
+export { GlobeAustraliaPictogram } from './components/informative/globe-australia-pictogram.js';
+export { GlobePictogram } from './components/informative/globe-pictogram.js';
+export { GraphDecreasingPictogram } from './components/informative/graph-decreasing-pictogram.js';
+export { GraphIncreasingPictogram } from './components/informative/graph-increasing-pictogram.js';
+export { GymPictogram } from './components/informative/gym-pictogram.js';
+export { HeadsetPictogram } from './components/informative/headset-pictogram.js';
+export { HeartPictogram } from './components/informative/heart-pictogram.js';
+export { HousePictogram } from './components/informative/house-pictogram.js';
+export { LightBulbPictogram } from './components/informative/light-bulb-pictogram.js';
+export { LoopPictogram } from './components/informative/loop-pictogram.js';
+export { MedicareCardPictogram } from './components/informative/medicare-card-pictogram.js';
+export { MobileDevicePictogram } from './components/informative/mobile-device-pictogram.js';
+export { MoneyInPictogram } from './components/informative/money-in-pictogram.js';
+export { MoneyOutPictogram } from './components/informative/money-out-pictogram.js';
+export { MovieTicketsPictogram } from './components/informative/movie-tickets-pictogram.js';
+export { NestEggPictogram } from './components/informative/nest-egg-pictogram.js';
+export { NoodlesPictogram } from './components/informative/noodles-pictogram.js';
+export { Number1Pictogram } from './components/informative/number-1-pictogram.js';
+export { Number2Pictogram } from './components/informative/number-2-pictogram.js';
+export { Number3Pictogram } from './components/informative/number-3-pictogram.js';
+export { Number4Pictogram } from './components/informative/number-4-pictogram.js';
+export { Number5Pictogram } from './components/informative/number-5-pictogram.js';
+export { PadlockLockedPictogram } from './components/informative/padlock-locked-pictogram.js';
+export { PadlockUnlockedPictogram } from './components/informative/padlock-unlocked-pictogram.js';
+export { PassportPictogram } from './components/informative/passport-pictogram.js';
+export { PercentSignPictogram } from './components/informative/percent-sign-pictogram.js';
+export { PersonPictogram } from './components/informative/person-pictogram.js';
+export { PiggyBankPictogram } from './components/informative/piggy-bank-pictogram.js';
+export { PizzaPictogram } from './components/informative/pizza-pictogram.js';
+export { PlantPictogram } from './components/informative/plant-pictogram.js';
+export { SearchPictogram } from './components/informative/search-pictogram.js';
+export { SecurePictogram } from './components/informative/secure-pictogram.js';
+export { ShopPictogram } from './components/informative/shop-pictogram.js';
+export { ShoppingPictogram } from './components/informative/shopping-pictogram.js';
+export { StarPictogram } from './components/informative/star-pictogram.js';
+export { StopwatchPictogram } from './components/informative/stopwatch-pictogram.js';
+export { TaxDocumentPictogram } from './components/informative/tax-document-pictogram.js';
+export { TelephoneCallPictogram } from './components/informative/telephone-call-pictogram.js';
+export { ThumbsUpPictogram } from './components/informative/thumbs-up-pictogram.js';
+export { TickPictogram } from './components/informative/tick-pictogram.js';
+export { ToolsPictogram } from './components/informative/tools-pictogram.js';
+export { TractorPictogram } from './components/informative/tractor-pictogram.js';
+export { TruckPictogram } from './components/informative/truck-pictogram.js';
+export { UmbrellaPictogram } from './components/informative/umbrella-pictogram.js';
+export { UnsecurePictogram } from './components/informative/unsecure-pictogram.js';
+export { WalletPictogram } from './components/informative/wallet-pictogram.js';
+export { WearablesPictogram } from './components/informative/wearables-pictogram.js';
+export { WBCBankCardPictogram } from './components/decorative/wbc-bank-card-pictogram.js';

package/dist/components/pictogram/pictogram.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type PictogramProps } from './pictogram.types.js';
+export declare function Pictogram({ copyrightYear, xmlns, role, focusable, className, viewBoxWidth, viewBoxHeight, children, ...props }: PictogramProps): JSX.Element;

package/dist/components/pictogram/pictogram.component.js

@@ -0,0 +1,29 @@
+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 from 'react';
+import { styles } from './pictogram.styles.js';
+export function Pictogram({ copyrightYear ='' , xmlns ='http://www.w3.org/2000/svg' , role ='img' , focusable =false , className , viewBoxWidth , viewBoxHeight , children , ...props }) {
+    return React.createElement("span", {
+        className: styles({
+            className
+        })
+    }, React.createElement("svg", _extends({
+        xmlns: xmlns,
+        role: role,
+        viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
+        focusable: focusable,
+        className: "block"
+    }, props), copyrightYear && React.createElement("metadata", null, `Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`), children));
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Pictogram } from './pictogram.component.js';
+declare const meta: Meta<typeof Pictogram>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+export declare const DecorativeStory: () => JSX.Element;

package/dist/components/pictogram/pictogram.stories.js

@@ -0,0 +1,63 @@
+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 { clsx } from 'clsx';
+import * as AllPictograms from './index.js';
+import { WBCBankCardPictogram } from './index.js';
+const AllPictogramsExample = (props)=>{
+    const { mode  } = props;
+    const informativePictograms = Object.entries(AllPictograms).reduce((curr, [key, symbol])=>!key.startsWith('WBC') ? {
+            ...curr,
+            [key]: symbol
+        } : curr, {});
+    return React.createElement("div", {
+        className: clsx('grid grid-cols-5 gap-5 p-5', mode === 'light' && 'bg-hero text-white')
+    }, Object.entries(informativePictograms).map(([key, Pictogram])=>React.createElement("div", {
+            key: key,
+            className: "flex flex-col items-center justify-end"
+        }, React.createElement(Pictogram, _extends({}, props)), React.createElement("p", {
+            className: "mt-2"
+        }, key))));
+};
+const meta = {
+    title: 'Example/Pictogram',
+    component: AllPictogramsExample,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'centered'
+    },
+    argTypes: {
+        mode: {
+            description: 'mode',
+            type: {
+                name: 'enum',
+                value: [
+                    'duo',
+                    'dark',
+                    'light'
+                ]
+            }
+        }
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {}
+};
+export const DecorativeStory = ()=>React.createElement(WBCBankCardPictogram, null);

package/dist/components/pictogram/pictogram.styles.d.ts

@@ -0,0 +1,28 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "inline-block shrink-0 leading-none", {
+    responsiveVariants: string[];
+}, {}, undefined>;
+export declare const fill: import("tailwind-variants").TVReturnType<{
+    mode: {
+        dark: string;
+        light: string;
+        duo: string;
+    };
+    highlight: {
+        true: string;
+    };
+    outline: {
+        true: string;
+    };
+}, undefined, "", TVConfig<V, EV>, {
+    mode: {
+        dark: string;
+        light: string;
+        duo: string;
+    };
+    highlight: {
+        true: string;
+    };
+    outline: {
+        true: string;
+    };
+}, undefined>;

package/dist/components/pictogram/pictogram.styles.js

@@ -0,0 +1,41 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'inline-block shrink-0 leading-none',
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});
+export const fill = tv({
+    base: '',
+    variants: {
+        mode: {
+            dark: 'fill-pictogram-dark',
+            light: 'fill-white',
+            duo: ''
+        },
+        highlight: {
+            true: ''
+        },
+        outline: {
+            true: ''
+        }
+    },
+    compoundVariants: [
+        {
+            mode: 'duo',
+            highlight: true,
+            className: 'fill-pictogram-duo-highlight'
+        },
+        {
+            mode: 'duo',
+            outline: true,
+            className: 'fill-pictogram-duo-outline'
+        }
+    ]
+});

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

@@ -0,0 +1,25 @@
+import { type SVGAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './pictogram.styles.js';
+export type PictogramProps = SVGAttributes<SVGElement> & {
+    /**
+     * SVG copyright year
+     */
+    copyrightYear?: string;
+    /**
+     * Pictogram mode
+     */
+    mode?: 'dark' | 'light' | 'duo';
+    /**
+     * Tag to render
+     */
+    tag?: keyof JSX.IntrinsicElements;
+    /**
+     * SVG viewBox height
+     */
+    viewBoxHeight?: number;
+    /**
+     * SVG viewBox width
+     */
+    viewBoxWidth?: number;
+} & VariantProps<typeof styles>;

package/dist/components/pictogram/pictogram.types.js

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

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './progress-bar.component.js';
+export { type ProgressBarProps } from './progress-bar.types.js';

package/dist/components/progress-bar/index.js

@@ -0,0 +1 @@
+export { ProgressBar } from './progress-bar.component.js';

package/dist/components/progress-bar/progress-bar.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type ProgressBarProps } from './progress-bar.types.js';
+export declare function ProgressBar({ className, look, value, noLabel, ...props }: ProgressBarProps): JSX.Element;

package/dist/components/progress-bar/progress-bar.component.js

@@ -0,0 +1,43 @@
+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 from 'react';
+import { useProgressBar } from 'react-aria';
+import { styles as progressBarStyles } from './progress-bar.styles.js';
+export function ProgressBar({ className , look ='default' , value =0 , noLabel =false , ...props }) {
+    const roundedValue = Math.round(value);
+    const barValue = `${roundedValue}%`;
+    const { progressBarProps , labelProps  } = useProgressBar({
+        value: roundedValue,
+        label: barValue,
+        ...props
+    });
+    const styles = progressBarStyles({
+        look
+    });
+    return React.createElement("div", _extends({}, progressBarProps, {
+        className: styles.base({
+            className
+        })
+    }), React.createElement("div", {
+        style: {
+            width: barValue
+        },
+        className: styles.innerBar()
+    }, React.createElement("span", _extends({
+        className: styles.label({
+            class: `${noLabel || look === 'skinny' ? 'hidden' : ''}`
+        })
+    }, labelProps), barValue)));
+}

package/dist/components/progress-bar/progress-bar.stories.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { ProgressBar } from './progress-bar.component.js';
+declare const meta: Meta<typeof ProgressBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Skinny example
+ */
+export declare const ProgressBarSkinny: Story;
+/**
+ * > No label example
+ */
+export declare const ProgressBarNoLabel: Story;
+/**
+ * Example of Progress Bar controlled by buttons
+ */
+export declare const ProgressBarControlled: () => JSX.Element;

package/dist/components/progress-bar/progress-bar.stories.js

@@ -0,0 +1,75 @@
+import { useCallback, useState } from 'react';
+import { Button } from '../button/index.js';
+import { ProgressBar } from './progress-bar.component.js';
+const meta = {
+    title: 'Example/ProgressBar',
+    component: ProgressBar,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        value: 50,
+        look: 'default'
+    }
+};
+export const ProgressBarSkinny = {
+    args: {
+        value: 50,
+        look: 'skinny'
+    }
+};
+export const ProgressBarNoLabel = {
+    args: {
+        value: 50,
+        look: 'default',
+        noLabel: true
+    }
+};
+export const ProgressBarControlled = ()=>{
+    const [barValue, setBarValue] = useState(0);
+    const handleProgress = useCallback((calc)=>{
+        const progress = barValue + calc;
+        if (progress > 100) return setBarValue(100);
+        if (progress < 0) return setBarValue(0);
+        return setBarValue(progress);
+    }, [
+        barValue
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement("h2", {
+        className: "typography-body-9 mb-1 font-bold"
+    }, "Default"), React.createElement(ProgressBar, {
+        value: barValue,
+        className: "mb-2"
+    }), React.createElement("h2", {
+        className: "typography-body-9 mb-1 font-bold"
+    }, "Skinny"), React.createElement(ProgressBar, {
+        look: "skinny",
+        value: barValue,
+        className: "mb-2"
+    }), React.createElement("div", {
+        className: "flex space-x-2"
+    }, React.createElement(Button, {
+        soft: true,
+        onClick: ()=>handleProgress(-1)
+    }, "-1%"), React.createElement(Button, {
+        soft: true,
+        onClick: ()=>handleProgress(-10)
+    }, "-10%"), React.createElement(Button, {
+        soft: true,
+        onClick: ()=>handleProgress(+1)
+    }, "+1%"), React.createElement(Button, {
+        soft: true,
+        onClick: ()=>handleProgress(+10)
+    }, "+10%")));
+};

package/dist/components/progress-bar/progress-bar.styles.d.ts

@@ -0,0 +1,33 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    look: {
+        default: {
+            base: string;
+            innerBar: string;
+        };
+        skinny: {
+            base: string;
+            innerBar: string;
+        };
+    };
+}, {
+    base: string;
+    innerBar: string;
+    label: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    look: {
+        default: {
+            base: string;
+            innerBar: string;
+        };
+        skinny: {
+            base: string;
+            innerBar: string;
+        };
+    };
+}, {
+    base: string;
+    innerBar: string;
+    label: string;
+}>;

package/dist/components/progress-bar/progress-bar.styles.js

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'border-border box-border w-full overflow-hidden border bg-white p-[0.0625rem]',
+        innerBar: 'bg-hero box-border h-full text-right leading-tight transition-[width] duration-[.6s]',
+        label: 'typography-body-10 mx-[0.75rem] my-0 block font-bold text-white'
+    },
+    variants: {
+        look: {
+            default: {
+                base: 'h-[1.5rem] rounded-[1.5rem]',
+                innerBar: ' rounded-[1.5rem]'
+            },
+            skinny: {
+                base: 'h-[0.625rem] rounded-[0.625rem]',
+                innerBar: 'rounded-[0.625rem]'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/progress-bar/progress-bar.types.d.ts

@@ -0,0 +1,19 @@
+import { AriaProgressBarProps } from 'react-aria';
+export type ProgressBarProps = {
+    /**
+     * Classname for overriding base style
+     */
+    className?: string;
+    /**
+     * look of bar
+     */
+    look?: 'default' | 'skinny';
+    /**
+     * Whether or not label shows on default bar
+     */
+    noLabel?: boolean;
+    /**
+     * The progress bar value as a percentage. Decimal numbers are rounded.
+     */
+    value?: number;
+} & Pick<AriaProgressBarProps, 'aria-label' | 'aria-describedby' | 'aria-details' | 'aria-labelledby' | 'id'>;

package/dist/components/progress-bar/progress-bar.types.js

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

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

@@ -11,7 +11,7 @@ export const styles = tv({
         isDisabled: {
             true: {
                 labelText: 'text-muted',
-                selector: 'bg-border-20 border-border before:bg-border'
+                selector: 'border-border bg-border-20 before:bg-border'
             },
             false: {
                 base: 'hover:cursor-pointer'

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

@@ -0,0 +1,2 @@
+export { Switch } from './switch.component.js';
+export { type SwitchProps } from './switch.types.js';

package/dist/components/switch/index.js

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

package/dist/components/switch/switch.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type SwitchProps } from './switch.types.js';
+export declare function Switch({ className, label, size, block, isDisabled, ...props }: SwitchProps): JSX.Element;

package/dist/components/switch/switch.component.js

@@ -0,0 +1,49 @@
+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, { useId, useRef } from 'react';
+import { VisuallyHidden, useCheckbox, useFocusRing } from 'react-aria';
+import { useToggleState } from 'react-stately';
+import { styles as switchStyles } from './switch.styles.js';
+export function Switch({ className , label , size ='medium' , block =false , isDisabled , ...props }) {
+    const state = useToggleState(props);
+    const labelId = useId();
+    const ref = useRef(null);
+    const { inputProps  } = useCheckbox({
+        isDisabled,
+        'aria-labelledby': labelId,
+        ...props
+    }, state, ref);
+    const { isSelected  } = state;
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const styles = switchStyles({
+        block,
+        isFocusVisible,
+        isSelected,
+        isDisabled,
+        size
+    });
+    return React.createElement("label", {
+        className: styles.base({
+            className
+        })
+    }, React.createElement("span", {
+        className: styles.label(),
+        id: labelId
+    }, label), React.createElement(VisuallyHidden, null, React.createElement("input", _extends({}, inputProps, focusProps, {
+        ref: ref
+    }))), React.createElement("div", {
+        className: styles.switchDiv()
+    }));
+}

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

@@ -0,0 +1,30 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Switch } from './switch.component.js';
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Selected switch example
+ */
+export declare const SelectedSwitch: Story;
+/**
+ * > Switch size example
+ */
+export declare const SwitchSizes: () => JSX.Element;
+/**
+ * > Disabled switch example
+ */
+export declare const DisabledSwitch: Story;
+/**
+ * > Block switch example
+ */
+export declare const BlockSwitch: () => JSX.Element;
+/**
+ * > Responsive switch example
+ */
+export declare const ResponsiveSizeSwitch: Story;