@sesamehr/react-design-system 2.0.0-beta.1 → 2.0.0-beta.3

package/README.md

@@ -18,6 +18,10 @@ Import the stylesheet once at your app entry:
 import '@sesamehr/react-design-system/style.css';
 ```
 
+That stylesheet paints this package's components and nothing else. It carries no
+reset and no utility classes, so importing it cannot restyle the application
+around it — see [What the stylesheet does not do](#what-the-stylesheet-does-not-do).
+
 Every component is exported with the `Ox` prefix:
 
 ```tsx
@@ -64,6 +68,36 @@ from your own Tailwind setup:
 @import '@sesamehr/react-design-system/assets/styles/mainTheme.css';
 ```
 
+### What the stylesheet does not do
+
+`style.css` contains this package's component rules and its tokens. It
+deliberately does **not** contain:
+
+- **Preflight**, or any other global reset. The components assume one — they are
+  written against `box-sizing: border-box`, `button { font: inherit }` and the
+  rest — but installing it is the application's call, not a library's. If your
+  app has Tailwind, you already have it. If it does not:
+
+  ```ts
+  import '@sesamehr/react-design-system/preflight.css';
+  ```
+
+- **Utility classes.** No `.h-10`, no `.p-4`, no `.bg-brand`. Every component
+  carries its own `ox`-prefixed class and the declarations are compiled into it,
+  so nothing here can collide with the identically-named utilities your own
+  Tailwind build emits from your scale.
+
+Component rules ship inside `@layer components`, which is where a Tailwind app
+already sorts them: after `base`, before `utilities`. So a utility you pass in
+wins — `<Button className="w-full">` is full width — without needing
+`!important`.
+
+Tokens are published under an `--ox-` prefix: override `--ox-color-brand-500`
+to retheme, not `--color-brand-500`. Unprefixed, those are the names Tailwind
+itself uses, and declaring them at `:root` would change what every `rounded-2xl`
+in your application means.
+
+
 ## License
 
 MIT © Sesame HR

package/dist/Data/Table/hooks/useDragToScroll/useDragToScroll.d.ts

@@ -4,6 +4,15 @@ export interface UseDragToScrollOptions {
     enabled?: boolean | (() => boolean);
     /** Cursor to show while dragging */
     cursor?: string;
+    /**
+     * Selector for elements that own their own drag, where panning must keep out.
+     *
+     * A pan and a row reorder are the same gesture, and this hook calls
+     * `preventDefault()` on every `mousedown` it sees — which is exactly what
+     * stops dnd-kit from ever starting. Bowing out over the grip lets the two
+     * share the table: the handle reorders, everywhere else pans.
+     */
+    ignore?: string;
 }
 export interface UseDragToScrollReturn {
     /** Whether the user is currently dragging to scroll */
@@ -13,7 +22,8 @@ export interface UseDragToScrollReturn {
  * Hook for drag-to-scroll functionality.
  * Allows horizontal scrolling by dragging with the mouse.
  *
- * Note: If using row drag & drop, set enabled=false to avoid conflicts.
- * Use @dnd-kit for row reordering instead.
+ * Coexists with row drag & drop: panning keeps out of whatever `ignore`
+ * matches, which by default is the design system's drag grip. Both gestures can
+ * be live on the same table, so there is no need to turn one off.
  */
 export declare function useDragToScroll(elementRef: RefObject<HTMLElement | null>, options?: UseDragToScrollOptions): UseDragToScrollReturn;

package/dist/Display/Badge/Badge.d.ts

@@ -1,7 +1,8 @@
 import { BadgeVariants } from './index.ts';
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    variant?: BadgeVariants['variant'];
+    /** How big the counter is. `sm` is the bare dot and takes no content. */
+    size?: BadgeVariants['size'];
     dataTestid: string;
 }
-/** Badge — mirrors `@sesame/orxata-core` Badge (cva-only). */
+/** Badge — mirrors `@sesame/orxata-core` Badge: a count, or a bare dot. */
 export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Display/Badge/index.d.ts

@@ -1,6 +1,15 @@
 import { VariantProps } from 'class-variance-authority';
 export { Badge, type BadgeProps } from './Badge.tsx';
+/**
+ * A count, or a bare dot. Not a labelled pill.
+ *
+ * Figma's `Badges` set varies on one axis — size — and nothing else: `sm` is a
+ * 6px dot with no content, `md` a 16px circle and `lg` a 22px one, all of them
+ * `error` red with white text. The five colour variants this used to carry came
+ * from shadcn's Badge and were never in the design; a labelled pill is `Chip`
+ * or `StatusBadge`, both of which Figma does draw.
+ */
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "brand" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/dist/Display/ChatBubble/ChatBubble.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ChatBubbleVariants } from './index.ts';
+export interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Who said it: the reader, or someone else */
+    author?: ChatBubbleVariants['author'];
+    /** The line under the message — the timestamp, and a receipt if there is one */
+    meta?: ReactNode;
+    dataTestid: string;
+}
+/** ChatBubble — mirrors `@sesame/orxata-core` ChatBubble. */
+export declare const ChatBubble: import('react').ForwardRefExoticComponent<ChatBubbleProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Display/ChatBubble/ChatBubbleStatus/ChatBubbleStatus.d.ts

@@ -0,0 +1,8 @@
+import { ChatBubbleStatusVariants } from './index.ts';
+export interface ChatBubbleStatusProps extends React.SVGAttributes<SVGSVGElement> {
+    /** How far along the message is */
+    status?: NonNullable<ChatBubbleStatusVariants['status']>;
+    dataTestid: string;
+}
+/** ChatBubbleStatus — mirrors `@sesame/orxata-core` ChatBubbleStatus. */
+export declare const ChatBubbleStatus: import('react').ForwardRefExoticComponent<ChatBubbleStatusProps & import('react').RefAttributes<SVGSVGElement>>;

package/dist/Display/ChatBubble/ChatBubbleStatus/index.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+export { ChatBubbleStatus, type ChatBubbleStatusProps, } from './ChatBubbleStatus.tsx';
+/**
+ * How far along a sent message is. Only the reader's own messages carry one —
+ * there is no receipt for what somebody else said.
+ */
+export declare const chatBubbleStatusVariants: (props?: ({
+    status?: "pending" | "sent" | "delivered" | "read" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ChatBubbleStatusVariants = VariantProps<typeof chatBubbleStatusVariants>;

package/dist/Display/ChatBubble/index.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+export { ChatBubble, type ChatBubbleProps } from './ChatBubble.tsx';
+/**
+ * Who said it, which is the only thing that varies.
+ *
+ * The design draws a `Hover` state too, and it holds exactly one thing: a
+ * circled chevron for the message's actions menu. That is out of scope here, so
+ * hover has nothing left to change and the component does not pretend it does.
+ */
+export declare const chatBubbleVariants: (props?: ({
+    author?: "other" | "user" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ChatBubbleVariants = VariantProps<typeof chatBubbleVariants>;

package/dist/Display/Chip/Chip.d.ts

@@ -1,8 +1,18 @@
 import { ChipVariants } from './index.ts';
-export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /** Which semantic colour it is tinted with */
-    tone?: ChipVariants['tone'];
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** How tall it is, and whether it holds a label or a single icon */
+    size?: ChipVariants['size'];
+    /** How its corners are cut */
+    shape?: ChipVariants['shape'];
+    /**
+     * Whether it is being dragged.
+     *
+     * Of the four states the design draws, this is the only one the browser
+     * cannot tell us about on its own: rest, hover and focus are `:hover` and
+     * `:focus-visible`, and there is no `:dragging`.
+     */
+    dragged?: boolean;
     dataTestid: string;
 }
 /** Chip — mirrors `@sesame/orxata-core` Chip. */
-export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Display/Chip/index.d.ts

@@ -2,18 +2,22 @@ import { VariantProps } from 'class-variance-authority';
 export { Chip } from './Chip.tsx';
 export type { ChipProps } from './Chip.tsx';
 /**
- * A chip is a piece of the user's own data — a value they picked, a label they
- * applied. `Badge` is the system talking back: a status it assigned, a count it
- * worked out. That is the line between the two, and it is why one is a soft
- * tint and the other a solid fill.
+ * A chip is a control the user acts on — a value they picked and can drop, a
+ * filter they can press. `Badge` is the system talking back: a status it
+ * assigned, a count it worked out, nothing to click. That is the line between
+ * them, and it is why this one is an outlined button and that one a solid fill.
  *
- * The tints are opacity over the semantic colour rather than a `-100` step,
- * because no such token exists for `warning` or `destructive` and inventing one
- * would put a colour in the theme that Figma has never seen. `Table` already
- * tints this way. The pair also cannot drift: background and text come off the
- * same token, so re-pointing `--success` moves both.
+ * Class names, not utilities: the declarations live in `Chip.module.css` behind
+ * `@apply`. See `Button/index.ts` for the full reasoning.
+ *
+ * The two axes are the design's own, with one renaming. Its `Form` is `shape`
+ * here because `form` on a `<button>` is a native attribute that associates the
+ * button with a form, and a prop of that name would quietly eat it. Its
+ * `Circle` is this `rounded`: an icon chip's box is already square, so the
+ * circle is the same radius as a text chip's pill and needs no value of its own.
  */
 export declare const chipVariants: (props?: ({
-    tone?: "success" | "warning" | "neutral" | "brand" | "error" | null | undefined;
+    size?: "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    shape?: "square" | "rounded" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ChipVariants = VariantProps<typeof chipVariants>;

package/dist/Forms/Field/Counter/Counter.d.ts

@@ -0,0 +1,9 @@
+export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** How much the field holds now */
+    value: number;
+    /** How much it is allowed to hold */
+    max: number;
+    dataTestid: string;
+}
+/** Counter — mirrors `@sesame/orxata-core` Counter. */
+export declare const Counter: import('react').ForwardRefExoticComponent<CounterProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Forms/Field/Counter/index.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+export { Counter, type CounterProps } from './Counter.tsx';
+/**
+ * Whether the field is still within its limit.
+ *
+ * Not a prop: the component has `value` and `max`, so asking a caller to also
+ * tell it which state that adds up to invites the two to disagree — a red
+ * counter reading 20/100, or a grey one reading 150/100.
+ */
+export declare const counterVariants: (props?: ({
+    state?: "over" | "within" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type CounterVariants = VariantProps<typeof counterVariants>;

package/dist/lib/cssModules.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Maps the class names a `cva()` returns through a CSS module's hashed names.
+ *
+ * The variant objects are copied verbatim between the two packages —
+ * `parity-variants` compares them as source text — so they have to hold the
+ * same literal strings on both sides: `'ox-button--default'`, not a
+ * `styles.oxButtonDefault` lookup that only exists here. The lookup happens
+ * afterwards, which is what this is.
+ *
+ * A name the module does not define passes through untouched, so a caller's own
+ * class survives being handed to it.
+ */
+export declare const moduleClasses: (styles: Record<string, string>, names: string | undefined) => string;

package/dist/main.d.ts

@@ -18,7 +18,8 @@ export { Badge as OxBadge, badgeVariants, type BadgeVariants, } from './Display/
 export { CalendarDate as OxCalendarDate, calendarDateVariants, type CalendarDateVariants, } from './Display/CalendarDate/index.ts';
 export { NumberFlow as OxNumberFlow, resolveNumberFlowPreset, NUMBER_FLOW_PRESETS, type NumberFlowConfig, type NumberFlowPreset, } from './Display/NumberFlow/index.ts';
 export { PaymentCard as OxPaymentCard, paymentCardVariants, type PaymentCardVariants, type BadgeType, type CardData, } from './Display/PaymentCard/index.ts';
-export { Tag as OxTag } from './Display/Tag/index.ts';
+export { ChatBubble as OxChatBubble, chatBubbleVariants, type ChatBubbleVariants, } from './Display/ChatBubble/index.ts';
+export { ChatBubbleStatus as OxChatBubbleStatus, chatBubbleStatusVariants, type ChatBubbleStatusVariants, } from './Display/ChatBubble/ChatBubbleStatus/index.ts';
 export { Chip as OxChip, chipVariants, type ChipVariants, } from './Display/Chip/index.ts';
 export { PointMarker as OxPointMarker, pointMarkerVariants, type PointMarkerVariants, } from './Display/PointMarker/index.ts';
 export { StatusBadge as OxStatusBadge, statusBadgeVariants, indicatorVariants, type StatusBadgeVariants, } from './Feedback/StatusBadge/index.ts';
@@ -32,6 +33,7 @@ export { Accordion as OxAccordion, AccordionItem as OxAccordionItem, AccordionTr
 export { ToggleTabs as OxToggleTabs, ToggleTabsList as OxToggleTabsList, ToggleTabsTrigger as OxToggleTabsTrigger, ToggleTabsContent as OxToggleTabsContent, } from './Navigation/ToggleTabs/index.ts';
 export { PageControl as OxPageControl, pageControlDots, PAGE_CONTROL_WINDOW, type PageControlDot, type PageControlDotSize, } from './Navigation/PageControl/index.ts';
 export { Breadcrumb as OxBreadcrumb, BreadcrumbList as OxBreadcrumbList, BreadcrumbItem as OxBreadcrumbItem, BreadcrumbLink as OxBreadcrumbLink, BreadcrumbPage as OxBreadcrumbPage, BreadcrumbSeparator as OxBreadcrumbSeparator, BreadcrumbEllipsis as OxBreadcrumbEllipsis, } from './Navigation/Breadcrumb/index.ts';
+export { Counter as OxCounter, counterVariants, type CounterVariants, } from './Forms/Field/Counter/index.ts';
 export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, type FieldGroupProps, } from './Forms/Field/index.ts';
 export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Combobox as OxCombobox, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, Switch as OxSwitch, Checkbox as OxCheckbox, RadioButton as OxRadioButton, RadioGroup as OxRadioGroup, ToggleGroup as OxToggleGroup, ToggleLabel as OxToggleLabel, ToggleDescription as OxToggleDescription, SWITCH_SIZES, type InputNumberProps, type InputPasswordProps, type InputPasswordContext, type InputOtpProps, type InputOtpSlotProps, type InputOtpContext, type ComboboxProps, type SelectProps, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
 export { Table as OxTable, TableHead as OxTableHead, TableBody as OxTableBody, TableRow as OxTableRow, TableCell as OxTableCell, TableHeaderCell as OxTableHeaderCell, TableSelectCell as OxTableSelectCell, TableDragCell as OxTableDragCell, TableBulkHeader as OxTableBulkHeader, TablePagination as OxTablePagination, TableEmpty as OxTableEmpty, TableAvatar as OxTableAvatar, TableRowExpanded as OxTableRowExpanded, TableExpandCell as OxTableExpandCell, TableColumnVisibility as OxTableColumnVisibility, useTable, useTableSelection, useTableSorting, useTablePagination, useTableDetailRow, useTablePinning, useTableColumns, useScrollShadow, useDragToScroll, useFixedColumns, } from './Data/Table/index.ts';

package/dist/preflight.css

@@ -0,0 +1,391 @@
+@layer base{
+/*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 2 */
+  border: 0 solid; /* 3 */
+}
+
+/*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured `sans` font-family by default.
+  5. Use the user's configured `sans` font-feature-settings by default.
+  6. Use the user's configured `sans` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  tab-size: 4; /* 3 */
+  font-family: var(--ox-default-font-family, ui-sans-serif,
+    system-ui,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji'
+  ); /* 4 */
+  font-feature-settings: var(--ox-default-font-feature-settings, normal); /* 5 */
+  font-variation-settings: var(--ox-default-font-variation-settings, normal); /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+/*
+  Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+
+/*
+  Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+  1. Use the user's configured `mono` font-family by default.
+  2. Use the user's configured `mono` font-feature-settings by default.
+  3. Use the user's configured `mono` font-variation-settings by default.
+  4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--ox-default-mono-font-family, ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace
+  ); /* 1 */
+  font-feature-settings: var(--ox-default-mono-font-feature-settings, normal); /* 2 */
+  font-variation-settings: var(--ox-default-mono-font-variation-settings, normal); /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+  Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+  Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+  Make lists unstyled by default.
+*/
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+button,
+input,
+select,
+optgroup,
+textarea,
+::file-selector-button {
+  font: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  border-radius: 0; /* 2 */
+  background-color: transparent; /* 3 */
+  opacity: 1; /* 4 */
+}
+
+/*
+  Restore default font weight.
+*/
+
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+
+/*
+  Restore indentation.
+*/
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+
+/*
+  Restore space after button.
+*/
+
+::file-selector-button {
+  margin-inline-end: 4px;
+}
+
+/*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+::placeholder {
+  opacity: 1;
+}
+
+/*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
+  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+  ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+}
+
+/*
+  Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+::-webkit-date-and-time-value {
+  min-height: 1lh; /* 1 */
+  text-align: inherit; /* 2 */
+}
+
+/*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
+*/
+
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+/*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
+}
+
+/*
+  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1;
+}
+
+/*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+button,
+input:where([type='button'], [type='reset'], [type='submit']),
+::file-selector-button {
+  appearance: button;
+}
+
+/*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}
+}