@domicile-desktop/component-library 0.0.0-alpha-7a29c8f7f7ea → 0.0.0-alpha-63728a988cfd

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-7a29c8f7f7ea",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-7a29c8f7f7ea",
+    "@domicile-desktop/sdk": "0.0.0-alpha-63728a988cfd",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-63728a988cfd",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -36,13 +36,24 @@
     "./Accordion": "./src/Accordion/Accordion.tsx",
     "./AnimatedBellIcon": "./src/AnimatedBellIcon/AnimatedBellIcon.tsx",
     "./AnimatedBluetoothIcon": "./src/AnimatedBluetoothIcon/AnimatedBluetoothIcon.tsx",
+    "./AnimatedCaretIcon": "./src/AnimatedCaretIcon/AnimatedCaretIcon.tsx",
     "./AnimatedChatIcon": "./src/AnimatedChatIcon/AnimatedChatIcon.tsx",
     "./AnimatedCheckIcon": "./src/AnimatedCheckIcon/AnimatedCheckIcon.tsx",
+    "./AnimatedCloseIcon": "./src/AnimatedCloseIcon/AnimatedCloseIcon.tsx",
+    "./AnimatedDownloadIcon": "./src/AnimatedDownloadIcon/AnimatedDownloadIcon.tsx",
     "./AnimatedEyeIcon": "./src/AnimatedEyeIcon/AnimatedEyeIcon.tsx",
+    "./AnimatedFloatIcon": "./src/AnimatedFloatIcon/AnimatedFloatIcon.tsx",
     "./AnimatedGearIcon": "./src/AnimatedGearIcon/AnimatedGearIcon.tsx",
     "./AnimatedKeyboardIcon": "./src/AnimatedKeyboardIcon/AnimatedKeyboardIcon.tsx",
+    "./AnimatedLayoutIcon": "./src/AnimatedLayoutIcon/AnimatedLayoutIcon.tsx",
     "./AnimatedLightningIcon": "./src/AnimatedLightningIcon/AnimatedLightningIcon.tsx",
+    "./AnimatedLockIcon": "./src/AnimatedLockIcon/AnimatedLockIcon.tsx",
+    "./AnimatedMaximizeIcon": "./src/AnimatedMaximizeIcon/AnimatedMaximizeIcon.tsx",
     "./AnimatedMicrophoneIcon": "./src/AnimatedMicrophoneIcon/AnimatedMicrophoneIcon.tsx",
+    "./AnimatedMinusIcon": "./src/AnimatedMinusIcon/AnimatedMinusIcon.tsx",
+    "./AnimatedPlusIcon": "./src/AnimatedPlusIcon/AnimatedPlusIcon.tsx",
+    "./AnimatedReloadIcon": "./src/AnimatedReloadIcon/AnimatedReloadIcon.tsx",
+    "./AnimatedSlidersIcon": "./src/AnimatedSlidersIcon/AnimatedSlidersIcon.tsx",
     "./AnimatedSpeakerIcon": "./src/AnimatedSpeakerIcon/AnimatedSpeakerIcon.tsx",
     "./AnimatedSquaresIcon": "./src/AnimatedSquaresIcon/AnimatedSquaresIcon.tsx",
     "./AnimatedThemeIcon": "./src/AnimatedThemeIcon/AnimatedThemeIcon.tsx",
@@ -146,5 +157,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-7a29c8f7f7ea"
+  "version": "0.0.0-alpha-63728a988cfd"
 }

package/src/AnimatedCaretIcon/AnimatedCaretIcon.tsx

@@ -0,0 +1,74 @@
+import type { CSSProperties } from "react";
+
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { CARET_REGULAR } from "../_icon/redrawn-parts";
+
+/** Which way the caret points. */
+export type CaretPointing = keyof typeof CARET_REGULAR;
+
+/** The way each pointing darts. Physical, since the icon does not mirror. */
+const DARTS: Record<CaretPointing, readonly [number, number]> = {
+  down: [0, 1],
+  left: [-1, 0],
+  right: [1, 0],
+  up: [0, -1],
+};
+
+/** Each arm turns toward the other, sharpening the point. */
+const SWINGS = [
+  [1, 0],
+  [-1, 0],
+] as const;
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  pointing: CaretPointing;
+  size: number;
+};
+
+/**
+ * Phosphor's regular carets. While the control it is in is pointed at, its
+ * point sharpens and darts the way it points.
+ */
+export const AnimatedCaretIcon = ({ label, pointing, size }: Props) => {
+  const { arms, tip } = CARET_REGULAR[pointing];
+  const [x, y] = DARTS[pointing];
+  return (
+    <IconFrame label={label} size={size}>
+      <g
+        className={dartStyles}
+        style={{ "--part-x": x, "--part-y": y } as CSSProperties}
+      >
+        {arms.map((d, index) => (
+          <IconPart
+            d={d}
+            direction={SWINGS[index]}
+            hoverStyles={sharpenStyles}
+            key={d}
+            name="arm"
+            order={index}
+            origin={tip}
+          />
+        ))}
+      </g>
+    </IconFrame>
+  );
+};
+
+const dartStyles = css({
+  _controlHover: {
+    animation: "iconPartSpread {durations.slower} {easings.in-out}",
+  },
+  "--spread": "10px",
+  "[data-reduced-motion] &": { animationName: "none !important" },
+});
+
+const sharpenStyles = css({
+  _controlHover: {
+    animation: "iconArmSwing {durations.slower} {easings.in-out}",
+  },
+  "--swing": "9deg",
+});

package/src/AnimatedCloseIcon/AnimatedCloseIcon.tsx

@@ -0,0 +1,49 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { X_BOLD, X_REGULAR } from "../_icon/redrawn-parts";
+
+/** Which way each stroke swings as the X snips. */
+const SWINGS = [
+  [-1, 0],
+  [1, 0],
+] as const;
+
+const ARMS = { bold: X_BOLD.arms, regular: X_REGULAR.arms };
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+  weight?: keyof typeof ARMS | undefined;
+};
+
+/**
+ * Phosphor's `X`. Its two strokes snip, like scissors, while the control it
+ * is in is pointed at.
+ */
+export const AnimatedCloseIcon = ({
+  label,
+  size,
+  weight = "regular",
+}: Props) => (
+  <IconFrame label={label} size={size}>
+    {ARMS[weight].map((d, index) => (
+      <IconPart
+        d={d}
+        direction={SWINGS[index]}
+        hoverStyles={snipStyles}
+        key={d}
+        name="arm"
+        order={index}
+      />
+    ))}
+  </IconFrame>
+);
+
+const snipStyles = css({
+  _controlHover: {
+    animation: "iconArmSwing {durations.slower} {easings.in-out}",
+  },
+  "--swing": "14deg",
+});

