@ndla/primitives 1.0.86-alpha.0 → 1.0.88-alpha.0

package/README.md

@@ -0,0 +1,104 @@
+# @ndla/primitives
+
+A set of primitive components used throughout ndla packages and websites. Mostly styled versions of components from [ ark-ui ](https://ark-ui.com).
+
+## Installation
+
+```sh
+yarn add @ndla/primitives
+```
+
+This package relies on our styled system, which can be consumed through PandaCSS or plain css. Read about setting it up in [@ndla/preset-panda](../preset-panda/README.md).
+
+## Guidelines
+
+### Primitives should be multi-use
+
+A primitive should be multi-purpose and low-level enough to be composed any which way a user wishes to. If you're creating a one-off component or a component witha limited set of capabilities, consider if it makes more sense in a different package.
+
+### Keep "global" dependencies to a minimum
+
+We try not to impose any technological restrictions on consumers of the primitives; A consumer should for instance be able to choose their own translation or routing libraries.
+
+### Variant usage in primitives
+
+This section does not apply to `sva` usage, as variant overriding is simple there :)
+
+Variants are a blessing and a curse. They provide a clean and structured way of presenting a set of predefined options to users. At the same time, they're a nightmare to override when restyling a primitive.
+
+```tsx
+const Button = styled("button", {
+  base: {
+    color: "text.default",
+  },
+  variants: {
+    primary: {
+      background: "suface.action",
+      _hover: {
+        background: "surface.action.hover",
+      },
+    },
+    subtle: {
+      background: "surface.actionSubtle",
+      _hover: {
+        background: "surface.actionSubtle.hover",
+      },
+    },
+  },
+});
+
+// You get the idea
+const StyledButton = styled(Button, {
+  variants: {
+    primary: {
+      background: "stroke.default",
+      _hover: {
+        background: "stroke.default",
+      },
+    },
+  },
+});
+```
+
+Instead, define primitives with variants with the `cva` function. This allows us to invoke the `cva` function so we can merge the result with whatever value the restyled component has.
+
+```tsx
+const buttonRecipe = cva({
+  base: {
+    color: "text.default",
+  },
+  variants: {
+    primary: {
+      background: "suface.action",
+      _hover: {
+        background: "surface.action.hover",
+      },
+    },
+    subtle: {
+      background: "surface.actionSubtle",
+      _hover: {
+        background: "surface.actionSubtle.hover",
+      },
+    },
+  },
+});
+
+// If you want it to support `asChild`
+const StyledButton = styled(ark.button, {}, { baseComponent: true });
+
+const Button = forwardRef<HTMLButtonElement, ComponentPropsWithRef<"button"> & RecipeVariantProps<typeof buttonRecipe>>(
+  // You need to extract the css prop and any variant props
+  ({ css: cssProp, variant, ...props }, ref) => {
+    return <StyledButton css={css.raw(buttonRecipe.raw({ variant }), cssProp)} {...props} ref={ref} />;
+  },
+);
+
+const RestyledButton = styled(Button, {
+  base: {
+    background: "stroke.default",
+    _hover: "stroke.default",
+  },
+});
+```
+
+This leads to slightly more code, but more intuitive styling options for the consumer

package/dist/panda.buildinfo.json

@@ -283,6 +283,18 @@
       "color]___[value:stroke.default",
       "textDecoration]___[value:underline]___[cond:_checked",
       "textDecoration]___[value:underline]___[cond:_highlighted",
+      "animation]___[value:fade-shift-in 0.25s ease-in-out]___[cond:_open",
+      "animation]___[value:fade-shift-out 0.25s ease-in-out]___[cond:_closed",
+      "gap]___[value:5xsmall",
+      "borderCollapse]___[value:separate",
+      "borderSpacing]___[value:5xsmall",
+      "margin]___[value:-5xsmall",
+      "content]___[value:'-']___[cond:&[data-today]<___>_before",
+      "color]___[value:stroke.default]___[cond:&[data-today]<___>_before",
+      "position]___[value:absolute]___[cond:&[data-today]<___>_before",
+      "marginBlockStart]___[value:medium]___[cond:&[data-today]<___>_before",
+      "color]___[value:text.subtle]___[cond:&[data-outside-range]",
+      "fontWeight]___[value:normal]___[cond:&[data-outside-range]",
       "position]___[value:fixed",
       "height]___[value:100vh",
       "width]___[value:100vw",

package/dist/styles.css

@@ -392,6 +392,22 @@
     color: var(--colors-stroke-default);
 }
 
