@beydesign/storybook 0.2.2 → 0.2.5

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './stories/Buttons';
 export * from './stories/Typography';
 export * from './stories/Credits';
 export * from './stories/Navigation';
+export * from './stories/Drawer';
 export * from './stories/Typography';
 export * from './stories/UI';
 export * from './stories/StripeProduct';

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './stories/Buttons';
 export * from './stories/Typography';
 export * from './stories/Credits';
 export * from './stories/Navigation';
+export * from './stories/Drawer';
 export * from './stories/Typography';
 export * from './stories/UI';
 export * from './stories/StripeProduct';

package/dist/stories/Buttons/MainButton.js

@@ -16,7 +16,7 @@ const StyledButton = styled.button `
   background: ${(props) => {
     if (props.$destructive) {
         if (props.$state === ButtonState.Disabled || props.$disabled)
-            return 'var(--color-background-bg-error-solid)';
+            return 'var(--color-background-bg-element)';
         return 'var(--color-background-bg-error)';
     }
     switch (props.$hierarchy) {
@@ -27,27 +27,31 @@ const StyledButton = styled.button `
         case ButtonHierarchy.PrimaryLemon:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-background-bg-element)';
-            return 'var(--primitives-desktop-primary-brand-lemon-400)';
+            return 'var(--color-background-bg-brand-secondary)';
         case ButtonHierarchy.Secondary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-background-bg-component-disabled)';
-            return 'var(--color-background-bg-component)';
+                return 'var(--color-background-bg-button-disabled)';
+            return 'transparent';
         case ButtonHierarchy.SecondaryColor:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-background-bg-element)';
-            return 'var(--color-background-bg-component)';
+            return 'var(--color-background-bg-secondary-action)';
         case ButtonHierarchy.SecondaryTransparent:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-background-bg-overlay-1)';
-            return 'var(--primitives-desktop-primary-transparent-violet-50)';
+            return 'var(--color-background-bg-button-transparent)';
         case ButtonHierarchy.Tertiary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--primitives-desktop-primary-white-0)';
-            return 'var(--primitives-desktop-primary-white-0)';
+                return 'transparent';
+            return 'transparent';
         case ButtonHierarchy.TertiaryColor:
             if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--primitives-desktop-primary-white-0)';
-            return 'var(--primitives-desktop-primary-white-0)';
+                return 'transparent';
+            return 'transparent';
+        case ButtonHierarchy.WhiteText:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-background-bg-button-disabled)';
+            return 'var(--color-background-bg-overlay-1)';
         default:
             return 'var(--color-background-bg-brand-primary)';
     }
@@ -55,26 +59,26 @@ const StyledButton = styled.button `
   color: ${(props) => {
     if (props.$destructive) {
         if (props.$state === ButtonState.Disabled || props.$disabled)
-            return 'var(--color-text-text-white)';
+            return 'var(--color-text-text-disabled)';
         return 'var(--color-text-text-white)';
     }
     switch (props.$hierarchy) {
         case ButtonHierarchy.Primary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-white)';
-            return 'var(--color-text-text-white)';
+                return 'var(--color-text-text-inactive)';
+            return 'var(--color-text-text-on-accent-color)';
         case ButtonHierarchy.PrimaryLemon:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-text-text-subtle)';
             return 'var(--color-text-text-title)';
         case ButtonHierarchy.Secondary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-disabled)';
+                return 'var(--color-text-text-inactive)';
             return 'var(--color-text-text-title)';
         case ButtonHierarchy.SecondaryColor:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-text-text-disabled)';
-            return 'var(--color-text-text-accent)';
+            return 'var(--color-text-text-clicable)';
         case ButtonHierarchy.SecondaryTransparent:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-text-text-white)';
@@ -87,6 +91,10 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-text-text-disabled)';
             return 'var(--color-text-text-accent)';
+        case ButtonHierarchy.WhiteText:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--color-text-text-inactive)';
+            return 'var(--color-text-text-white)';
         default:
             return 'var(--color-text-text-white)';
     }
@@ -95,38 +103,40 @@ const StyledButton = styled.button `
     ${(props) => {
     if (props.$destructive) {
         if (props.$state === ButtonState.Disabled || props.$disabled)
-            return 'var(--color-border-border-disabled)';
+            return 'var(--color-background-bg-element)';
         return 'var(--color-background-bg-error)';
     }
     switch (props.$hierarchy) {
         case ButtonHierarchy.Primary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-border-border-component)';
+                return 'var(--color-border-border-disabled)';
             return 'var(--color-background-bg-brand-primary)';
         case ButtonHierarchy.PrimaryLemon:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-border-border-component)';
-            return 'var(--primitives-desktop-primary-brand-lemon-400)';
+            return 'var(--color-background-bg-brand-secondary)';
         case ButtonHierarchy.Secondary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-border-border-component)';