package/src/AnimatedDownloadIcon/AnimatedDownloadIcon.tsx

@@ -0,0 +1,50 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { DOWNLOAD_REGULAR } from "../_icon/phosphor-parts";
+import { useCue } from "../_icon/useCue";
+
+/** The tray's floor, which it gives toward. */
+const FLOOR = [128, 216] as const;
+
+type Props = {
+  /** Drops the arrow again each time it changes, such as for a new download. */
+  cue?: unknown;
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's regular `DownloadSimple`. Its arrow drops into the tray when it
+ * appears and on each cue, and the tray gives under it.
+ */
+export const AnimatedDownloadIcon = ({ cue, label, size }: Props) => {
+  const cued = useCue(cue);
+  return (
+    <IconFrame label={label} size={size}>
+      <IconPart
+        cue={cued}
+        cueStyles={giveStyles}
+        d={DOWNLOAD_REGULAR.tray}
+        name="tray"
+        origin={FLOOR}
+      />
+      <IconPart
+        cue={cued}
+        cueStyles={dropStyles}
+        d={DOWNLOAD_REGULAR.arrow}
+        name="arrow"
+      />
+    </IconFrame>
+  );
+};
+
+// Not keyed on `data-cued`: the drop also plays when the icon appears.
+const dropStyles = css({
+  animation: "iconDownloadDrop {durations.slowest} {easings.out}",
+});
+
+const giveStyles = css({
+  animation: "iconTrayGive {durations.slowest} {easings.out}",
+});

package/src/AnimatedFloatIcon/AnimatedFloatIcon.tsx

@@ -0,0 +1,171 @@
+import { useId } from "react";
+
+import { css } from "../../styled-system/css";
+import { DIAGONALS } from "../_icon/diagonals";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { SQUARES_REGULAR } from "../_icon/phosphor-parts";
+import { BROWSERS_REGULAR } from "../_icon/redrawn-parts";
+
+/** The centers of the squares, which they shrink about. */
+const SQUARE_CENTERS = [
+  [80, 80],
+  [176, 80],
+  [80, 176],
+  [176, 176],
+] as const;
+
+/** The center of the window in front. */
+const FRONT_CENTER = [112, 144] as const;
+
+/** The way the window in front lifts, and the one behind the other way. */
+const FRONT_LIFT = [-1, 1] as const;
+const BACK_LIFT = [1, -1] as const;
+
+type Props = {
+  /** Whether the window floats: the icon then offers to tile it. */
+  floating: boolean;
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's regular `Browsers` while a window is tiled, to float it, and
+ * its `SquaresFour` while it floats, to tile it. Pointed at, the windows
+ * lift apart or the squares part. On a change the windows gather into the
+ * squares, or the window behind slides out from the one in front.
+ */
+export const AnimatedFloatIcon = ({ floating, label, size }: Props) => {
+  const maskId = useId();
+  const windows = floating ? "hidden" : "shown";
+  const squares = floating ? "shown" : "hidden";
+  return (
+    <IconFrame label={label} size={size}>
+      <defs>
+        {/* Hides the window behind where the one in front covers it. */}
+        <mask
+          height="320"
+          id={maskId}
+          maskUnits="userSpaceOnUse"
+          width="320"
+          x="-32"
+          y="-32"
+        >
+          <rect fill="white" height="320" width="320" x="-32" y="-32" />
+          <g fill="black">
+            <IconPart
+              d={BROWSERS_REGULAR.frontOutline}
+              direction={FRONT_LIFT}
+              hoverStyles={floating ? undefined : frontLiftStyles}
+              name="front-outline"
+            />
+          </g>
+        </mask>
+      </defs>
+      <g mask={`url(#${maskId})`}>
+        <IconPart
+          d={BROWSERS_REGULAR.back}
+          direction={BACK_LIFT}
+          hoverStyles={floating ? undefined : backLiftStyles}
+          name="back"
+          state={windows}
+          stateStyles={backStyles}
+        />
+      </g>
+      <IconPart
+        d={BROWSERS_REGULAR.front}
+        direction={FRONT_LIFT}
+        hoverStyles={floating ? undefined : frontLiftStyles}
+        name="front"
+        origin={FRONT_CENTER}
+        state={windows}
+        stateStyles={frontStyles}
+      />
+      {SQUARES_REGULAR.squares.map((d, index) => (
+        <IconPart
+          d={d}
+          direction={DIAGONALS[index]}
+          hoverStyles={floating ? squareSpreadStyles : undefined}
+          key={d}
+          name="square"
+          order={index}
+          origin={SQUARE_CENTERS[index]}
+          state={squares}
+          stateStyles={squareStyles}
+        />
+      ))}
+    </IconFrame>
+  );
+};
+
+// The window behind tucks under the one in front before either goes, and
+// slides back out once the one in front is back.
+const backStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "translate(-32px, 32px)",
+    transition:
+      "opacity {durations.fastest} {easings.linear} {durations.normal}, transform {durations.normal} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.fastest} {easings.linear} {durations.slow}, transform {durations.slower} {easings.outBack} {durations.slow}",
+  },
+});
+
+const frontStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "scale(0.8)",
+    transition:
+      "opacity {durations.normal} {easings.in} {durations.fast}, transform {durations.normal} {easings.in} {durations.fast}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} {durations.fast}, transform {durations.slow} {easings.out} {durations.fast}",
+  },
+});
+
+// The squares gather into the middle as they go, and come out of it.
+const squareStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform:
+      "translate(calc(var(--part-x) * -30px), calc(var(--part-y) * -30px)) scale(0.6)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} calc({durations.fast} + var(--part-order) * {durations.fastest}), transform {durations.slower} {easings.outBack} calc({durations.fast} + var(--part-order) * {durations.fastest})",
+  },
+});
+
+const backLiftStyles = css({
+  _controlHover: {
+    animation: "iconPartSpread {durations.slowest} {easings.in-out}",
+  },
+  "--spread": "12px",
+});
+
+const frontLiftStyles = css({
+  _controlHover: {
+    animation: "iconPartSpread {durations.slowest} {easings.in-out}",
+  },
+  "--spread": "8px",
+});
+
+const squareSpreadStyles = css({
+  _controlHover: {
+    animation:
+      "iconPartSpread {durations.slowest} {easings.in-out} calc(var(--part-order) * {durations.fastest} / 2)",
+  },
+  "--spread": "9px",
+});