+  .gap_5xsmall {
+    gap: var(--spacing-5xsmall);
+}
+
+  .bd-cl_separate {
+    border-collapse: separate;
+}
+
+  .bd-sp_5xsmall {
+    border-spacing: var(--spacing-5xsmall);
+}
+
+  .m_-5xsmall {
+    margin: calc(var(--spacing-5xsmall) * -1);
+}
+
   .pos_fixed {
     position: fixed;
 }
@@ -1709,6 +1725,18 @@
     text-decoration: underline;
 }
 
+  .open\:anim_fade-shift-in_0\.25s_ease-in-out:is([open], [data-open], [data-state="open"]) {
+    animation: fade-shift-in 0.25s ease-in-out;
+}
+
+  .closed\:anim_fade-shift-out_0\.25s_ease-in-out:is([closed], [data-closed], [data-state="closed"]) {
+    animation: fade-shift-out 0.25s ease-in-out;
+}
+
+  .\[\&\[data-outside-range\]\]\:c_text\.subtle[data-outside-range] {
+    color: var(--colors-text-subtle);
+}
+
   .open\:anim_backdrop-in:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-backdrop-in);
 }
@@ -2064,6 +2092,10 @@
     transition-timing-function: var(--easings-default);
 }
 
+  .\[\&\[data-outside-range\]\]\:fw_normal[data-outside-range] {
+    font-weight: var(--font-weights-normal);
+}
+
   .\[\&_\>_\*\]\:grid-cs_2 > * {
     grid-column-start: 2;
 }
@@ -2602,6 +2634,18 @@
     transform: rotate(180deg);
 }
 
+  .\[\&\[data-today\]\]\:before\:c_stroke\.default[data-today]::before {
+    color: var(--colors-stroke-default);
+}
+
+  .\[\&\[data-today\]\]\:before\:pos_absolute[data-today]::before {
+    position: absolute;
+}
+
+  .\[\&\[data-today\]\]\:before\:mbs_medium[data-today]::before {
+    margin-block-start: var(--spacing-medium);
+}
+
   .open\:\[\&_summary\,_\[data-embed-type\=\'expandable-box-summary\'\]\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) summary,.open\:\[\&_summary\,_\[data-embed-type\=\'expandable-box-summary\'\]\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) [data-embed-type='expandable-box-summary'] {
     margin-block-end: calc(var(--spacing-xxsmall) * -1);
 }
@@ -2748,6 +2792,10 @@
     background-color: var(--colors-surface-default);
 }
 
+  .\[\&\[data-today\]\]\:before\:content_\'-\'[data-today]::before {
+    content: '-';
+}
+
   .first\:hover\:bd-bs-c_var\(--border-hover\):first-child:is(:hover, [data-hover]) {
     border-block-start-color: var(--border-hover);
 }