+                return 'var(--color-border-border-disabled)';
             return 'var(--color-border-border-component)';
         case ButtonHierarchy.SecondaryColor:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-border-border-component)';
-            return 'var(--color-border-border-brand)';
+            return 'var(--color-border-border-secondary-action)';
         case ButtonHierarchy.SecondaryTransparent:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-border-border-disabled)';
-            return 'var(--color-border-border-white)';
+            return 'transparent';
         case ButtonHierarchy.Tertiary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--primitives-desktop-primary-white-0)';
-            return 'var(--primitives-desktop-primary-white-0)';
+                return 'transparent';
+            return 'transparent';
         case ButtonHierarchy.TertiaryColor:
             if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--primitives-desktop-primary-white-0)';
-            return 'var(--primitives-desktop-primary-white-0)';
+                return 'transparent';
+            return 'transparent';
+        case ButtonHierarchy.WhiteText:
+            return 'transparent';
         default:
             return 'var(--color-background-bg-brand-primary)';
     }
@@ -135,6 +145,13 @@ const StyledButton = styled.button `
   align-items: center;
   justify-content: center;
   min-width: unset;
+  box-shadow: ${(props) => props.$hierarchy === ButtonHierarchy.WhiteText
+    ? 'none'
+    : `var(--global-shadows-shadow-xs-offset-x)
+        var(--global-shadows-shadow-xs-offset-y)
+        var(--global-shadows-shadow-xs-blur)
+        var(--global-shadows-shadow-xs-spread)
+        var(--global-shadows-shadow-xs-color)`};
   cursor: ${(props) => props.$state === ButtonState.Disabled || props.$disabled
     ? 'not-allowed'
     : 'pointer'};
@@ -154,17 +171,19 @@ const StyledButton = styled.button `
         case ButtonHierarchy.Primary:
             return 'var(--color-background-bg-brand-primary-hover)';
         case ButtonHierarchy.PrimaryLemon:
-            return 'var(--primitives-desktop-primary-brand-lemon-500)';
+            return 'var(--color-background-bg-brand-secondary-hover)';
         case ButtonHierarchy.Secondary:
-            return 'var(--color-background-bg-card-highlight-hover)';
+            return 'var(--color-background-bg-component)';
         case ButtonHierarchy.SecondaryColor:
-            return 'var(--color-background-bg-card-highlight-hover)';
+            return 'var(--color-background-bg-secondary-action-hover)';
         case ButtonHierarchy.SecondaryTransparent:
-            return 'var(--color-background-bg-brand-primary-hover)';
+            return 'var(--color-background-bg-button-transparent-hover)';
         case ButtonHierarchy.Tertiary:
-            return 'var(--primitives-desktop-primary-white-40)';
+            return 'var(--color-background-bg-component-hover)';
         case ButtonHierarchy.TertiaryColor:
             return 'var(--color-background-bg-card-highlight-hover)';
+        case ButtonHierarchy.WhiteText:
+            return 'var(--color-background-bg-overlay-2)';
         default:
             return 'var(--color-background-bg-brand-primary-hover)';
     }