package/src/AnimatedLayoutIcon/AnimatedLayoutIcon.tsx

@@ -0,0 +1,142 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { ROWS_REGULAR, TABS_REGULAR } from "../_icon/phosphor-parts";
+import { SQUARE_SPLIT_REGULAR } from "../_icon/redrawn-parts";
+
+/** How a group lays out its windows. */
+export type GroupLayout = "column" | "row" | "stack" | "tabs";
+
+/** Where the tabs stand, which they rise from. */
+const TABS_BASE = [128, 176] as const;
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  layout: GroupLayout;
+  size: number;
+};
+
+const shownIf = (shown: boolean) => (shown ? "shown" : "hidden");
+
+/**
+ * A group's layout, in Phosphor's regular icons: `SquareSplitHorizontal`
+ * for a row, `SquareSplitVertical` for a column, `Rows` for a stack and
+ * `Tabs` for tabs. When the layout changes the new one builds in: the divider draws
+ * across, the rows drop in, the tabs rise.
+ */
+export const AnimatedLayoutIcon = ({ label, layout, size }: Props) => {
+  const split = layout === "row" || layout === "column";
+  return (
+    <IconFrame label={label} size={size}>
+      <IconPart
+        d={SQUARE_SPLIT_REGULAR.frame}
+        name="frame"
+        state={shownIf(split)}
+        stateStyles={fadeStyles}
+      />
+      <IconPart
+        d={SQUARE_SPLIT_REGULAR.horizontal}
+        name="divider"
+        state={shownIf(layout === "row")}
+        stateStyles={columnDividerStyles}
+      />
+      <IconPart
+        d={SQUARE_SPLIT_REGULAR.vertical}
+        name="divider"
+        state={shownIf(layout === "column")}
+        stateStyles={rowDividerStyles}
+      />
+      {ROWS_REGULAR.rows.map((d, index) => (
+        <IconPart
+          d={d}
+          key={d}
+          name="row"
+          order={index}
+          state={shownIf(layout === "stack")}
+          stateStyles={rowStyles}
+        />
+      ))}
+      <IconPart
+        d={TABS_REGULAR.tabs}
+        name="tabs"
+        origin={TABS_BASE}
+        state={shownIf(layout === "tabs")}
+        stateStyles={tabsStyles}
+      />
+    </IconFrame>
+  );
+};
+
+const fadeStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transition: "opacity {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transition: "opacity {durations.normal} {easings.out}",
+  },
+});
+
+// Draws down from the middle, across the frame.
+const columnDividerStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "scaleY(0)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.fast} {easings.out} {durations.faster}, transform {durations.slow} {easings.out} {durations.faster}",
+  },
+});
+
+const rowDividerStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "scaleX(0)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.fast} {easings.out} {durations.faster}, transform {durations.slow} {easings.out} {durations.faster}",
+  },
+});
+
+// Each row drops in after the one above it.
+const rowStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "translateY(-28px)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} calc({durations.faster} + var(--part-order) * {durations.faster}), transform {durations.slower} {easings.outBack} calc({durations.faster} + var(--part-order) * {durations.faster})",
+  },
+});
+
+const tabsStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "scaleY(0.4)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} {durations.faster}, transform {durations.slow} {easings.outBack} {durations.faster}",
+  },
+});

package/src/AnimatedLockIcon/AnimatedLockIcon.tsx

@@ -0,0 +1,51 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { LOCK_REGULAR } from "../_icon/redrawn-parts";
+
+/** The keyhole's middle, which it swells about. */
+const KEYHOLE = [128, 152] as const;
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's regular `Lock`. Its shackle snaps shut when it appears, such as
+ * when a page turns out to be secure, and lifts a little while the control
+ * it is in is pointed at.
+ */
+export const AnimatedLockIcon = ({ label, size }: Props) => (
+  <IconFrame label={label} size={size}>
+    <IconPart d={LOCK_REGULAR.body} name="body" />
+    <IconPart
+      d={LOCK_REGULAR.shackle}
+      hoverStyles={liftStyles}
+      name="shackle"
+      stateStyles={shutStyles}
+    />
+    <IconPart
+      d={LOCK_REGULAR.keyhole}
+      name="keyhole"
+      origin={KEYHOLE}
+      stateStyles={pulseStyles}
+    />
+  </IconFrame>
+);
+
+const shutStyles = css({
+  animation: "iconShackleShut {durations.slower} {easings.out}",
+});
+
+const pulseStyles = css({
+  animation:
+    "iconKeyholePulse {durations.slow} {easings.in-out} {durations.normal} both",
+});
+
+const liftStyles = css({
+  _controlHover: {
+    animation: "iconShackleLift {durations.slowest} {easings.in-out}",
+  },
+});

package/src/AnimatedMaximizeIcon/AnimatedMaximizeIcon.tsx