package/lib/DatePicker.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { DatePicker } from "@ark-ui/react";
+import type { JsxStyleProps } from "@ndla/styled-system/types";
+import type { TextProps } from "./Text";
+export interface DatePickerRootProps extends DatePicker.RootProps, JsxStyleProps {
+    translations: DatePicker.RootProps["translations"];
+    locale: DatePicker.RootProps["locale"];
+}
+export declare const DatePickerRoot: import("react").ForwardRefExoticComponent<DatePickerRootProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ClearTriggerProps extends DatePicker.ClearTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerClearTrigger: import("react").ForwardRefExoticComponent<ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DatePickerContent: import("react").ForwardRefExoticComponent<DatePicker.ContentProps & {
+    consumeCss?: boolean;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerContentProps extends DatePicker.ContentProps, JsxStyleProps {
+}
+export declare const DatePickerStandaloneContent: import("react").ForwardRefExoticComponent<DatePickerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerControlProps extends DatePicker.ControlProps, JsxStyleProps {
+}
+export declare const DatePickerControl: import("react").ForwardRefExoticComponent<DatePickerControlProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerInputProps extends DatePicker.InputProps, JsxStyleProps {
+}
+export declare const DatePickerInput: import("react").ForwardRefExoticComponent<DatePickerInputProps & import("react").RefAttributes<HTMLInputElement>>;
+interface DatePickerLabelProps extends DatePicker.LabelProps, JsxStyleProps {
+}
+export declare const DatePickerLabel: ({ textStyle, fontWeight, ...props }: DatePickerLabelProps & TextProps) => import("react/jsx-runtime").JSX.Element;
+interface DatePickerMonthSelectProps extends DatePicker.MonthSelectProps, JsxStyleProps {
+}
+export declare const DatePickerMonthSelect: import("react").ForwardRefExoticComponent<DatePickerMonthSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+interface DatePickerNextTrigger extends DatePicker.NextTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerNextTrigger: import("react").ForwardRefExoticComponent<DatePickerNextTrigger & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerPositionerProps extends DatePicker.PositionerProps, JsxStyleProps {
+}
+export declare const DatePickerPositioner: import("react").ForwardRefExoticComponent<DatePickerPositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerPresetTriggerProps extends DatePicker.PresetTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerPresetTrigger: import("react").ForwardRefExoticComponent<DatePickerPresetTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerPrevTriggerProps extends DatePicker.PrevTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerPrevTrigger: import("react").ForwardRefExoticComponent<DatePickerPrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerRangeTextProps extends DatePicker.RangeTextProps, JsxStyleProps {
+}
+export declare const DatePickerRangeText: import("react").ForwardRefExoticComponent<DatePickerRangeTextProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerTableBodyProps extends DatePicker.TableBodyProps, JsxStyleProps {
+}
+export declare const DatePickerTableBody: import("react").ForwardRefExoticComponent<DatePickerTableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+interface DatePickerTableCellProps extends DatePicker.TableCellProps, JsxStyleProps {
+}
+export declare const DatePickerTableCell: import("react").ForwardRefExoticComponent<DatePickerTableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+interface DatePickerTableCellTriggerProps extends DatePicker.TableCellTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerTableCellTrigger: import("react").ForwardRefExoticComponent<DatePickerTableCellTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerTableHeadProps extends DatePicker.TableHeadProps, JsxStyleProps {
+}
+export declare const DatePickerTableHead: import("react").ForwardRefExoticComponent<DatePickerTableHeadProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+interface DatePickerTableHeaderProps extends DatePicker.TableHeaderProps, JsxStyleProps {
+}
+export declare const DatePickerTableHeader: import("react").ForwardRefExoticComponent<DatePickerTableHeaderProps & import("react").RefAttributes<HTMLTableCellElement>>;
+interface DatePickerTableProps extends DatePicker.TableProps, JsxStyleProps {
+}
+export declare const DatePickerTable: import("react").ForwardRefExoticComponent<DatePickerTableProps & import("react").RefAttributes<HTMLTableElement>>;
+interface DatePickerTableRowProps extends DatePicker.TableRowProps, JsxStyleProps {
+}
+export declare const DatePickerTableRow: import("react").ForwardRefExoticComponent<DatePickerTableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+interface DatePickerTriggerProps extends DatePicker.TriggerProps, JsxStyleProps {
+}
+export declare const DatePickerTrigger: import("react").ForwardRefExoticComponent<DatePickerTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerViewControlProps extends DatePicker.ViewControlProps, JsxStyleProps {
+}
+export declare const DatePickerViewControl: import("react").ForwardRefExoticComponent<DatePickerViewControlProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerViewProps extends DatePicker.ViewProps, JsxStyleProps {
+}
+export declare const DatePickerView: import("react").ForwardRefExoticComponent<DatePickerViewProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerViewTriggerProps extends DatePicker.ViewTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerViewTrigger: import("react").ForwardRefExoticComponent<DatePickerViewTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerYearSelectProps extends DatePicker.YearSelectProps, JsxStyleProps {
+}
+export declare const DatePickerYearSelect: import("react").ForwardRefExoticComponent<DatePickerYearSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export { DatePickerContext } from "@ark-ui/react";

package/lib/index.d.ts

@@ -24,6 +24,8 @@ export type { CheckboxVariantProps, CheckboxRootProps } from "./Checkbox";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, } from "./Checkbox";
 export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, ComboboxListProps, } from "./Combobox";
 export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxContentStandalone, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList, } from "./Combobox";
+export type { DatePickerRootProps } from "./DatePicker";
+export { DatePickerRoot, DatePickerClearTrigger, DatePickerContent, DatePickerStandaloneContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTable, DatePickerTableRow, DatePickerTrigger, DatePickerViewControl, DatePickerView, DatePickerViewTrigger, DatePickerYearSelect, DatePickerContext, } from "./DatePicker";
 export type { DialogVariantProps, DialogRootProps } from "./Dialog";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, DialogFooter, useDialog, DialogRootProvider, } from "./Dialog";
 export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.86-alpha.0",
