paris 0.9.2 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # paris
 
+## 0.10.0
+
+### Minor Changes
+
+- 41e4bb5: CardButton: new component, clickable card button
+- 41e4bb5: Select: new `card` kind, and `hasOptionBorder` prop for listbox
+- 41e4bb5: Card: removed `hover` kind, replaced with `raised` kind, new `surface` kind, updates to `flat` kind, new `status` prop with a `pending` state
+- 41e4bb5: Checkbox: added `surface` kind
+
+### Patch Changes
+
+- 41e4bb5: Accordion: updated border-bottom color
+- 41e4bb5: Theme: added `roundedMedium` border radius, updated dark mode dropdown and overlayBlack variables
+- 41e4bb5: Combobox: added `hasOptionBorder` prop to match Select listbox
+
 ## 0.9.2
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -34,6 +34,7 @@
     "./button": "./src/stories/button/index.ts",
     "./callout": "./src/stories/callout/index.ts",
     "./card": "./src/stories/card/index.ts",
+    "./cardbutton": "./src/stories/cardbutton/index.ts",
     "./checkbox": "./src/stories/checkbox/index.ts",
     "./combobox": "./src/stories/combobox/index.ts",
     "./dialog": "./src/stories/dialog/index.ts",

package/src/stories/accordion/Accordion.module.scss

@@ -1,6 +1,6 @@
 .container {
     color: var(--pte-new-colors-contentPrimary);
-    border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
+    border-bottom: 1px solid var(--pte-new-colors-borderMedium);
     cursor: pointer;
     transition: all var(--pte-animations-duration-relaxed) var(--pte-animations-timing-easeInOutExpo);
 
@@ -19,7 +19,7 @@
         border-bottom: 1px solid transparent;
         transition: border-bottom-color var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
         &.open {
-            border-bottom-color: var(--pte-new-colors-borderSubtle);
+            border-bottom-color: var(--pte-new-colors-borderMedium);
         }
     }
 

package/src/stories/button/Button.stories.ts

@@ -81,3 +81,10 @@ export const Rounded: Story = {
         }),
     },
 };
+
+export const Notification: Story = {
+    args: {
+        children: 'Button',
+        displayNotificationDot: true,
+    },
+};

package/src/stories/button/Button.tsx

@@ -123,7 +123,9 @@ export type ButtonProps = {
      * This should be text. When Button shape is `circle` or `square`, the action description should still be passed here for screen readers.
      */
     children?: ReactNode | ReactNode[];
-
+    /**
+     * Displays a notification dot.
+     */
     displayNotificationDot?: boolean;
 } & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;
 

package/src/stories/card/Card.module.scss

@@ -1,14 +1,42 @@
 .container {
-    border: var(--pte-new-borders-dropdown-border);
+    user-select: var(--pte-utils-defaultUserSelect);
+    width: auto;
+}
+
+.raised {
     border-radius: var(--pte-borders-radius-rounded);
+    background-color: var(--pte-new-colors-surfacePrimary);
     box-shadow: var(--pte-new-lighting-subtlePopup);
+    border: 1px solid var(--pte-new-colors-surfacePrimary);
 
-    user-select: var(--pte-utils-defaultUserSelect);
-    width: auto;
-    padding: 16px;
+    &.pending {
+        border: 1px dashed var(--pte-new-colors-borderMedium);
+        background-color: var(--pte-new-colors-surfaceSecondary);
+    }
+}
 