@@ -0,0 +1,97 @@
+import { css } from "../../styled-system/css";
+import { DIAGONALS } from "../_icon/diagonals";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import {
+  CORNERS_IN_REGULAR,
+  CORNERS_OUT_REGULAR,
+} from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  /** Whether the window is maximized: the icon then offers to restore it. */
+  maximized: boolean;
+  size: number;
+};
+
+/**
+ * Phosphor's regular `CornersOut` while a window is not maximized, and its
+ * `CornersIn` while it is. Pointed at, the corners push out or pull in. On a
+ * change they travel that way into the other icon: out to maximize, in to
+ * restore.
+ */
+export const AnimatedMaximizeIcon = ({ label, maximized, size }: Props) => (
+  <IconFrame label={label} size={size}>
+    {CORNERS_OUT_REGULAR.corners.map((d, index) => (
+      <IconPart
+        d={d}
+        direction={DIAGONALS[index]}
+        hoverStyles={maximized ? undefined : pushStyles}
+        key={d}
+        name="corner-out"
+        state={maximized ? "hidden" : "shown"}
+        stateStyles={outStyles}
+      />
+    ))}
+    {CORNERS_IN_REGULAR.corners.map((d, index) => (
+      <IconPart
+        d={d}
+        direction={DIAGONALS[index]}
+        hoverStyles={maximized ? pullStyles : undefined}
+        key={d}
+        name="corner-in"
+        state={maximized ? "shown" : "hidden"}
+        stateStyles={inStyles}
+      />
+    ))}
+  </IconFrame>
+);
+
+// Pointing out, they sit further out while hidden.
+const outStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform:
+      "translate(calc(var(--part-x) * 28px), calc(var(--part-y) * 28px))",
+    transition:
+      "opacity {durations.normal} {easings.in}, transform {durations.normal} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} {durations.faster}, transform {durations.slower} {easings.outBack} {durations.faster}",
+  },
+});
+
+// Pointing in, they sit further in while hidden.
+const inStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform:
+      "translate(calc(var(--part-x) * -28px), calc(var(--part-y) * -28px))",
+    transition:
+      "opacity {durations.normal} {easings.in}, transform {durations.normal} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} {durations.faster}, transform {durations.slower} {easings.outBack} {durations.faster}",
+  },
+});
+
+const pushStyles = css({
+  _controlHover: {
+    animation: "iconPartSpread {durations.slowest} {easings.in-out}",
+  },
+  "--spread": "14px",
+});
+
+const pullStyles = css({
+  _controlHover: {
+    animation: "iconPartSpread {durations.slowest} {easings.in-out}",
+  },
+  "--spread": "-10px",
+});

package/src/AnimatedMinusIcon/AnimatedMinusIcon.tsx

@@ -0,0 +1,34 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { MINUS_BOLD } from "../_icon/redrawn-parts";
+
+/** The bar draws in across, the opposite of the plus's arms reaching. */
+const DRAWS_IN = [-1, 0] as const;
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's bold `Minus`. Its bar draws in while the control it is in is
+ * pointed at.
+ */
+export const AnimatedMinusIcon = ({ label, size }: Props) => (
+  <IconFrame label={label} size={size}>
+    <IconPart
+      d={MINUS_BOLD.bar}
+      direction={DRAWS_IN}
+      hoverStyles={drawInStyles}
+      name="bar"
+    />
+  </IconFrame>
+);
+
+const drawInStyles = css({
+  _controlHover: {
+    animation: "iconArmReach {durations.slower} {easings.in-out}",
+  },
+});

package/src/AnimatedPlusIcon/AnimatedPlusIcon.tsx

@@ -0,0 +1,49 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { PLUS_BOLD, PLUS_REGULAR } from "../_icon/redrawn-parts";
+
+/** The way each arm reaches: across, then down. */
+const REACHES = [
+  [1, 0],
+  [0, 1],
+] as const;
+
+const ARMS = { bold: PLUS_BOLD.arms, regular: PLUS_REGULAR.arms };
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+  weight?: keyof typeof ARMS | undefined;
+};
+
+/**
+ * Phosphor's `Plus`. Its arms reach out, one after the other, while
+ * the control it is in is pointed at.
+ */
+export const AnimatedPlusIcon = ({
+  label,
+  size,
+  weight = "regular",
+}: Props) => (
+  <IconFrame label={label} size={size}>
+    {ARMS[weight].map((d, index) => (
+      <IconPart
+        d={d}
+        direction={REACHES[index]}
+        hoverStyles={reachStyles}
+        key={d}
+        name="arm"
+        order={index}
+      />
+    ))}
+  </IconFrame>
+);
+
+const reachStyles = css({
+  _controlHover: {
+    animation:
+      "iconArmReach {durations.slower} {easings.in-out} calc(var(--part-order) * {durations.faster}) both",
+  },
+});

package/src/AnimatedReloadIcon/AnimatedReloadIcon.tsx

@@ -0,0 +1,93 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { ARROW_CLOCKWISE_REGULAR } from "../_icon/phosphor-parts";
+import { X_REGULAR } from "../_icon/redrawn-parts";
+
+/** Which way each of the X's strokes swings. */
+const SWINGS = [
+  [-1, 0],
+  [1, 0],
+] as const;
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  /** Whether the page is loading: the icon then offers to stop it. */
+  loading: boolean;
+  size: number;
+};
+
+/**
+ * Phosphor's regular `ArrowClockwise`, to reload, and its `X` while the page
+ * loads, to stop. Pointed at, the arrow winds forward or the X snips. When
+ * loading starts the arrow spins away into the X, and it spins back once
+ * the page has loaded.
+ */
+export const AnimatedReloadIcon = ({ label, loading, size }: Props) => (
+  <IconFrame label={label} size={size}>
+    <IconPart
+      d={ARROW_CLOCKWISE_REGULAR.arrow}
+      hoverStyles={loading ? undefined : windStyles}
+      name="arrow"
+      state={loading ? "hidden" : "shown"}
+      stateStyles={arrowStyles}
+    />
+    {X_REGULAR.arms.map((d, index) => (
+      <IconPart
+        d={d}
+        direction={SWINGS[index]}
+        hoverStyles={loading ? snipStyles : undefined}
+        key={d}
+        name="arm"
+        order={index}
+        state={loading ? "shown" : "hidden"}
+        stateStyles={armStyles}
+      />
+    ))}
+  </IconFrame>
+);
+
+const arrowStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "rotate(180deg) scale(0.6)",
+    transition:
+      "opacity {durations.normal} {easings.in}, transform {durations.slow} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} {durations.faster}, transform {durations.slowest} {easings.outBack} {durations.faster}",
+  },
+});
+
+// Each stroke turns in from its own side.
+const armStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "rotate(calc(var(--part-x) * 45deg)) scale(0.5)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} {durations.fast}, transform {durations.slower} {easings.outBack} {durations.fast}",
+  },
+});
+
+const windStyles = css({
+  _controlHover: {
+    animation: "iconArrowWind {durations.slowest} {easings.in-out}",
+  },
+});
+
+const snipStyles = css({
+  _controlHover: {
+    animation: "iconArmSwing {durations.slower} {easings.in-out}",
+  },
+  "--swing": "14deg",
+});