+  "version": "1.0.88-alpha.0",
   "description": "Primitive components for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -30,10 +30,10 @@
   "dependencies": {
     "@ark-ui/react": "^5.9.0",
     "@ndla/styled-system": "^0.0.34",
-    "@ndla/util": "^5.0.7-alpha.0"
+    "@ndla/util": "^5.0.8-alpha.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.53",
+    "@ndla/preset-panda": "^0.0.54",
     "@pandacss/dev": "^0.53.6"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c22b13dd82bf7fa206f87a6f48922b41d8eaec6a"
+  "gitHead": "52adafa4348c1c02ebc4da28317aa5270cbe2a80"
 }

package/es/Accordion.js

@@ -1,140 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { Accordion, accordionAnatomy } from "@ark-ui/react";
-import { sva } from "@ndla/styled-system/css";
-import { createStyleContext } from "./createStyleContext";
-const accordionRecipe = sva({
-  slots: accordionAnatomy.keys(),
-  base: {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "3xsmall"
-    },
-    itemTrigger: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      background: "surface.default",
-      cursor: "pointer",
-      transitionDuration: "fast",
-      transitionTimingFunction: "default",
-      transitionProperty: "background, border-color, border, border-radius",
-      _closed: {
-        transitionProperty: "background, border-color, border, border-radius"
-      },
-      _disabled: {
-        cursor: "not-allowed",
-        background: "surface.disabled.subtle",
-        boxShadowColor: "stroke.disabled",
-        color: "text.disabled",
-        _hover: {
-          background: "surface.disabled.subtle",
-          boxShadowColor: "stroke.disabled",
-          color: "text.disabled"
-        }
-      }
-    },
-    itemIndicator: {
-      color: "icon.strong",
-      transformOrigin: "center",
-      transitionDuration: "normal",
-      transitionProperty: "transform",
-      transitionTimingFunction: "default",
-      _open: {
-        transform: "rotate(180deg)"
-      },
-      _motionReduce: {
-        transition: "none",
-        transitionDuration: "0s"
-      }
-    },
-    itemContent: {
-      overflow: "hidden",
-      // TODO: Is this needed?
-      transitionProperty: "padding-bottom",
-      transitionDuration: "normal",
-      transitionTimingFunction: "default",
-      paddingBlock: "xsmall",
-      paddingInline: "small",
-      _open: {
-        animation: "collapse-in",
-        _motionReduce: {
-          animation: "none"
-        }
-      },
-      _closed: {
-        animation: "collapse-out",
-        _motionReduce: {
-          animation: "none"
-        }
-      }
-    },
-    item: {
-      width: "100%"
-    }
-  },
-  defaultVariants: {
-    variant: "bordered"
-  },
-  variants: {
-    variant: {
-      clean: {},
-      bordered: {
-        itemTrigger: {
-          paddingInline: "medium",
-          paddingBlock: "medium",
-          width: "100%",
-          borderRadius: "xsmall",
-          boxShadowColor: "stroke.subtle",
-          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
-          _hover: {
-            background: "surface.actionSubtle.hover",
-            boxShadowColor: "stroke.hover"
-          },
-          _open: {
-            background: "surface.actionSubtle.active",
-            boxShadowColor: "stroke.default",
-            borderBottomRadius: "sharp"
-          },
-          _focusVisible: {
-            outline: "none",
-            boxShadowColor: "stroke.default",
-            boxShadow: "inset 0 0 0 3px var(--shadow-color)"
-          }
-        },
-        itemContent: {
-          borderBottomRadius: "xsmall",
-          borderWidth: "0 1px 1px",
-          borderStyle: "solid",
-          borderColor: "stroke.default"
-        }
-      }
-    }
-  }
-});
-const {
-  withProvider,
-  withContext
-} = createStyleContext(accordionRecipe);
-export const AccordionRoot = withProvider(Accordion.Root, "root", {
-  baseComponent: true
-});
-export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent", {
-  baseComponent: true
-});
-export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", {
-  baseComponent: true
-});
-export const AccordionItem = withContext(Accordion.Item, "item", {
-  baseComponent: true
-});
-export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger", {
-  baseComponent: true
-});

package/es/ArticleLists.js