-    &.flat {
-        box-shadow: none;
-        border-color: var(--pte-new-colors-borderMedium);
+.surface {
+    border-radius: var(--pte-new-borders-radius-roundedMedium);
+    border: 1px solid var(--pte-new-colors-borderMedium);
+    background-color: var(--pte-new-colors-overlaySubtle);
+
+    &.pending {
+        border: 1px dashed var(--pte-new-colors-borderMedium);
+        background-color: transparent;
     }
 }
+
+.flat {
+    border-radius: var(--pte-new-borders-radius-roundedMedium);
+    border: 1px solid var(--pte-new-colors-borderStrong);
+    background: linear-gradient(0deg, var(--pte-new-colors-overlayWhiteSubtle) 0%, var(--pte-new-colors-overlayWhiteSubtle) 100%), var(--pte-new-colors-surfacePrimary);
+
+    &.pending {
+        border: 1px dashed var(--pte-new-colors-borderStrong);
+    }
+}
+
+.text {
+    padding: 10px 12px;
+    color: var(--pte-new-colors-contentPrimary);
+}

package/src/stories/card/Card.stories.ts

@@ -10,18 +10,29 @@ const meta: Meta<typeof Card> = {
 export default meta;
 type Story = StoryObj<typeof Card>;
 
-export const Default: Story = {
+export const Raised: Story = {
     args: {
-        children: 'Revenue: $3000',
+        children: 'Hello world!',
+    },
+};
+
+export const Surface: Story = {
+    args: {
+        kind: 'surface',
+        children: 'Hello world!',
     },
 };
 
-/**
- * Setting the `kind` prop to `flat` will remove the shadow from the card.
- */
 export const Flat: Story = {
     args: {
         kind: 'flat',
-        children: 'Revenue: $3000',
+        children: 'Hello world!',
+    },
+};
+
+export const Pending: Story = {
+    args: {
+        children: 'Hello world!',
+        status: 'pending',
     },
 };

package/src/stories/card/Card.tsx

@@ -1,20 +1,21 @@
 import type { FC, HTMLAttributes, ReactNode } from 'react';
 import clsx from 'clsx';
 import styles from './Card.module.scss';
+import { TextWhenString } from '../utility';
 
 export type CardProps = {
     /**
-     * The visual variant of the Card.
+     * The visual variant of the Card. `raised` is the default variant with a drop shadow, `surface` is a variant with a border and overlay, `flat` is a variant with a border.
      *
-     * @default "hover"
+     * @default "raised"
      */
-    kind?: 'hover' | 'flat';
-    // /**
-    //  * Whether the Card should tilt on hover.
-    //  *
-    //  * @default true
-    //  */
-    // tilt?: boolean;
+    kind?: 'raised' | 'surface' | 'flat';
+    /**
+     * The status of the Card. `pending` adds a dashed border.
+     *
+     * @default "default"
+     */
+    status?: 'default' | 'pending';
     /** The contents of the Card. */
     children?: ReactNode | ReactNode[];
     // /**
@@ -38,7 +39,8 @@ export type CardProps = {
  * @constructor
  */
 export const Card: FC<CardProps> = ({
-    kind = 'hover',
+    kind = 'raised',
+    status = 'default',
     children,
     ...props
 }) => (
@@ -47,9 +49,13 @@ export const Card: FC<CardProps> = ({
         className={clsx(
             styles.container,
             styles[kind],
+            styles[status],
+            typeof children === 'string' && styles.text,
             props?.className,
         )}
     >
-        {children}
+        <TextWhenString kind="paragraphMedium">
+            {children}
+        </TextWhenString>
     </div>
 );

package/src/stories/cardbutton/CardButton.module.scss

@@ -0,0 +1,43 @@
+.container {
+    user-select: var(--pte-utils-defaultUserSelect);
+    width: auto;
+    background: var(--pte-new-colors-surfacePrimary);
+    border-radius: var(--pte-new-borders-radius-roundedMedium);
+}
+
+.card {
+    transition: var(--pte-animations-interaction);
+    width: 100%;
+
+    border: 1px solid var(--pte-new-colors-borderStrong);
+    background-color: var(--pte-new-colors-overlayWhiteSubtle);
+    border-radius: var(--pte-new-borders-radius-roundedMedium);
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    &:hover {
+        background-color: var(--pte-new-colors-overlayStrong);
+        cursor: default;
+    }
+
+    &[aria-disabled=false]:active {
+        //border: 1px solid var(--pte-new-colors-borderUltrastrong);
+        background-color: var(--pte-new-colors-overlayMedium);
+        transform: scale(0.996);
+    }
+
+    &[aria-disabled=true] {
+        pointer-events: none;
+
+        &.text {
+            color: var(--pte-new-colors-contentDisabled);
+        }
+    }
+}
+
+.text {
+    padding: 4px 10px;
+    color: var(--pte-new-colors-contentPrimary);
+}

package/src/stories/cardbutton/CardButton.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CardButton } from './CardButton';
+
+const meta: Meta<typeof CardButton> = {
+    title: 'Inputs/CardButton',
+    component: CardButton,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CardButton>;
+
+export const Default: Story = {
+    args: {
+        children: 'Hello world!',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        children: 'Hello world!',
+        disabled: true,
+    },
+};

package/src/stories/cardbutton/CardButton.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import type {
+    FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode,
+} from 'react';
+import type { ButtonProps as AriaButtonProps } from '@ariakit/react';
+import { Button as AriaButton } from '@ariakit/react';
+import clsx from 'clsx';
+import styles from './CardButton.module.scss';
+import { TextWhenString } from '../utility';
+
+export type CardButtonProps = {
+    /**
+     * Disables the Button, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The interaction handler for the Button.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Optionally, the Button can be rendered as an anchor element by passing an `href` prop. To use a Next.js Link component, use the `render` prop directly.
+     */
+    href?: string;
+    /**
+     * Optionally, the target of the anchor element can be specified (defaults to `_self`).
+     */
+    hreftarget?: HTMLAttributeAnchorTarget;
+    /**
+     * The contents of the Button.
+     */
+    children?: ReactNode | ReactNode[];
+} & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;
+
+/**
+ * A CardButton component.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { CardButton } from 'paris/cardbutton';
+ * ```
+ * @constructor
+ */
+export const CardButton: FC<CardButtonProps> = ({
+    type = 'button',
+    onClick,
+    children,
+    disabled,
+    href,
+    ...props
+}) => (
+    <div className={styles.container}>
+        <AriaButton
+            {...props}
+            className={clsx(
+                styles.card,
+                typeof children === 'string' && styles.text,
+                props?.className,
+            )}
+            aria-disabled={disabled ?? false}
+            type={type}
+            aria-details={typeof children === 'string' ? children : undefined}
+            onClick={!disabled && !href ? onClick : () => {}}
+            disabled={false}
+            {...href ? {
+                render: (properties) => (
+                    // eslint-disable-next-line jsx-a11y/anchor-has-content
+                    <a
+                        {...properties}
+                        href={href}
+                        target={props.hreftarget ?? '_self'}
+                        rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
+                    />
+                ),
+            } : {}}
+        >
+            <TextWhenString kind="paragraphMedium">
+                {children}
+            </TextWhenString>
+        </AriaButton>
+    </div>
+);

package/src/stories/cardbutton/index.ts

@@ -0,0 +1 @@
+export * from './CardButton';

package/src/stories/checkbox/Checkbox.module.scss

@@ -20,48 +20,78 @@
 }
 
 .root {
-    background-color: transparent;
-    width: 14px;
-    height: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
+    &.default {
+        background-color: transparent;
+        width: 14px;
+        height: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
 
-    border: 2px solid var(--pte-new-colors-contentTertiary);
-    border-radius: var(--pte-borders-radius-rectangle);
-    //box-shadow: var(--pte-new-lighting-shallowBelow);
+        border: 2px solid var(--pte-new-colors-contentTertiary);
+        border-radius: var(--pte-borders-radius-rectangle);
 
-    &:hover {
-        //background-color: ;
-    }
-    &:focus-visible {
-        outline: 1px solid var(--pte-new-colors-borderUltrastrong);
-    }
+        &:hover {
+            //background-color: ;
+        }
 
-    position: relative;
-    &:after {
-        content: "";
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background-color: transparent;
-        transition: var(--pte-animations-interaction);
-        transition-delay: 50ms;
-    }
+        &:focus-visible {
+            outline: 1px solid var(--pte-new-colors-borderUltrastrong);
+        }
+
+        position: relative;
 
-    &[data-state="checked"], &[data-state="indeterminate"] {
         &:after {
-            opacity: 0;
+            content: "";
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            background-color: transparent;
+            transition: var(--pte-animations-interaction);
+            transition-delay: 50ms;
         }
-    }
 
-    &[data-disabled=true] {
-        border-color: var(--pte-new-colors-contentDisabled);
+        &[data-state="checked"], &[data-state="indeterminate"] {
+            &:after {
+                opacity: 0;
+            }
+        }
+
+        &[data-disabled=true] {
+            border-color: var(--pte-new-colors-contentDisabled);
+        }
+
+        & span {
+            transition: var(--pte-animations-interaction);
+        }
     }
 
-    & span {
+    &.surface {
+        width: 100%;
+        padding: 6px 10px;
+        color: var(--pte-new-colors-contentSecondary);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         transition: var(--pte-animations-interaction);
+
+        &:focus-visible {
+            outline: 1px solid var(--pte-new-colors-borderUltrastrong);
+        }
+
+        &[data-state="checked"], &[data-state="indeterminate"] {
+            background-color: var(--pte-new-colors-overlayMedium);
+            color: var(--pte-new-colors-contentPrimary);
+        }
+
+        &[data-disabled=true] {
+            color: var(--pte-new-colors-contentDisabled);
+        }
+
+        &:hover {
+            background-color: var(--pte-new-colors-overlayStrong);
+        }
     }
 }
 
@@ -76,3 +106,11 @@
         fill: var(--pte-new-colors-contentDisabled);
     }
 }
+
+.checkIcon {
+    color: var(--pte-new-colors-contentPrimary);
+
+    &[data-disabled=true] {
+        color: var(--pte-new-colors-contentDisabled);
+    }
+}

package/src/stories/checkbox/Checkbox.stories.ts

@@ -25,3 +25,19 @@ export const Default: Story = {
         });
     },
 };
+
+export const Surface: Story = {
+    args: {
+        children: 'ACH Bank Transfer',
+        kind: 'surface',
+    },
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [checked, setChecked] = useState(false);
+        return createElement(Checkbox, {
+            ...args,
+            checked,
+            onChange: (e) => setChecked(!!e),
+        });
+    },
+};

package/src/stories/checkbox/Checkbox.tsx

@@ -5,8 +5,11 @@ import clsx from 'clsx';
 import styles from './Checkbox.module.scss';
 import { pvar } from '../theme';
 import { TextWhenString } from '../utility';
+import { Check, Icon } from '../icon';
 
 export type CheckboxProps = {
+    /** The visual style of the Checkbox. `default` is a standard checkbox with a label next to it, `surface` is a clickable card that displays a check when selected.  */
+    kind?: 'default' | 'surface'
     checked?: boolean;
     onChange?: (checked: boolean | 'indeterminate') => void;
     disabled?: boolean;
@@ -27,6 +30,7 @@ export type CheckboxProps = {
 * @constructor
 */
 export const Checkbox: FC<CheckboxProps> = ({
+    kind = 'default',
     checked,
     onChange,
     disabled,
@@ -38,29 +42,46 @@ export const Checkbox: FC<CheckboxProps> = ({
     return (
         <label
             htmlFor={inputID}
-            className={clsx(styles.container, disabled && styles.disabled, className)}
+            className={clsx(styles.container, disabled && styles.disabled, className, checked && styles.checked)}
             {...props}
         >
             <RadixCheckbox.Root
                 id={inputID}
-                className={styles.root}
+                className={clsx(styles.root, styles[kind])}
                 checked={checked}
                 onCheckedChange={onChange}
                 data-disabled={disabled}
             >
+                {kind === 'surface' && (
+                    <TextWhenString kind="paragraphXSmall">
+                        {children}
+                    </TextWhenString>
+                )}
                 <RadixCheckbox.Indicator className={styles.indicator}>
-                    <svg width={14} height={14} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            className={styles.checkSvg}
+                    {kind === 'default' && (
+                        <svg width={14} height={14} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                className={styles.checkSvg}
+                                data-disabled={disabled}
+                                d="M0.333374 0.333252V13.6666H13.6667V0.333252H0.333374ZM6.00004 10.3999L2.26672 6.66658L3.66671 5.26658L5.93339 7.53325L10.2 3.26658L11.6001 4.66659L6.00004 10.3999Z"
+                            />
+                        </svg>
+                    )}
+                    {kind === 'surface' && (
+                        <Icon
+                            icon={Check}
+                            size={12.8}
                             data-disabled={disabled}
-                            d="M0.333374 0.333252V13.6666H13.6667V0.333252H0.333374ZM6.00004 10.3999L2.26672 6.66658L3.66671 5.26658L5.93339 7.53325L10.2 3.26658L11.6001 4.66659L6.00004 10.3999Z"
+                            className={styles.checkIcon}
                         />
-                    </svg>
+                    )}
                 </RadixCheckbox.Indicator>
             </RadixCheckbox.Root>
-            <TextWhenString kind="paragraphXSmall">
-                {children}
-            </TextWhenString>
+            {kind === 'default' && (
+                <TextWhenString kind="paragraphXSmall">
+                    {children}
+                </TextWhenString>
+            )}
         </label>
     );
 };

package/src/stories/combobox/Combobox.tsx

@@ -68,9 +68,14 @@ export type ComboboxProps<T extends Record<string, any>> = {
      */
     customValueString?: string;
     /**
-     * The size of the options dropdown, in pixels. Only applicable to kind="listbox".
+     * The size of the options dropdown, in pixels.
      */
     maxHeight?: number;
+    /**
+     * Adds a bottom border to the dropdown options.
+     * @default false
+     */
+    hasOptionBorder?: boolean;
     /**
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
      */
@@ -115,6 +120,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     allowCustomValue,
     customValueString = 'Create "%v"',
     maxHeight = 320,
+    hasOptionBorder = false,
     overrides,
 }: ComboboxProps<T>) {
     const inputID = useId();
@@ -262,6 +268,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                                 className={clsx(
                                     overrides?.option,
                                     styles.option,
+                                    hasOptionBorder && styles.optionBorder,
                                 )}
                             >
                                 {typeof option.node === 'string' ? (

package/src/stories/select/Select.module.scss

@@ -87,6 +87,13 @@
             color: var(--pte-new-colors-contentDisabled);
         }
     }
+
+    &.optionBorder {
+        border-bottom: 0.5px solid var(--pte-new-colors-borderMedium);
+    }
+    &.optionBorder:last-child {
+        border-bottom: none;
+    }
 }
 
 .content {
@@ -155,3 +162,80 @@
     border: 1.5px solid var(--pte-new-colors-contentTertiary);
     transition: all var(--pte-animations-interaction);
 }
+
+.cardContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.cardOption {
+    background-color: var(--pte-new-colors-surfacePrimary);
+    border-radius: 6px;
+    width: 100%;
+
+    &[data-headlessui-state~="active"] {
+        //.cardSurface {
+        //    background-color: var(--pte-new-colors-overlayWhiteSubtle);
+        //    border-color: var(--pte-new-colors-borderStrong);
+        //}
+    }
+
+    &[data-headlessui-state~="checked"] {
+        .cardSurface {
+            background-color: var(--pte-new-colors-overlayMedium);
+            border-color: var(--pte-new-colors-borderUltrastrong);
+        }
+    }
+
+    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
+        pointer-events: none;
+        cursor: default;
+
+        &, & * {
+            color: var(--pte-new-colors-contentDisabled);
+        }
+
+        //.cardSurface {
+        //    background-color: var(--pte-new-colors-overlayWhiteSubtle);
+        //    border-color: var(--pte-new-colors-borderStrong);
+        //}
+    }
+
+    &[data-status="error"] {
+        .cardSurface {
+            background-color: var(--pte-new-colors-backgroundNegative);
+        }
+    }
+
+    &[data-status="success"] {
+        .cardSurface {
+            background-color: var(--pte-new-colors-backgroundPositive);
+        }
+    }
+
+    &:hover {
+        .cardSurface {
+            background-color: var(--pte-new-colors-overlayStrong);
+        }
+    }
+}
+
+.cardSurface {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    transition: all var(--pte-animations-interaction);
+
+    border-radius: 6px;
+    background-color: var(--pte-new-colors-overlayWhiteSubtle);
+    border: 1px solid var(--pte-new-colors-borderStrong);
+
+    &.text {
+        padding: 4px 10px;
+    }
+}

package/src/stories/select/Select.stories.ts

@@ -48,6 +48,7 @@ export const Default: Story = {
 
 export const WithCustomNodes: Story = {
     args: {
+        hasOptionBorder: true,
         options: [
             {
                 id: '1',
@@ -95,3 +96,18 @@ export const Radio: Story = {
     },
     render,
 };
+
+export const Card: Story = {
+    args: {
+        label: 'Release type',
+        description: 'Select the type of release you want to create.',
+        kind: 'card',
+        options: [
+            { id: '1', node: 'Single' },
+            { id: '2', node: 'EP' },
+            { id: '3', node: 'Album (LP)' },
+            { id: '4', node: 'Compilation' },
+        ],
+    },
+    render,
+};

package/src/stories/select/Select.tsx

@@ -48,15 +48,19 @@ export type SelectProps<T = Record<string, any>> = {
      */
     onChange?: (value: Option<T>['id'] | null) => void | Promise<void>;
     /**
-     * The visual variant of the Select. Listboxes will render as a dropdown menu, and radios will render as a radio group.
+     * The visual variant of the Select. `listbox` will render as a dropdown menu, `radio` will render as a radio group, and `card` will render as selectable cards.
      * @default listbox
      */
-    kind?: 'listbox' | 'radio';
-
+    kind?: 'listbox' | 'radio' | 'card';
     /**
      * The size of the options dropdown, in pixels. Only applicable to kind="listbox".
      */
     maxHeight?: number;
+    /**
+     * Adds a bottom border to the dropdown options. Only applicable to kind="listbox".
+     * @default false
+     */
+    hasOptionBorder?: boolean;
 
     /**
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
@@ -100,6 +104,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
     disabled,
     kind = 'listbox',
     maxHeight = 320,
+    hasOptionBorder = false,
     overrides,
 }: SelectProps<T>, ref: ForwardedRef<any>) {
     const inputID = useId();
@@ -195,6 +200,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                     className={clsx(
                                         overrides?.option,
                                         styles.option,
+                                        hasOptionBorder && styles.optionBorder,
                                     )}
                                     disabled={option.disabled || false}
                                 >
@@ -233,6 +239,28 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                     ))}
                 </RadioGroup>
             )}
+            {kind === 'card' && (
+                <RadioGroup ref={ref} as="div" className={styles.cardContainer} value={value} onChange={onChange}>
+                    {options.map((option) => (
+                        <RadioGroup.Option
+                            as="div"
+                            className={clsx(
+                                styles.cardOption,
+                            )}
+                            key={option.id}
+                            value={option.id}
+                            disabled={option.disabled || false}
+                            data-status={disabled ? 'disabled' : (status || 'default')}
+                        >
+                            <div className={clsx(styles.cardSurface, typeof option.node === 'string' && styles.text)}>
+                                <TextWhenString kind="paragraphSmall">
+                                    {option.node}
+                                </TextWhenString>
+                            </div>
+                        </RadioGroup.Option>
+                    ))}
+                </RadioGroup>
+            )}
         </Field>
     );
 });

package/src/stories/theme/themes.ts

@@ -378,6 +378,7 @@ export type Theme = {
                 rectangle: CSSLength,
                 rounded: CSSLength,
                 roundedSmall: CSSLength,
+                roundedMedium: CSSLength,
                 roundedLarge: CSSLength,
                 roundedXL: CSSLength,
             },
@@ -1005,6 +1006,7 @@ export const LightTheme: Theme = {
                 rectangle: '0px',
                 rounded: '8px',
                 roundedSmall: '4px',
+                roundedMedium: '6px',
                 roundedLarge: '12px',
                 roundedXL: '16px',
             },
@@ -1376,9 +1378,9 @@ export const DarkTheme: Theme = merge(LightTheme, {
             overlayInverseSubtle: 'rgba(0, 0, 0, 0.02)',
             overlayInverseMedium: 'rgba(0, 0, 0, 0.05)',
             overlayWhiteUltrastrong: 'rgba(0, 0, 0, 0.18)',
-            overlayBlackSubtle: 'rgba(255, 255, 255, 0.2)',
-            overlayBlackMedium: 'rgba(255, 255, 255, 0.3)',
-            overlayBlackStrong: 'rgba(255, 255, 255, 0.4)',
+            overlayBlackSubtle: 'rgba(0, 0, 0, 0.2)',
+            overlayBlackMedium: 'rgba(0, 0, 0, 0.3)',
+            overlayBlackStrong: 'rgba(0, 0, 0, 0.4)',
             overlayPageBackground: 'rgba(18, 18, 18, 0.75)',
         },
         lighting: {
@@ -1418,8 +1420,8 @@ export const DarkTheme: Theme = merge(LightTheme, {
         },
         borders: {
             dropdown: {
-                shadow: 'none',
-                color: 'none',
+                shadow: ShadowsDark.deepBelow,
+                color: 'transparent',
                 border: 'none',
             },
         },