package/src/AnimatedSlidersIcon/AnimatedSlidersIcon.tsx

@@ -0,0 +1,78 @@
+import { useId } from "react";
+
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { SLIDERS_REGULAR } from "../_icon/redrawn-parts";
+
+/** The way each knob slides: the top one along, the bottom one back. */
+const SLIDES = [
+  [1, 0],
+  [-1, 0],
+] as const;
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's regular `SlidersHorizontal`. Its knobs slide opposite ways and
+ * back while the control it is in is pointed at.
+ */
+export const AnimatedSlidersIcon = ({ label, size }: Props) => {
+  const maskId = useId();
+  return (
+    <IconFrame label={label} size={size}>
+      <defs>
+        {/* Hide each track where its knob sits, and move with the knob. */}
+        {SLIDERS_REGULAR.knobDisks.map((d, index) => (
+          <mask
+            height="320"
+            id={`${maskId}-${index.toString()}`}
+            key={d}
+            maskUnits="userSpaceOnUse"
+            width="320"
+            x="-32"
+            y="-32"
+          >
+            <rect fill="white" height="320" width="320" x="-32" y="-32" />
+            <g fill="black">
+              <IconPart
+                d={d}
+                direction={SLIDES[index]}
+                hoverStyles={slideStyles}
+                name="knob-disk"
+                order={index}
+              />
+            </g>
+          </mask>
+        ))}
+      </defs>
+      {SLIDERS_REGULAR.tracks.map((d, index) => (
+        <g key={d} mask={`url(#${maskId}-${index.toString()})`}>
+          <IconPart d={d} name="track" />
+        </g>
+      ))}
+      {SLIDERS_REGULAR.knobs.map((d, index) => (
+        <IconPart
+          d={d}
+          direction={SLIDES[index]}
+          hoverStyles={slideStyles}
+          key={d}
+          name="knob"
+          order={index}
+        />
+      ))}
+    </IconFrame>
+  );
+};
+
+const slideStyles = css({
+  _controlHover: {
+    animation:
+      "iconPartSpread {durations.slowest} {easings.in-out} calc(var(--part-order) * {durations.fastest}) both",
+  },
+  "--spread": "24px",
+});

package/src/AnimatedSquaresIcon/AnimatedSquaresIcon.tsx

@@ -1,4 +1,5 @@
 import { css } from "../../styled-system/css";
+import { DIAGONALS } from "../_icon/diagonals";
 import { IconFrame } from "../_icon/IconFrame";
 import { IconPart } from "../_icon/IconPart";
 import { SQUARES_REGULAR } from "../_icon/phosphor-parts";