@@ -1,186 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { forwardRef, useMemo } from "react";
-import { ark } from "@ark-ui/react";
-import { css, cva } from "@ndla/styled-system/css";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const LIST_ITEM = "& > li";
-const LETTER_LIST = "& > ol[data-variant='letters']";
-const NUMBER_LIST = "& > ol:not([data-variant='letters'])";
-const LETTER_LIST_ITEM = `${LETTER_LIST} > li`;
-const orderedListRecipe = cva({
-  base: {
-    marginInlineStart: "small",
-    paddingInlineStart: "small",
-    [LIST_ITEM]: {
-      "& > ul": {
-        marginInlineStart: "0 !important"
-      },
-      _before: {
-        position: "absolute",
-        transform: "translateX(calc(-100% + (token(spacing.small) * -1)))",
-        fontVariantNumeric: "tabular-nums"
-      }
-    },
-    "& li": {
-      marginBlock: "small"
-    }
-  },
-  defaultVariants: {
-    variant: "numbers"
-  },
-  variants: {
-    variant: {
-      numbers: {
-        [NUMBER_LIST]: {
-          marginInlineStart: "0",
-          paddingInlineStart: "0"
-        },
-        counterReset: "level1",
-        "&[data-count='true']": {
-          counterReset: "level1 var(--start, 0)"
-        },
-        [LIST_ITEM]: {
-          counterIncrement: "level1",
-          _before: {
-            content: "counter(level1, decimal) '. '"
-          },
-          [NUMBER_LIST]: {
-            counterReset: "level2",
-            "&[data-count='true']": {
-              counterReset: "level2 var(--start, 0)"
-            },
-            [LIST_ITEM]: {
-              marginInlineStart: "small",
-              counterIncrement: "level2",
-              _before: {
-                content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
-              },
-              [NUMBER_LIST]: {
-                counterReset: "level3",
-                "&[data-count='true']": {
-                  counterReset: "level3 var(--start, 0)"
-                },
-                [LIST_ITEM]: {
-                  marginInlineStart: "calc(1.5ch + token(spacing.small))",
-                  counterIncrement: "level3",
-                  _before: {
-                    content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
-                  },
-                  [NUMBER_LIST]: {
-                    counterReset: "level4",
-                    "&[data-count='true']": {
-                      counterReset: "level4 var(--start, 0)"
-                    },
-                    [LIST_ITEM]: {
-                      marginInlineStart: "calc(3ch + token(spacing.small))",
-                      counterIncrement: "level4",
-                      _before: {
-                        content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '"
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      },
-      letters: {
-        counterReset: "level1",
-        "&[data-count='true']": {
-          counterReset: "level1 var(--start, 0)"
-        },
-        [LETTER_LIST]: {
-          marginInlineStart: "0",
-          paddingInlineStart: "0"
-        },
-        [LIST_ITEM]: {
-          counterIncrement: "level1",
-          _before: {
-            content: "counter(level1, upper-alpha) '. '"
-          },
-          [LETTER_LIST_ITEM]: {
-            _before: {
-              content: "counter(level1, lower-alpha) '. '"
-            },
-            [LETTER_LIST_ITEM]: {
-              _before: {
-                content: "counter(level1, lower-roman) '. '"
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-});
-const StyledOrderedList = styled(ark.ol, {}, {
-  baseComponent: true
-});
-export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    variant,
-    css: cssProp,
-    start,
-    ...props
-  } = _ref;
-  const style = useMemo(() => ({
-    "--start": start ? start - 1 : undefined
-  }), [start]);
-  return /*#__PURE__*/_jsx(StyledOrderedList, {
-    "data-embed-type": "ordered-list",
-    "data-variant": variant,
-    "data-count": start !== undefined,
-    css: css.raw(orderedListRecipe.raw({
-      variant
-    }), cssProp),
-    style: style,
-    ref: ref,
-    ...props
-  });
-});
-export const UnOrderedList = styled("ul", {
-  base: {
-    listStyle: "revert",
-    marginInlineStart: "medium",
-    paddingInlineStart: "small",
-    "& ul": {
-      marginInlineStart: "0"
-    },
-    "& li": {
-      marginBlock: "small",
-      paddingInlineStart: "small",
-      _marker: {
-        color: "icon.strong"
-      },
-      "& > ol": {
-        marginInlineStart: "0 !important"
-      }
-    },
-    listStyleType: "disc",
-    "& > li > ul": {
-      listStyleType: "circle",
-      "& > li > ul": {
-        listStyleType: "square"
-      }
-    }
-  }
-});
-export const DefinitionList = styled("dl", {
-  base: {
-    "& dt": {
-      fontWeight: "bold"
-    },
-    "& dd": {
-      marginInlineStart: "medium"
-    }
-  }
-});