@@ -177,17 +196,19 @@ const StyledButton = styled.button `
         case ButtonHierarchy.Primary:
             return 'var(--color-background-bg-brand-primary-hover)';
         case ButtonHierarchy.PrimaryLemon:
-            return 'var(--primitives-desktop-primary-brand-lemon-500)';
+            return 'var(--color-background-bg-brand-secondary-hover)';
         case ButtonHierarchy.Secondary:
-            return 'var(--color-background-bg-card-highlight-hover)';
+            return 'var(--color-border-border-component)';
         case ButtonHierarchy.SecondaryColor:
-            return 'var(--color-background-bg-brand-primary-hover)';
+            return 'var(--color-border-border-secondary-action)';
         case ButtonHierarchy.SecondaryTransparent:
-            return 'var(--primitives-desktop-primary-white-100)';
+            return 'transparent';
         case ButtonHierarchy.Tertiary:
-            return 'var(--primitives-desktop-primary-white-0)';
+            return 'transparent';
         case ButtonHierarchy.TertiaryColor:
-            return 'var(--primitives-desktop-primary-white-0)';
+            return 'transparent';
+        case ButtonHierarchy.WhiteText:
+            return 'transparent';
         default:
             return 'var(--color-background-bg-brand-primary-hover)';
     }
@@ -279,19 +300,19 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
             if (size === ButtonSize.lg)
                 return TypographySize.TextM;
             if (size === ButtonSize.md)
-                return TypographySize.TextS;
+                return TypographySize.TextM;
             if (size === ButtonSize.sm)
-                return TypographySize.TextXS;
+                return TypographySize.TextS;
             if (size === ButtonSize.xs)
-                return TypographySize.Text2XS;
+                return TypographySize.TextS;
             if (size === ButtonSize.xxs)
-                return TypographySize.Text2XS;
+                return TypographySize.TextS;
             return TypographySize.TextM;
         };
         return (_jsxs("div", { style: {
                 display: 'flex',
                 alignItems: 'center',
-                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+                gap: sizeStyles.gap,
             }, children: [showLeadingIcon &&
                     leadingIcon &&
                     getIconComponent(leadingIcon, iconProps), text && (_jsx(Typography, { size: getTextSize(), weight: TypographyWeight.SemiBold, children: text })), showTrailingIcon &&

package/dist/stories/Buttons/MainButton.stories.d.ts

@@ -10,6 +10,7 @@ export declare const SecondaryColor: Story;
 export declare const SecondaryTransparent: Story;
 export declare const Tertiary: Story;
 export declare const TertiaryColor: Story;
+export declare const WhiteText: Story;
 export declare const PrimaryHover: Story;
 export declare const PrimaryDisabled: Story;
 export declare const IconOnly: Story;

package/dist/stories/Buttons/MainButton.stories.js

@@ -38,6 +38,7 @@ const meta = {
                 'Secondary-transparent',
                 'Tertiary',
                 'Tertiary-color',
+                'White-text',
             ],
             description: 'Visual hierarchy of the button',
             table: {
@@ -186,6 +187,13 @@ export const TertiaryColor = {
         hierarchy: ButtonHierarchy.TertiaryColor,
     },
 };
+export const WhiteText = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.WhiteText,
+    },
+};
 export const PrimaryHover = {
     args: {
         ...Primary.args,

package/dist/stories/Buttons/SocialButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SocialButtonProps } from './types';
+export declare const SocialButton: React.FC<SocialButtonProps>;

package/dist/stories/Buttons/SocialButton.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { SocialProvider, ButtonType } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { GoogleIcon, MicrosoftIcon, AppleIcon } from './SocialIcons';
+const ICON_SIZE = 24;
+const providerIcon = {
+    [SocialProvider.Google]: _jsx(GoogleIcon, { size: ICON_SIZE }),
+    [SocialProvider.Microsoft]: _jsx(MicrosoftIcon, { size: ICON_SIZE }),
+    [SocialProvider.Apple]: _jsx(AppleIcon, { size: ICON_SIZE }),
+};
+const providerLabel = {
+    [SocialProvider.Google]: 'Continue with Google',
+    [SocialProvider.Microsoft]: 'Continue with Microsoft Account',
+    [SocialProvider.Apple]: 'Continue with Apple',
+};
+const StyledSocialButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md);
+  box-sizing: border-box;
+  height: var(--spacing-tokens-size-in-px-spacing-spacing-6xl);
+  width: ${(props) => props.$supportingText
+    ? props.$fullWidth
+        ? '100%'
+        : 'auto'
+    : 'var(--spacing-tokens-size-in-px-spacing-spacing-6xl)'};
+  padding: 0 var(--spacing-tokens-size-in-px-spacing-spacing-lg);
+  border: none;
+  border-radius: var(--spacing-tokens-size-in-px-radius-radius-md);
+  background: var(--color-background-bg-card-highlight);
+  color: var(--color-text-text-title);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background: var(--color-background-bg-card-highlight-hover);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+`;
+export const SocialButton = ({ provider, supportingText = true, text, fullWidth = true, onClick, disabled = false, type = ButtonType.Button, style, testId, }) => {
+    const label = text ?? providerLabel[provider];
+    return (_jsxs(StyledSocialButton, { onClick: onClick, type: type, disabled: disabled, "$supportingText": supportingText, "$fullWidth": fullWidth, style: style, "data-testid": testId, "aria-label": supportingText ? undefined : label, children: [providerIcon[provider], supportingText && (_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", children: label }))] }));
+};

package/dist/stories/Buttons/SocialButton.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SocialButton } from './SocialButton';
+declare const meta: Meta<typeof SocialButton>;
+export default meta;
+type Story = StoryObj<typeof SocialButton>;
+export declare const Google: Story;
+export declare const Microsoft: Story;
+export declare const Apple: Story;
+export declare const GoogleIconOnly: Story;
+export declare const MicrosoftIconOnly: Story;
+export declare const AppleIconOnly: Story;
+export declare const Disabled: Story;

package/dist/stories/Buttons/SocialButton.stories.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SocialButton } from './SocialButton';
+import { SocialProvider } from './types';
+const meta = {
+    title: 'Design System/Components/Buttons/SocialButton',
+    component: SocialButton,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4689-15999',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        provider: {
+            control: 'select',
+            options: ['Google', 'Microsoft', 'Apple'],
+            description: 'The social provider this button signs in with',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Google' },
+            },
+        },
+        supportingText: {
+            control: 'boolean',
+            description: 'Whether to show the text label (false renders an icon-only square button)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        text: {
+            control: 'text',
+            description: 'Overrides the default "Continue with …" label',
+            table: { type: { summary: 'string' } },
+        },
+        fullWidth: {
+            control: 'boolean',
+            description: 'Whether the text variant stretches to fill its container',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the button is disabled',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: 388 }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Google = {
+    args: { provider: SocialProvider.Google, supportingText: true },
+};
+export const Microsoft = {
+    args: { provider: SocialProvider.Microsoft, supportingText: true },
+};
+export const Apple = {
+    args: { provider: SocialProvider.Apple, supportingText: true },
+};
+export const GoogleIconOnly = {
+    args: { provider: SocialProvider.Google, supportingText: false },
+};
+export const MicrosoftIconOnly = {
+    args: { provider: SocialProvider.Microsoft, supportingText: false },
+};
+export const AppleIconOnly = {
+    args: { provider: SocialProvider.Apple, supportingText: false },
+};
+export const Disabled = {
+    args: {
+        provider: SocialProvider.Google,
+        supportingText: true,
+        disabled: true,
+    },
+};

package/dist/stories/Buttons/SocialIcons.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SocialIconProps {
+    size?: number;
+}
+/** Full-color Google "G" logo. */
+export declare const GoogleIcon: React.FC<SocialIconProps>;
+/** Full-color Microsoft logo (four squares). */
+export declare const MicrosoftIcon: React.FC<SocialIconProps>;
+/** Monochrome Apple logo — uses currentColor so it follows the button text color (theme-aware). */
+export declare const AppleIcon: React.FC<SocialIconProps>;
+export {};

package/dist/stories/Buttons/SocialIcons.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Full-color Google "G" logo. */
+export const GoogleIcon = ({ size = 24 }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { fill: "#FFC107", d: "M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z" }), _jsx("path", { fill: "#FF3D00", d: "M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" }), _jsx("path", { fill: "#4CAF50", d: "M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" }), _jsx("path", { fill: "#1976D2", d: "M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" })] }));
+/** Full-color Microsoft logo (four squares). */
+export const MicrosoftIcon = ({ size = 24 }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 23 23", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { fill: "#F25022", d: "M1 1h10v10H1z" }), _jsx("path", { fill: "#7FBA00", d: "M12 1h10v10H12z" }), _jsx("path", { fill: "#00A4EF", d: "M1 12h10v10H1z" }), _jsx("path", { fill: "#FFB900", d: "M12 12h10v10H12z" })] }));
+/** Monochrome Apple logo — uses currentColor so it follows the button text color (theme-aware). */
+export const AppleIcon = ({ size = 24 }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M17.05 12.536c-.026-2.682 2.19-3.972 2.29-4.033-1.25-1.827-3.193-2.077-3.883-2.104-1.652-.168-3.225.973-4.063.973-.838 0-2.13-.949-3.504-.923-1.803.027-3.466 1.048-4.393 2.663-1.873 3.246-.479 8.05 1.344 10.682.891 1.288 1.954 2.733 3.348 2.681 1.34-.053 1.846-.866 3.466-.866 1.62 0 2.075.866 3.494.84 1.44-.027 2.355-1.314 3.236-2.606 1.018-1.495 1.438-2.942 1.463-3.017-.032-.013-2.808-1.077-2.835-4.266zM14.78 4.62c.74-.896 1.24-2.142 1.103-3.383-1.066.043-2.357.71-3.122 1.606-.686.795-1.286 2.063-1.124 3.28 1.19.092 2.404-.605 3.143-1.503z" }) }));

package/dist/stories/Buttons/index.d.ts

@@ -1,3 +1,5 @@
 export * from './MainButton';
 export * from './ToggleButtonGroup';
+export * from './SocialButton';
+export * from './SocialIcons';
 export * from './types';

package/dist/stories/Buttons/index.js

@@ -1,3 +1,5 @@
 export * from './MainButton';
 export * from './ToggleButtonGroup';
+export * from './SocialButton';
+export * from './SocialIcons';
 export * from './types';

package/dist/stories/Buttons/types.d.ts

@@ -23,7 +23,8 @@ export declare enum ButtonHierarchy {
     SecondaryColor = "Secondary-color",
     SecondaryTransparent = "Secondary-transparent",
     Tertiary = "Tertiary",
-    TertiaryColor = "Tertiary-color"
+    TertiaryColor = "Tertiary-color",
+    WhiteText = "White-text"
 }
 /**
  * Button states
@@ -129,3 +130,34 @@ export type ToggleButtonGroupProps = {
     /** Custom style of the toggle button */
     style?: SxProps<Theme>;
 };
+/**
+ * Social sign-in providers
+ */
+export declare enum SocialProvider {
+    Google = "Google",
+    Microsoft = "Microsoft",
+    Apple = "Apple"
+}
+/**
+ * Social (sign-in) button props
+ */
+export interface SocialButtonProps {
+    /** The social provider this button signs in with */
+    provider: SocialProvider;
+    /** Whether to show the supporting text label (false renders an icon-only square button) */
+    supportingText?: boolean;
+    /** Overrides the default "Continue with …" label */
+    text?: string;
+    /** Whether the text variant should stretch to fill its container */
+    fullWidth?: boolean;
+    /** Click handler for the button */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** HTML button type */
+    type?: ButtonType;
+    /** Custom styles for the button */
+    style?: CSSProperties;
+    /** Test Id */
+    testId?: string;
+}

package/dist/stories/Buttons/types.js

@@ -22,6 +22,7 @@ export var ButtonHierarchy;
     ButtonHierarchy["SecondaryTransparent"] = "Secondary-transparent";
     ButtonHierarchy["Tertiary"] = "Tertiary";
     ButtonHierarchy["TertiaryColor"] = "Tertiary-color";
+    ButtonHierarchy["WhiteText"] = "White-text";
 })(ButtonHierarchy || (ButtonHierarchy = {}));
 /**
  * Button states
@@ -66,3 +67,12 @@ export var ToggleButtonGroupSize;
     ToggleButtonGroupSize["md"] = "md";
     ToggleButtonGroupSize["sm"] = "sm";
 })(ToggleButtonGroupSize || (ToggleButtonGroupSize = {}));
+/**
+ * Social sign-in providers
+ */
+export var SocialProvider;
+(function (SocialProvider) {
+    SocialProvider["Google"] = "Google";
+    SocialProvider["Microsoft"] = "Microsoft";
+    SocialProvider["Apple"] = "Apple";
+})(SocialProvider || (SocialProvider = {}));

package/dist/stories/Drawer/Drawer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DrawerProps } from './types';
+/**
+ * Composed application sidebar ("Drawer"): logo header, navigation list,
+ * credits card and user-profile footer, with a floating collapse/expand
+ * toggle. Collapse state can be controlled (`collapsed` + `onToggle`) or left
+ * uncontrolled (`defaultCollapsed`). Every colour, space and radius resolves to
+ * `@beydesign/tokens` CSS variables, so it renders correctly in light and dark.
+ */
+export declare const Drawer: React.FC<DrawerProps>;