@@ -18,11 +19,12 @@ export const AnimatedSquaresIcon = ({ label, size }: Props) => (
     {SQUARES_REGULAR.squares.map((d, index) => (
       <IconPart
         d={d}
+        direction={DIAGONALS[index]}
         hoverStyles={squareSpreadStyles}
         key={d}
         name="square"
         order={index}
-        stateStyles={SQUARE_STYLES[index]}
+        stateStyles={squarePressStyles}
       />
     ))}
   </IconFrame>
@@ -31,36 +33,16 @@ export const AnimatedSquaresIcon = ({ label, size }: Props) => (
 const squareSpreadStyles = css({
   _controlHover: {
     animation:
-      "iconSquareSpread {durations.slowest} {easings.in-out} calc(var(--part-order) * {durations.fastest} / 2)",
+      "iconPartSpread {durations.slowest} {easings.in-out} calc(var(--part-order) * {durations.fastest} / 2)",
   },
+  "--spread": "9px",
 });
 
-// Each square moves along its own diagonal, out while pointed at and in
-// while pressed: top start, top end, bottom start, bottom end. Physical,
-// since the icon does not mirror.
-const SQUARE_STYLES = [
-  css({
-    _controlActive: { transform: "translate(5px, 5px)" },
-    "--spread-x": "-9px",
-    "--spread-y": "-9px",
-    transition: "transform {durations.fast} {easings.out}",
-  }),
-  css({
-    _controlActive: { transform: "translate(-5px, 5px)" },
-    "--spread-x": "9px",
-    "--spread-y": "-9px",
-    transition: "transform {durations.fast} {easings.out}",
-  }),
-  css({
-    _controlActive: { transform: "translate(5px, -5px)" },
-    "--spread-x": "-9px",
-    "--spread-y": "9px",
-    transition: "transform {durations.fast} {easings.out}",
-  }),
-  css({
-    _controlActive: { transform: "translate(-5px, -5px)" },
-    "--spread-x": "9px",
-    "--spread-y": "9px",
-    transition: "transform {durations.fast} {easings.out}",
-  }),
-];
+// Each square moves in along its diagonal while pressed.
+const squarePressStyles = css({
+  _controlActive: {
+    transform:
+      "translate(calc(var(--part-x) * -5px), calc(var(--part-y) * -5px))",
+  },
+  transition: "transform {durations.fast} {easings.out}",
+});

package/src/_icon/IconPart.tsx

@@ -8,6 +8,11 @@ type Props = {
   /** The animation each cue plays. */
   cueStyles?: string | undefined;
   d: string;
+  /**
+   * The way it moves in motions that move parts apart, from -1 to 1 on each
+   * axis, as `--part-x` and `--part-y`.
+   */
+  direction?: readonly [number, number] | undefined;
   /** The animation played while the control the icon is in is pointed at. */
   hoverStyles?: string | undefined;
   /** What the part is, for styles and tests: "clapper", "arc". */
@@ -31,6 +36,7 @@ export const IconPart = ({
   cue = 0,
   cueStyles,
   d,
+  direction = [0, 0],
   hoverStyles,
   name,
   order = 0,
@@ -46,6 +52,8 @@ export const IconPart = ({
       {
         "--part-order": order,
         "--part-origin": `${origin[0].toString()}px ${origin[1].toString()}px`,
+        "--part-x": direction[0],
+        "--part-y": direction[1],
       } as CSSProperties
     }
   >

package/src/_icon/diagonals.ts

@@ -0,0 +1,11 @@
+/**
+ * The ways four corner parts move apart, as `IconPart` directions: top
+ * start, top end, bottom start, bottom end. Physical, since icons do not
+ * mirror.
+ */
+export const DIAGONALS = [
+  [-1, -1],
+  [1, -1],
+  [-1, 1],
+  [1, 1],
+] as const;

package/src/_icon/icon-keyframes.ts

@@ -13,6 +13,25 @@ export const iconKeyframes = {
     "0%, 100%": { opacity: "0.25" },
     "50%": { opacity: "1" },
   },
+  // A plus's arm reaches out along its direction, and back.
+  iconArmReach: {
+    "0%, 100%": { transform: "none" },
+    "50%": {
+      transform:
+        "scale(calc(1 + var(--part-x) * 0.18), calc(1 + var(--part-y) * 0.18))",
+    },
+  },
+  // An arm swings `--swing` the way its direction says, and back: an X
+  // snipping, a caret's point sharpening.
+  iconArmSwing: {
+    "0%, 100%": { transform: "none" },
+    "50%": { transform: "rotate(calc(var(--part-x) * var(--swing)))" },
+  },
+  // A reload arrow winds forward, and back.
+  iconArrowWind: {
+    "0%, 100%": { transform: "none" },
+    "50%": { transform: "rotate(40deg)" },
+  },
   // The bell's clapper, lagging the swing.
   iconBellClapper: {
     "0%, 100%": { transform: "none" },
@@ -73,11 +92,22 @@ export const iconKeyframes = {
     "0%, 100%": { opacity: "1" },
     "50%": { opacity: "0.25" },
   },
+  // A download's arrow drops into its tray.
+  iconDownloadDrop: {
+    "0%": { opacity: "0", transform: "translateY(-60px)" },
+    "70%": { opacity: "1", transform: "translateY(10px)" },
+    "100%": { opacity: "1", transform: "none" },
+  },
   // The gear turns one tooth. Its six teeth make the end look like the start.
   iconGearTurn: {
     "0%": { transform: "none" },
     "100%": { transform: "rotate(60deg)" },
   },
+  // A lock's keyhole swells as its shackle shuts.
+  iconKeyholePulse: {
+    "0%, 100%": { transform: "none" },
+    "50%": { transform: "scale(1.35)" },
+  },
   // A key presses down.
   iconKeyPress: {
     "0%, 100%": { transform: "none" },
@@ -103,6 +133,15 @@ export const iconKeyframes = {
     "35%": { transform: "rotate(-12deg)" },
     "70%": { transform: "rotate(5deg)" },
   },
+  // A part moves `--spread` out along its direction (see `IconPart`), and
+  // back.
+  iconPartSpread: {
+    "0%, 100%": { transform: "none" },
+    "50%": {
+      transform:
+        "translate(calc(var(--part-x) * var(--spread)), calc(var(--part-y) * var(--spread)))",
+    },
+  },
   // The eye's pupil looks one way, then the other.
   iconPupilGlance: {
     "0%, 100%": { transform: "none" },
@@ -123,10 +162,21 @@ export const iconKeyframes = {
     "0%, 100%": { transform: "none" },
     "50%": { transform: "scale(0.88)" },
   },
-  // A launcher square moves out along `--spread-x` and `--spread-y`, and back.
-  iconSquareSpread: {
+  // A lock's shackle lifts a little, and back.
+  iconShackleLift: {
+    "0%, 100%": { transform: "none" },
+    "50%": { transform: "translateY(-14px)" },
+  },
+  // A lock's shackle snaps shut from open.
+  iconShackleShut: {
+    "0%": { transform: "translateY(-30px)" },
+    "70%": { transform: "translateY(4px)" },
+    "100%": { transform: "none" },
+  },
+  // A download's tray gives under the arrow landing in it.
+  iconTrayGive: {
     "0%, 100%": { transform: "none" },
-    "50%": { transform: "translate(var(--spread-x), var(--spread-y))" },
+    "70%": { transform: "scaleY(0.86)" },
   },
   // A speaker wave pulls in, for quieter.
   iconWavePull: {

package/src/_icon/phosphor-parts.ts

@@ -168,3 +168,49 @@ export const CHECK_BOLD = {
   check:
     "M232.49 80.49L104.49 208.49A12 12 0 0 1 87.49 208.49L31.49 152.49A12 12 0 1 1 48.49 135.49L96 183 215.51 63.51A12 12 0 0 1 232.51 80.51Z",
 } as const;
+
+/** CornersOut regular; top start, top end, bottom start, bottom end. */
+export const CORNERS_OUT_REGULAR = {
+  corners: [
+    "M88 40H48A8 8 0 0 0 40 48V88A8 8 0 0 0 56 88V56H88A8 8 0 0 0 88 40Z",
+    "M216 48V88A8 8 0 0 1 200 88V56H168A8 8 0 0 1 168 40H208A8 8 0 0 1 216 48Z",
+    "M88 200H56V168A8 8 0 0 0 40 168V208A8 8 0 0 0 48 216H88A8 8 0 0 0 88 200Z",
+    "M208 160A8 8 0 0 0 200 168V200H168A8 8 0 0 0 168 216H208A8 8 0 0 0 216 208V168A8 8 0 0 0 208 160Z",
+  ],
+} as const;
+
+/** CornersIn regular; top start, top end, bottom start, bottom end. */
+export const CORNERS_IN_REGULAR = {
+  corners: [
+    "M96 40A8 8 0 0 0 88 48V88H48A8 8 0 0 0 48 104H96A8 8 0 0 0 104 96V48A8 8 0 0 0 96 40Z",
+    "M152 96V48A8 8 0 0 1 168 48V88H208A8 8 0 0 1 208 104H160A8 8 0 0 1 152 96Z",
+    "M96 152H48A8 8 0 0 0 48 168H88V208A8 8 0 0 0 104 208V160A8 8 0 0 0 96 152Z",
+    "M208 152H160A8 8 0 0 0 152 160V208A8 8 0 0 0 168 208V168H208A8 8 0 0 0 208 152Z",
+  ],
+} as const;
+
+/** Rows regular; top first. */
+export const ROWS_REGULAR = {
+  rows: [
+    "M208 48H48A16 16 0 0 0 32 64V104A16 16 0 0 0 48 120H208A16 16 0 0 0 224 104V64A16 16 0 0 0 208 48ZM208 104H48V64H208V104Z",
+    "M208 136H48A16 16 0 0 0 32 152V192A16 16 0 0 0 48 208H208A16 16 0 0 0 224 192V152A16 16 0 0 0 208 136ZM208 192H48V152H208V192Z",
+  ],
+} as const;
+
+/** Tabs regular. */
+export const TABS_REGULAR = {
+  tabs: "M255.66 165.7H255.66V165.7A0.24 0.24 0 0 0 255.66 165.62L233.37 91.4A15.89 15.89 0 0 0 218.05 80H208A8 8 0 0 0 208 96H218.05L237.25 160H206L185.37 91.4A15.89 15.89 0 0 0 170.05 80H160A8 8 0 0 0 160 96H170.05L189.25 160H158L137.37 91.4A15.89 15.89 0 0 0 122.05 80H38A15.89 15.89 0 0 0 22.63 91.4L0.37 165.6 0.37 165.65V165.65S0.37 165.7 0.37 165.73A8.1 8.1 0 0 0 0 168 8 8 0 0 0 8 176H248A8 8 0 0 0 255.66 165.7ZM38 96H122.1L141.3 160H18.75Z",
+} as const;
+
+/** ArrowClockwise regular. */
+export const ARROW_CLOCKWISE_REGULAR = {
+  arrow:
+    "M240 56V104A8 8 0 0 1 232 112H184A8 8 0 0 1 184 96H211.4L184.81 71.64 184.56 71.4A80 80 0 1 0 182.89 186.18 8 8 0 0 1 193.89 197.81 95.44 95.44 0 0 1 128 224H126.68A96 96 0 1 1 195.75 60L224 85.8V56A8 8 0 1 1 240 56Z",
+} as const;
+
+/** DownloadSimple regular. */
+export const DOWNLOAD_REGULAR = {
+  arrow:
+    "M122.34 149.66A8 8 0 0 0 133.66 149.66L173.66 109.66A8 8 0 0 0 162.34 98.34L136 124.69V32A8 8 0 0 0 120 32V124.69L93.66 98.34A8 8 0 0 0 82.34 109.66Z",
+  tray: "M224 144V208A8 8 0 0 1 216 216H40A8 8 0 0 1 32 208V144A8 8 0 0 1 48 144V200H208V144A8 8 0 0 1 224 144Z",
+} as const;

package/src/_icon/redrawn-parts.ts

@@ -0,0 +1,128 @@
+/**
+ * Phosphor icons whose moving parts Phosphor merges into one outline, drawn
+ * again as separate parts that cover the same ground at rest: each is the
+ * same strokes and boxes, so the outline the parts join into is Phosphor's.
+ * As in Phosphor's paths, outlines run counterclockwise and holes clockwise.
+ */
+
+/** X regular: its two 16-wide strokes, top start first. */
+export const X_REGULAR = {
+  arms: [
+    "M61.66 50.34L205.66 194.34A8 8 0 0 1 194.34 205.66L50.34 61.66A8 8 0 0 1 61.66 50.34Z",
+    "M194.34 50.34A8 8 0 0 1 205.66 61.66L61.66 205.66A8 8 0 0 1 50.34 194.34Z",
+  ],
+} as const;
+
+/** Plus regular: its two 16-wide strokes, across first. */
+export const PLUS_REGULAR = {
+  arms: [
+    "M40 120H216A8 8 0 0 1 216 136H40A8 8 0 0 1 40 120Z",
+    "M120 40A8 8 0 0 1 136 40V216A8 8 0 0 1 120 216Z",
+  ],
+} as const;
+
+/**
+ * Browsers regular: the window behind, whole, the window in front, and the
+ * front window's outline, which masks the one behind where it overlaps.
+ */
+export const BROWSERS_REGULAR = {
+  back: "M216 40H72A16 16 0 0 0 56 56V168A16 16 0 0 0 72 184H216A16 16 0 0 0 232 168V56A16 16 0 0 0 216 40ZM72 56H216V168H72Z",
+  front:
+    "M184 72H40A16 16 0 0 0 24 88V200A16 16 0 0 0 40 216H184A16 16 0 0 0 200 200V88A16 16 0 0 0 184 72ZM184 88V104H40V88ZM184 200H40V120H184V200Z",
+  frontOutline:
+    "M184 72H40A16 16 0 0 0 24 88V200A16 16 0 0 0 40 216H184A16 16 0 0 0 200 200V88A16 16 0 0 0 184 72Z",
+} as const;
+
+/**
+ * SquareSplitHorizontal and SquareSplitVertical regular: their shared frame,
+ * and the divider each draws inside it.
+ */
+export const SQUARE_SPLIT_REGULAR = {
+  frame:
+    "M200 40H56A16 16 0 0 0 40 56V200A16 16 0 0 0 56 216H200A16 16 0 0 0 216 200V56A16 16 0 0 0 200 40ZM56 56H200V200H56Z",
+  horizontal: "M120 56H136V200H120Z",
+  vertical: "M56 120H200V136H56Z",
+} as const;
+
+/**
+ * CaretLeft, CaretUp, CaretRight and CaretDown regular: their two 16-wide
+ * strokes, the one that turns clockwise to meet the other first, and the tip
+ * they meet at.
+ */
+export const CARET_REGULAR = {
+  down: {
+    arms: [
+      "M42.34 101.66L122.34 181.66A8 8 0 0 0 133.66 170.34L53.66 90.34A8 8 0 0 0 42.34 101.66Z",
+      "M133.66 181.66L213.66 101.66A8 8 0 0 0 202.34 90.34L122.34 170.34A8 8 0 0 0 133.66 181.66Z",
+    ],
+    tip: [128, 176],
+  },
+  left: {
+    arms: [
+      "M154.34 42.34L74.34 122.34A8 8 0 0 0 85.66 133.66L165.66 53.66A8 8 0 0 0 154.34 42.34Z",
+      "M74.34 133.66L154.34 213.66A8 8 0 0 0 165.66 202.34L85.66 122.34A8 8 0 0 0 74.34 133.66Z",
+    ],
+    tip: [80, 128],
+  },
+  right: {
+    arms: [
+      "M101.66 213.66L181.66 133.66A8 8 0 0 0 170.34 122.34L90.34 202.34A8 8 0 0 0 101.66 213.66Z",
+      "M181.66 122.34L101.66 42.34A8 8 0 0 0 90.34 53.66L170.34 133.66A8 8 0 0 0 181.66 122.34Z",
+    ],
+    tip: [176, 128],
+  },
+  up: {
+    arms: [
+      "M213.66 154.34L133.66 74.34A8 8 0 0 0 122.34 85.66L202.34 165.66A8 8 0 0 0 213.66 154.34Z",
+      "M122.34 74.34L42.34 154.34A8 8 0 0 0 53.66 165.66L133.66 85.66A8 8 0 0 0 122.34 74.34Z",
+    ],
+    tip: [128, 80],
+  },
+} as const;
+
+/** X bold: its two 24-wide strokes, top start first. */
+export const X_BOLD = {
+  arms: [
+    "M47.51 64.49L191.51 208.49A12 12 0 0 0 208.49 191.51L64.49 47.51A12 12 0 0 0 47.51 64.49Z",
+    "M191.51 47.51L47.51 191.51A12 12 0 0 0 64.49 208.49L208.49 64.49A12 12 0 0 0 191.51 47.51Z",
+  ],
+} as const;
+
+/** Plus bold: its two 24-wide strokes, across first. */
+export const PLUS_BOLD = {
+  arms: [
+    "M40 140L216 140A12 12 0 0 0 216 116L40 116A12 12 0 0 0 40 140Z",
+    "M116 40L116 216A12 12 0 0 0 140 216L140 40A12 12 0 0 0 116 40Z",
+  ],
+} as const;
+
+/** Minus bold: its one 24-wide stroke. */
+export const MINUS_BOLD = {
+  bar: "M40 140L216 140A12 12 0 0 0 216 116L40 116A12 12 0 0 0 40 140Z",
+} as const;
+
+/** Lock regular: its body, its shackle and its keyhole. */
+export const LOCK_REGULAR = {
+  body: "M208 80H48A16 16 0 0 0 32 96V208A16 16 0 0 0 48 224H208A16 16 0 0 0 224 208V96A16 16 0 0 0 208 80ZM208 208H48V96H208V208Z",
+  keyhole: "M140 152A12 12 0 1 1 128 140 12 12 0 0 1 140 152Z",
+  shackle: "M80 80V56A48 48 0 0 1 176 56V80H160V56A32 32 0 0 0 96 56V80Z",
+} as const;
+
+/**
+ * SlidersHorizontal regular: its tracks and knobs, top first, and each
+ * knob's disk, which masks its track where the knob sits.
+ */
+export const SLIDERS_REGULAR = {
+  knobDisks: [
+    "M136 80A32 32 0 1 0 72 80A32 32 0 1 0 136 80Z",
+    "M200 176A32 32 0 1 0 136 176A32 32 0 1 0 200 176Z",
+  ],
+  knobs: [
+    "M136 80A32 32 0 1 0 72 80A32 32 0 1 0 136 80ZM120 80A16 16 0 1 1 88 80A16 16 0 1 1 120 80Z",
+    "M200 176A32 32 0 1 0 136 176A32 32 0 1 0 200 176ZM184 176A16 16 0 1 1 152 176A16 16 0 1 1 184 176Z",
+  ],
+  tracks: [
+    "M40 88L216 88A8 8 0 0 0 216 72L40 72A8 8 0 0 0 40 88Z",
+    "M40 184L216 184A8 8 0 0 0 216 168L40 168A8 8 0 0 0 40 184Z",
+  ],
+} as const;

package/styled-system/types/prop-type.d.ts

@@ -169,7 +169,7 @@ export interface UtilityValues {
 	transitionProperty: "common" | "colors" | "size" | "position" | "background";
 	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
-	animationName: "ping" | "bounce" | "iconArcRipple" | "iconArcSearch" | "iconBellClapper" | "iconBellNudge" | "iconBellSwing" | "iconBoltStrike" | "iconBubbleTip" | "iconCapsuleBob" | "iconCheckDraw" | "iconCoreIn" | "iconCoreOut" | "iconDotBlink" | "iconGearTurn" | "iconKeyPress" | "iconLineWrite" | "iconMoonIn" | "iconMoonOut" | "iconMoonRock" | "iconPupilGlance" | "iconRayIn" | "iconRayOut" | "iconRayPulse" | "iconSquareSpread" | "iconWavePull" | "iconWavePush" | "levelToastEnter" | "levelToastHold" | "levelToastHoldAgain" | "noticeShown" | "pulse" | "spin" | "themeSwipeFromBottom" | "themeSwipeFromTop" | "toastCountdown";
+	animationName: "ping" | "bounce" | "iconArcRipple" | "iconArcSearch" | "iconArmReach" | "iconArmSwing" | "iconArrowWind" | "iconBellClapper" | "iconBellNudge" | "iconBellSwing" | "iconBoltStrike" | "iconBubbleTip" | "iconCapsuleBob" | "iconCheckDraw" | "iconCoreIn" | "iconCoreOut" | "iconDotBlink" | "iconDownloadDrop" | "iconGearTurn" | "iconKeyholePulse" | "iconKeyPress" | "iconLineWrite" | "iconMoonIn" | "iconMoonOut" | "iconMoonRock" | "iconPartSpread" | "iconPupilGlance" | "iconRayIn" | "iconRayOut" | "iconRayPulse" | "iconShackleLift" | "iconShackleShut" | "iconTrayGive" | "iconWavePull" | "iconWavePush" | "levelToastEnter" | "levelToastHold" | "levelToastHoldAgain" | "noticeShown" | "pulse" | "spin" | "themeSwipeFromBottom" | "themeSwipeFromTop" | "toastCountdown";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];