+ {[...state.collection].map((item) => (
+ key={item.key} item={item} state={state} />
+ ))}
+
+ );
+}
+
+type RawAccordionItemProps
+
+ );
+}
+
+export type AccordionProps+ +
+
+ {item.props.children}
+
+
+ {children}
+
+ );
+};
+
+export type AvatarGroupProps = React.ComponentPropsWithoutRef<"div"> & {
+ max?: number;
+ spacing?: "xs" | "sm" | "md";
+ overlap?: boolean;
+};
+export const AvatarGroup = ({
+ className,
+ children,
+ max = 3,
+ spacing = "sm",
+ overlap,
+ ...props
+}: AvatarGroupProps) => {
+ const classNames = clsx(
+ className,
+ "avatar-group",
+ `avatar-group-spacing-${spacing}`,
+ overlap && "avatar-group-overlap",
+ );
+ const childArray = React.Children.toArray(children);
+ const childCount = childArray.length;
+ const overflow = Math.max(0, childCount - max);
+ const filteredChildren = childArray.splice(0, childCount - overflow);
+ return (
+
+ {filteredChildren}
+ {overflow > 0 && (
+ +{overflow}
+ )}
+
+ );
+};
diff --git a/src/ui/Avatar/avatar.css b/src/ui/Avatar/avatar.css
new file mode 100644
index 0000000..b477769
--- /dev/null
+++ b/src/ui/Avatar/avatar.css
@@ -0,0 +1,124 @@
+.avatar-button {
+ border-radius: var(--avatar-border-radius);
+ cursor: pointer;
+ display: inline-flex;
+ height: var(--avatar-diameter);
+ position: relative;
+ width: var(--avatar-diameter);
+ &:focus-visible {
+ outline: none;
+ --offset: calc(var(--sds-responsive-border-width) * 2);
+ &::before {
+ content: "";
+ border-radius: calc(var(--avatar-border-radius) + var(--offset));
+ bottom: calc(-1 * var(--offset));
+ box-shadow: 0 0 0 var(--global-focus-ring-size)
+ var(--global-focus-ring-color);
+ left: calc(-1 * var(--offset));
+ position: absolute;
+ right: calc(-1 * var(--offset));
+ top: calc(-1 * var(--offset));
+ }
+ }
+}
+
+.avatar {
+ border-radius: var(--avatar-border-radius);
+ display: inline-flex;
+ height: var(--avatar-diameter);
+ width: var(--avatar-diameter);
+ > img,
+ > svg {
+ border-radius: var(--avatar-border-radius);
+ height: auto;
+ width: 100%;
+ }
+
+ > svg {
+ background: var(--sds-color-bg-brand-default);
+ > text {
+ fill: var(--sds-color-text-brand-onbrand);
+ font-size: var(--sds-typography-scale-07);
+ }
+ }
+}
+
+.avatar-block {
+ align-items: center;
+ display: grid;
+ grid-template-areas: "avatar label" "avatar description";
+ grid-template-columns: auto 1fr;
+ column-gap: var(--sds-size-gap-sm);
+ row-gap: var(--sds-size-gap-xs);
+
+ > .avatar {
+ grid-area: avatar;
+ }
+
+ > .label {
+ grid-area: label;
+ }
+
+ > .description {
+ grid-area: description;
+ }
+}
+
+.avatar-shape-circle {
+ --avatar-border-radius: var(--sds-size-radius-full);
+}
+.avatar-shape-square {
+ --avatar-border-radius: var(--sds-size-radius-sm);
+}
+
+.avatar-size-sm {
+ --avatar-diameter: var(--sds-typography-scale-05);
+}
+.avatar-size-md {
+ --avatar-diameter: var(--sds-typography-scale-06);
+}
+.avatar-size-lg {
+ --avatar-diameter: var(--sds-typography-scale-07);
+}
+
+.avatar-group {
+ align-items: center;
+ display: flex;
+ gap: var(--sds-size-gap-md);
+
+ > .avatar + .avatar {
+ margin-left: calc(
+ var(--sds-size-gap-md) * -1 + var(--avatar-group-gap) *
+ var(--avatar-group-gap-factor)
+ );
+ }
+ > .avatar-group-overflow {
+ align-items: center;
+ background: var(--sds-color-bg-default-secondary);
+ border-radius: var(--sds-size-radius-sm);
+ color: var(--sds-color-text-default-secondary);
+ display: flex;
+ justify-content: center;
+ font: var(--sds-font-body-small);
+ font-weight: var(--sds-typography-body-weight-strong);
+ height: var(--sds-typography-scale-05);
+ width: var(--sds-typography-scale-05);
+ }
+
+ --avatar-group-gap-factor: 1;
+ &.avatar-group-overlap {
+ --avatar-group-gap-factor: -1;
+ > .avatar {
+ box-shadow: var(--sds-effects-shadows-sm);
+ }
+ }
+ &.avatar-group-spacing-xs {
+ --avatar-group-gap: var(--sds-size-gap-xs);
+ }
+ &.avatar-group-spacing-sm {
+ --avatar-group-gap: var(--sds-size-gap-sm);
+ }
+ &.avatar-group-spacing-md {
+ --avatar-group-gap: var(--sds-size-gap-md);
+ }
+}
diff --git a/src/ui/Button/Button.figma.tsx b/src/ui/Button/Button.figma.tsx
new file mode 100644
index 0000000..7685cdf
--- /dev/null
+++ b/src/ui/Button/Button.figma.tsx
@@ -0,0 +1,46 @@
+import figma from "@figma/code-connect";
+import { Button, ButtonGroup } from "./Button";
+
+const FIGMA_URL_BUTTON =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:426";
+// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=2-6"
+const FIGMA_URL_BUTTON_GROUP =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2072-9432&t=4T0FUMZf0IfQUWoa-11";
+
+figma.connect(Button, FIGMA_URL_BUTTON, {
+ props: {
+ label: figma.string("Label"),
+ iconStart: figma.boolean("Has Icon Start", {
+ true: figma.instance("Icon Start"),
+ false: undefined,
+ }),
+ iconEnd: figma.boolean("Has Icon End", {
+ true: figma.instance("Icon End"),
+ false: undefined,
+ }),
+ isDisabled: figma.enum("State", {
+ Disabled: true,
+ }),
+ },
+ example: ({ isDisabled, label, iconEnd, iconStart }) => (
+
+ ),
+});
+
+figma.connect(ButtonGroup, FIGMA_URL_BUTTON_GROUP, {
+ props: {
+ align: figma.enum("Align", {
+ Center: "center",
+ End: "end",
+ Justify: "justify",
+ }),
+ children: figma.children("Button"),
+ },
+ example: ({ children, align }) => (
+
+
+
+
+
+
+
+
+
+ {media &&
+ );
+}
diff --git a/src/ui/Card/card.css b/src/ui/Card/card.css
new file mode 100644
index 0000000..d303370
--- /dev/null
+++ b/src/ui/Card/card.css
@@ -0,0 +1,80 @@
+.card {
+ --border-radius: var(--sds-size-radius-sm);
+ background: var(--sds-color-bg-default-default);
+ border-radius: var(--border-radius);
+ display: grid;
+ position: relative;
+
+ &.card-direction-vertical {
+ gap: var(--sds-size-gap-sm);
+ grid-template-areas: "content";
+ &:has(.card-media) {
+ grid-template-areas: "media" "content";
+ }
+ }
+
+ &.card-direction-horizontal {
+ gap: var(--sds-size-gap-lg);
+ grid-template-areas: "content";
+ &:has(.card-media) {
+ grid-template-areas: "media content";
+ grid-template-columns: auto 1fr;
+ }
+ }
+
+ &.card-variant-padded {
+ box-shadow: inset 0 0 0 var(--sds-responsive-border-width)
+ var(--sds-color-border-default-default);
+ padding: var(--sds-size-padding-xl);
+ }
+
+ &:has(.card-interaction[data-hovered]:not([data-focus-visible])) {
+ background: var(--sds-color-bg-default-default-hover);
+ }
+
+ .card-media {
+ display: flex;
+ grid-area: media;
+ }
+
+ .card-content {
+ align-self: center;
+ display: flex;
+ flex-direction: column;
+ gap: var(--sds-size-gap-sm);
+ grid-area: content;
+
+ .button-group {
+ margin-top: var(--sds-size-gap-lg);
+ position: relative;
+ z-index: 2;
+ }
+ }
+}
+
+.card-interaction {
+ border-radius: var(--border-radius);
+ bottom: 0;
+ cursor: pointer;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 1;
+
+ &[data-focus-visible] {
+ outline: none;
+ --offset: calc(var(--sds-responsive-border-width) * 2);
+ &::before {
+ content: "";
+ border-radius: calc(var(--border-radius) + var(--offset));
+ bottom: calc(-1 * var(--offset));
+ box-shadow: 0 0 0 var(--global-focus-ring-size)
+ var(--global-focus-ring-color);
+ left: calc(-1 * var(--offset));
+ position: absolute;
+ right: calc(-1 * var(--offset));
+ top: calc(-1 * var(--offset));
+ }
+ }
+}
diff --git a/src/ui/Checkbox/Checkbox.figma.tsx b/src/ui/Checkbox/Checkbox.figma.tsx
new file mode 100644
index 0000000..9908083
--- /dev/null
+++ b/src/ui/Checkbox/Checkbox.figma.tsx
@@ -0,0 +1,52 @@
+import figma from "@figma/code-connect";
+import { CheckboxField, CheckboxGroup } from "./Checkbox";
+
+const FIGMA_URL_CHECKBOX =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:1454";
+// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=4-7260"
+const FIGMA_URL_CHECKBOX_FIELD =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:1441";
+// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=31-6606"
+const FIGMA_URL_CHECKBOX_GROUP =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:1426";
+// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=15-8213"
+
+figma.connect(CheckboxField, FIGMA_URL_CHECKBOX, {
+ props: {
+ checked: figma.enum("State", {
+ Checked: true,
+ "Checked Disabled": true,
+ Indeterminate: true,
+ }),
+ isIndeterminate: figma.enum("State", {
+ Indeterminate: true,
+ }),
+ isDisabled: figma.enum("State", {
+ "Checked Disabled": true,
+ Disabled: true,
+ }),
+ },
+
+ example: ({ checked, isIndeterminate, isDisabled }) => (
+ {media}
}
+ {children}
+ {interaction && (
+
+
+
+
+ );
+}
diff --git a/src/ui/Checkbox/checkbox.css b/src/ui/Checkbox/checkbox.css
new file mode 100644
index 0000000..2eef1f0
--- /dev/null
+++ b/src/ui/Checkbox/checkbox.css
@@ -0,0 +1,117 @@
+.checkbox {
+ --checkbox-background: var(--sds-color-bg-default-default);
+ --checkbox-border: var(--sds-color-border-default-default);
+ --checkbox-icon: var(--sds-color-icon-brand-onbrand);
+ --checkbox-border-radius: var(--sds-size-radius-xs);
+ align-items: center;
+ background: var(--checkbox-background);
+ box-shadow: inset 0 0 0 var(--sds-responsive-border-width)
+ var(--checkbox-border);
+ border-radius: var(--checkbox-border-radius);
+ display: flex;
+ height: var(--sds-size-gap-lg);
+ justify-content: center;
+ padding: var(--sds-responsive-border-width);
+ position: relative;
+ width: var(--sds-size-gap-lg);
+ > .icon {
+ --icon-color: var(--checkbox-icon);
+ display: none;
+ }
+}
+
+.checkbox[data-disabled] {
+ &,
+ &[data-selected] {
+ --checkbox-background: var(--sds-color-bg-disabled-default);
+ --checkbox-border: var(--sds-color-border-disabled-secondary);
+ }
+}
+
+.checkbox[data-selected],
+.checkbox-field[data-selected] > .checkbox {
+ --checkbox-background: var(--sds-color-bg-brand-default);
+ --checkbox-border: var(--checkbox-background);
+}
+
+.checkbox-field[data-selected]
+ > .checkbox:not([data-indeterminate])
+ > .icon-selected,
+.checkbox[data-selected]:not([data-indeterminate]) > .icon-selected {
+ display: block;
+}
+.checkbox-field[data-selected]
+ > .checkbox[data-indeterminate]
+ > .icon-indeterminate,
+.checkbox[data-selected][data-indeterminate] > .icon-indeterminate {
+ display: block;
+}
+
+.checkbox[data-selected][data-disabled],
+.checkbox-field[data-selected][data-disabled] > .checkbox {
+ --checkbox-icon: var(--sds-color-icon-disabled-default);
+}
+
+.checkbox-field[data-focus-visible] .checkbox::before {
+ --offset: calc(var(--sds-responsive-border-width) * 2);
+ content: "";
+ border-radius: calc(var(--checkbox-border-radius) + var(--offset));
+ bottom: calc(-1 * var(--offset));
+ box-shadow: 0 0 0 var(--global-focus-ring-size) var(--global-focus-ring-color);
+ left: calc(-1 * var(--offset));
+ position: absolute;
+ right: calc(-1 * var(--offset));
+ top: calc(-1 * var(--offset));
+}
+
+.checkbox-group {
+ display: flex;
+ flex-direction: column;
+ gap: var(--sds-size-gap-sm);
+}
+
+.checkbox-field {
+ --checkbox-field-label-color: var(--sds-color-text-default-default);
+ --checkbox-field-description-color: var(--sds-color-text-default-secondary);
+
+ align-items: center;
+ column-gap: var(--sds-size-gap-lg);
+ display: grid;
+ grid-template-columns: var(--sds-size-gap-lg) 1fr;
+ row-gap: var(--sds-size-gap-xs);
+ width: 100%;
+
+ > .checkbox {
+ grid-row-start: 1;
+ grid-column-start: 1;
+ }
+
+ > .label {
+ color: var(--checkbox-field-label-color);
+ grid-row-start: 1;
+ grid-column-start: 2;
+ }
+
+ > .description {
+ color: var(--checkbox-field-description-color);
+ grid-row-start: 2;
+ grid-column-start: 2;
+ }
+}
+
+.checkbox-field[data-disabled] > .label {
+ --checkbox-field-label-color: var(--sds-color-text-disabled-default);
+}
+
+.checkbox-field[data-disabled] > .description {
+ --checkbox-field-description-color: var(--sds-color-text-disabled-default);
+}
+
+.checkbox-field[data-disabled] {
+ .checkbox,
+ &[data-selected] .checkbox {
+ --checkbox-background: var(--sds-color-bg-disabled-default);
+ --checkbox-border: var(--sds-color-border-disabled-secondary);
+ --checkbox-icon: var(--sds-color-icon-disabled-ondisabled);
+ }
+}
diff --git a/src/ui/Dialog/Dialog.figma.tsx b/src/ui/Dialog/Dialog.figma.tsx
new file mode 100644
index 0000000..8bd7b88
--- /dev/null
+++ b/src/ui/Dialog/Dialog.figma.tsx
@@ -0,0 +1,39 @@
+import figma from "@figma/code-connect";
+import {
+ Dialog,
+ DialogActions,
+ DialogBody,
+ DialogDescription,
+ DialogTitle,
+} from "./Dialog";
+
+const FIGMA_URL_DIALOG =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762-696";
+// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=15-8469"
+
+figma.connect(Dialog, FIGMA_URL_DIALOG, {
+ props: {
+ body: figma.boolean("Dialog Body", {
+ true: {children}
;
+}
+
+export type GridItemProps = React.ComponentPropsWithoutRef<"div">;
+export function GridItem({ children }: GridItemProps) {
+ const classNames = clsx("grid-item");
+ return {children}
;
+}
+
+export type GridCenterProps = React.ComponentPropsWithoutRef<"div">;
+export function GridCenter({ children }: GridCenterProps) {
+ const classNames = clsx("grid-center");
+ return {children}
;
+}
diff --git a/src/ui/Grid/grid.css b/src/ui/Grid/grid.css
new file mode 100644
index 0000000..fd729b8
--- /dev/null
+++ b/src/ui/Grid/grid.css
@@ -0,0 +1,133 @@
+.grid {
+ --grid-align-primary: initial;
+ --grid-align-secondary: initial;
+ --grid-gap: 0;
+ --grid-padding-x: 0;
+ --grid-padding-y: 0;
+ align-items: var(--grid-align-secondary);
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--grid-gap);
+
+ justify-content: var(--grid-align-primary);
+ margin: 0 auto;
+ max-width: calc(var(--sds-responsive-width-device-min));
+ padding: var(--grid-padding-y) var(--grid-padding-x);
+ width: 100%;
+
+ > .grid-item {
+ flex: 1;
+ flex-shrink: 1;
+ }
+}
+.grid-center {
+ display: grid;
+ place-items: center;
+ height: 100%;
+ width: 100%;
+}
+
+.grid-direction-column {
+ flex-direction: column;
+}
+.grid-direction-row {
+ flex-direction: row;
+}
+
+.grid-align-primary-center {
+ --grid-align-primary: center;
+}
+.grid-align-primary-start {
+ --grid-align-primary: flex-start;
+}
+.grid-align-primary-end {
+ --grid-align-primary: flex-end;
+}
+.grid-align-secondary-center {
+ --grid-align-secondary: center;
+}
+.grid-align-secondary-start {
+ --grid-align-secondary: flex-start;
+}
+.grid-align-secondary-end {
+ --grid-align-secondary: flex-end;
+}
+
+.grid-gap-xs {
+ --grid-gap: var(--sds-size-gap-xs);
+}
+.grid-gap-sm {
+ --grid-gap: var(--sds-size-gap-sm);
+}
+.grid-gap-md {
+ --grid-gap: var(--sds-size-gap-md);
+}
+.grid-gap-lg {
+ --grid-gap: var(--sds-size-gap-lg);
+}
+.grid-gap-xl {
+ --grid-gap: var(--sds-size-gap-xl);
+}
+
+.grid-padding-xs {
+ --grid-padding-x: var(--sds-size-padding-xs);
+ --grid-padding-y: var(--sds-size-padding-xs);
+}
+.grid-padding-sm {
+ --grid-padding-x: var(--sds-size-padding-sm);
+ --grid-padding-y: var(--sds-size-padding-sm);
+}
+.grid-padding-md {
+ --grid-padding-x: var(--sds-size-padding-md);
+ --grid-padding-y: var(--sds-size-padding-md);
+}
+.grid-padding-lg {
+ --grid-padding-x: var(--sds-size-padding-lg);
+ --grid-padding-y: var(--sds-size-padding-lg);
+}
+.grid-padding-xl {
+ --grid-padding-x: var(--sds-size-padding-xl);
+ --grid-padding-y: var(--sds-size-padding-xl);
+}
+.grid-padding-xxl {
+ --grid-padding-x: var(--sds-size-padding-xxl);
+ --grid-padding-y: var(--sds-size-padding-xxl);
+}
+
+.grid-padding-x-xs {
+ --grid-padding-x: var(--sds-size-padding-xs);
+}
+.grid-padding-x-sm {
+ --grid-padding-x: var(--sds-size-padding-sm);
+}
+.grid-padding-x-md {
+ --grid-padding-x: var(--sds-size-padding-md);
+}
+.grid-padding-x-lg {
+ --grid-padding-x: var(--sds-size-padding-lg);
+}
+.grid-padding-x-xl {
+ --grid-padding-x: var(--sds-size-padding-xl);
+}
+.grid-padding-x-xxl {
+ --grid-padding-x: var(--sds-size-padding-xxl);
+}
+
+.grid-padding-y-xs {
+ --grid-padding-y: var(--sds-size-padding-xs);
+}
+.grid-padding-y-sm {
+ --grid-padding-y: var(--sds-size-padding-sm);
+}
+.grid-padding-y-md {
+ --grid-padding-y: var(--sds-size-padding-md);
+}
+.grid-padding-y-lg {
+ --grid-padding-y: var(--sds-size-padding-lg);
+}
+.grid-padding-y-xl {
+ --grid-padding-y: var(--sds-size-padding-xl);
+}
+.grid-padding-y-xxl {
+ --grid-padding-y: var(--sds-size-padding-xxl);
+}
diff --git a/src/ui/Icon/Icon.tsx b/src/ui/Icon/Icon.tsx
new file mode 100644
index 0000000..22a6dca
--- /dev/null
+++ b/src/ui/Icon/Icon.tsx
@@ -0,0 +1,22 @@
+import clsx from "clsx";
+
+export type IconSize = "14" | "16" | "20" | "24" | "32" | "40" | "48";
+export type IconProps = {
+ children?: React.ReactNode;
+ className?: string;
+ size?: IconSize;
+};
+export function Icon({ size = "16", children, className }: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/ui/IconButton/IconButton.figma.tsx b/src/ui/IconButton/IconButton.figma.tsx
new file mode 100644
index 0000000..5b26068
--- /dev/null
+++ b/src/ui/IconButton/IconButton.figma.tsx
@@ -0,0 +1,23 @@
+import figma from "@figma/code-connect";
+import { IconButton } from "./IconButton";
+
+const FIGMA_URL_ICON_BUTTON =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=11-11508";
+
+figma.connect(IconButton, FIGMA_URL_ICON_BUTTON, {
+ props: {
+ icon: figma.instance("Icon"),
+ isDisabled: figma.enum("State", {
+ Disabled: true,
+ }),
+ },
+ example: ({ isDisabled, icon }) => (
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+ {subhead}
+{header}
+
+ {hasIcon && (
+ {iconFromScheme(scheme)}
+ )}
+
+
+ ) : (
+
+
+ ))}
+
+ );
+}
+
+export type MessageTitleProps = TextStrongProps;
+export function MessageTitle({ className, ...props }: MessageTitleProps) {
+ const classNames = clsx(className, "message-title");
+ return (
+ {children}
+ {isDismissible &&
+ (scheme === "danger" ? (
+
+
+
+ );
+}
diff --git a/src/ui/Radio/radio.css b/src/ui/Radio/radio.css
new file mode 100644
index 0000000..34da318
--- /dev/null
+++ b/src/ui/Radio/radio.css
@@ -0,0 +1,96 @@
+.radio {
+ --radio-background: var(--sds-color-bg-default-default);
+ --radio-border: var(--sds-color-border-default-default);
+ --radio-icon: var(--sds-color-icon-brand-onbrand);
+ --radio-border-radius: var(--sds-size-gap-lg);
+ background: var(--radio-background);
+ box-shadow: inset 0 0 0 var(--sds-responsive-border-width) var(--radio-border);
+ border-radius: var(--radio-border-radius);
+ height: var(--sds-size-gap-lg);
+ position: relative;
+ width: var(--sds-size-gap-lg);
+
+ > .radio-check {
+ background: var(--radio-icon);
+ border-radius: var(--sds-size-gap-sm);
+ display: none;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ height: var(--sds-size-gap-sm);
+ width: var(--sds-size-gap-sm);
+ }
+}
+
+.radio-field[data-selected] .radio {
+ --radio-background: var(--sds-color-bg-brand-default);
+ --radio-border: var(--radio-background);
+ > .radio-check {
+ display: block;
+ }
+}
+
+.radio-field[data-focus-visible] .radio::before {
+ --offset: calc(var(--sds-responsive-border-width) * 2);
+ content: "";
+ border-radius: calc(var(--radio-border-radius) + var(--offset));
+ bottom: calc(-1 * var(--offset));
+ box-shadow: 0 0 0 var(--global-focus-ring-size) var(--global-focus-ring-color);
+ left: calc(-1 * var(--offset));
+ position: absolute;
+ right: calc(-1 * var(--offset));
+ top: calc(-1 * var(--offset));
+}
+
+.radio-group {
+ display: flex;
+ flex-direction: column;
+ gap: var(--sds-size-gap-sm);
+}
+
+.radio-field {
+ --radio-field-label-color: var(--sds-color-text-default-default);
+ --radio-field-description-color: var(--sds-color-text-default-secondary);
+
+ align-items: center;
+ column-gap: var(--sds-size-gap-lg);
+ display: grid;
+ grid-template-columns: var(--sds-size-gap-lg) 1fr;
+ row-gap: var(--sds-size-gap-xs);
+ width: 100%;
+
+ > .radio {
+ grid-row-start: 1;
+ grid-column-start: 1;
+ }
+
+ > .label {
+ color: var(--radio-field-label-color);
+ grid-row-start: 1;
+ grid-column-start: 2;
+ }
+
+ > .description {
+ color: var(--radio-field-description-color);
+ grid-row-start: 2;
+ grid-column-start: 2;
+ }
+}
+
+.radio-field[data-disabled] > .label {
+ --radio-field-label-color: var(--sds-color-text-disabled-default);
+}
+
+.radio-field[data-disabled] > .description {
+ --radio-field-description-color: var(--sds-color-text-disabled-default);
+}
+
+.radio-field[data-disabled] {
+ & .radio,
+ &[data-selected] .radio {
+ --radio-background: var(--sds-color-bg-disabled-default);
+ --radio-border: var(--sds-color-border-disabled-secondary);
+ --radio-icon: var(--sds-color-icon-disabled-ondisabled);
+ }
+}
diff --git a/src/ui/Select/Select.figma.tsx b/src/ui/Select/Select.figma.tsx
new file mode 100644
index 0000000..a734660
--- /dev/null
+++ b/src/ui/Select/Select.figma.tsx
@@ -0,0 +1,33 @@
+import figma from "@figma/code-connect";
+import { Select, SelectItem } from "./Select";
+
+const FIGMA_URL_SELECT =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:1162";
+// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=29-1471"
+
+figma.connect(Select, FIGMA_URL_SELECT, {
+ props: {
+ value: figma.string("Value"),
+ isDisabled: figma.enum("State", {
+ Disabled: true,
+ }),
+ item1: figma.string("Value"),
+ item2: figma.string("Option 2"),
+ item3: figma.string("Option 3"),
+ item4: figma.string("Option 4"),
+ item5: figma.string("Option 5"),
+ },
+ example: ({ isDisabled, value, item1, item2, item3, item4, item5 }) => (
+
+ ),
+});
diff --git a/src/ui/Select/Select.stories.tsx b/src/ui/Select/Select.stories.tsx
new file mode 100644
index 0000000..2328f6e
--- /dev/null
+++ b/src/ui/Select/Select.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SelectField, SelectItem } from "ui";
+
+const meta: Meta
+
+
+ );
+}
diff --git a/src/ui/Switch/switch.css b/src/ui/Switch/switch.css
new file mode 100644
index 0000000..4f1eb1f
--- /dev/null
+++ b/src/ui/Switch/switch.css
@@ -0,0 +1,102 @@
+.switch {
+ --switch-background: var(--sds-color-bg-default-secondary);
+ --switch-border: var(--sds-color-border-default-default);
+ --switch-icon: var(--sds-color-icon-default-secondary);
+ --switch-padding: var(--sds-size-padding-xs);
+ --switch-width: calc(var(--sds-size-gap-lg) + var(--sds-size-gap-xl));
+ --switch-icon-diameter: var(--sds-size-gap-lg);
+ --switch-icon-x: calc(var(--switch-padding));
+ --switch-border-radius: var(--sds-size-gap-xl);
+ background: var(--switch-background);
+ box-shadow: inset 0 0 0 var(--sds-responsive-border-width)
+ var(--switch-border);
+ border-radius: var(--switch-border-radius);
+ height: var(--sds-size-gap-xl);
+ padding: var(--switch-padding);
+ position: relative;
+ width: var(--switch-width);
+
+ > .switch-icon {
+ background: var(--switch-icon);
+ border-radius: var(--switch-icon-diameter);
+ display: block;
+ left: 0;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%) translateX(var(--switch-icon-x));
+ height: var(--switch-icon-diameter);
+ width: var(--switch-icon-diameter);
+ }
+}
+
+.switch-group {
+ display: flex;
+ flex-direction: column;
+ gap: var(--sds-size-gap-md);
+}
+
+.switch-field[data-selected] .switch {
+ --switch-background: var(--sds-color-bg-brand-default);
+ --switch-border: var(--switch-background);
+ --switch-icon: var(--sds-color-icon-brand-onbrand);
+ --switch-icon-x: calc(
+ var(--switch-width) - var(--switch-padding) - var(--switch-icon-diameter)
+ );
+}
+
+.switch-field[data-focus-visible] .switch::before {
+ --offset: calc(var(--sds-responsive-border-width) * 2);
+ content: "";
+ border-radius: calc(var(--switch-border-radius) + var(--offset));
+ bottom: calc(-1 * var(--offset));
+ box-shadow: 0 0 0 var(--global-focus-ring-size) var(--global-focus-ring-color);
+ left: calc(-1 * var(--offset));
+ position: absolute;
+ right: calc(-1 * var(--offset));
+ top: calc(-1 * var(--offset));
+}
+
+.switch-field {
+ --switch-field-label-color: var(--sds-color-text-default-default);
+ --switch-field-description-color: var(--sds-color-text-default-secondary);
+
+ align-items: center;
+ column-gap: var(--sds-size-gap-lg);
+ display: grid;
+ grid-template-columns: 1fr auto;
+ row-gap: var(--sds-size-gap-xs);
+
+ > .switch {
+ grid-row-start: 1;
+ grid-column-start: 2;
+ }
+
+ > .label {
+ color: var(--switch-field-label-color);
+ grid-row-start: 1;
+ grid-column-start: 1;
+ }
+
+ > .description {
+ color: var(--switch-field-description-color);
+ grid-row-start: 2;
+ grid-column-start: 1;
+ }
+}
+
+.switch-field[data-disabled] > .label {
+ --switch-field-label-color: var(--sds-color-text-disabled-default);
+}
+
+.switch-field[data-disabled] > .description {
+ --switch-field-description-color: var(--sds-color-text-disabled-default);
+}
+
+.switch-field[data-disabled] {
+ .switch,
+ &[data-selected] .switch {
+ --switch-background: var(--sds-color-bg-disabled-default);
+ --switch-border: var(--sds-color-border-disabled-secondary);
+ --switch-icon: var(--sds-color-icon-disabled-default);
+ }
+}
diff --git a/src/ui/Tab/Tab.figma.tsx b/src/ui/Tab/Tab.figma.tsx
new file mode 100644
index 0000000..4ce7a7d
--- /dev/null
+++ b/src/ui/Tab/Tab.figma.tsx
@@ -0,0 +1,26 @@
+import figma from "@figma/code-connect";
+import { Tab, TabList, TabPanel, Tabs } from "./Tab";
+
+const FIGMA_URL_TAB =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=3729-12963&t=Rnfd6fBILKf5apxJ-11";
+const FIGMA_URL_TABS =
+ "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=3729-13362&t=fdRRaUvHCwmaI7ea-11";
+
+figma.connect(Tab, FIGMA_URL_TAB, {
+ props: {
+ label: figma.string("Label"),
+ },
+ example: ({ label }) =>
+ <>
+ {props.children}
+ {allowsSorting && (
+
+ )}
+
+
+ )}
+