@pantheon-systems/pds-toolkit-react 2.0.0-beta.4 → 2.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/components/StatusChecker/StatusChecker.d.ts +8 -1
  2. package/dist/components/buttons/Button/Button.d.ts +11 -1
  3. package/dist/components/buttons/ClipboardButton/ClipboardButton.d.ts +6 -1
  4. package/dist/components/buttons/IconButton/IconButton.d.ts +1 -1
  5. package/dist/components/buttons/SSOButton/SSOButton.d.ts +7 -1
  6. package/dist/components/buttons/UtilityButton/UtilityButton.d.ts +10 -2
  7. package/dist/components/icons/Icon/generated-icon-data.d.ts +1 -1
  8. package/dist/components/inputs/WorkspacePicker/WorkspacePicker.d.ts +90 -0
  9. package/dist/css/component-css/pds-button.css +2 -2
  10. package/dist/css/component-css/pds-index.css +6 -6
  11. package/dist/css/component-css/pds-status-checker.css +1 -1
  12. package/dist/css/component-css/pds-table.css +3 -3
  13. package/dist/css/component-css/pds-tags-input.css +1 -1
  14. package/dist/css/component-css/pds-workspace-picker.css +1 -0
  15. package/dist/css/pds-components.css +6 -6
  16. package/dist/css/pds-core.css +1 -1
  17. package/dist/index.css +1 -1
  18. package/dist/index.d.ts +1 -0
  19. package/dist/index.js +1207 -1145
  20. package/dist/index.js.map +1 -1
  21. package/dist/index.source.d.ts +1 -0
  22. package/package.json +3 -2
package/dist/components/StatusChecker/StatusChecker.d.ts CHANGED
@@ -13,8 +13,15 @@ export interface StatusCheckerProps extends ComponentPropsWithoutRef<'div'> {
13
13
  className?: string;
14
14
  /**
15
15
  * Custom width in rems for the component. This will override the default.
16
+ * Ignored when `displayType` is `'icon-button'`.
16
17
  */
17
18
  componentWidth?: number;
19
+ /**
20
+ * `'icon-button'` renders a bordered, icon-only square matching
21
+ * `IconButton`. The label stays in the DOM, visually hidden, for the
22
+ * live region.
23
+ */
24
+ displayType?: 'label' | 'icon-button';
18
25
  /**
19
26
  * Internationalization props for labels.
20
27
  */
@@ -38,4 +45,4 @@ export interface StatusCheckerProps extends ComponentPropsWithoutRef<'div'> {
38
45
  */
39
46
  state?: StatusCheckerState;
40
47
  }
41
- export declare const StatusChecker: ({ alignment, className, componentWidth, labelStrings, lastChecked, onCheck, state, ...props }: StatusCheckerProps) => import("react/jsx-runtime").JSX.Element;
48
+ export declare const StatusChecker: ({ alignment, className, componentWidth, displayType, labelStrings, lastChecked, onCheck, state, ...props }: StatusCheckerProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/buttons/Button/Button.d.ts CHANGED
@@ -21,6 +21,14 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
21
21
  * Is the button disabled?
22
22
  */
23
23
  disabled?: boolean;
24
+ /**
25
+ * Whether `isWorking` disables the button. Defaults to `true`, matching the
26
+ * one-off "action in flight" use case (e.g. a submit button mid-request).
27
+ * Set to `false` for an ongoing, interactive working state — such as a
28
+ * toggle that starts/stops a live process and must stay clickable while
29
+ * it runs.
30
+ */
31
+ disableWhenWorking?: boolean;
24
32
  /**
25
33
  * How the button is displayed.
26
34
  */
@@ -42,7 +50,9 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
42
50
  */
43
51
  isSplitButton?: boolean;
44
52
  /**
45
- * Is the button in a working state?
53
+ * Is the button in a working state? Renders a leading spinner (colored and
54
+ * sized to match the button) while keeping the label and icon visible.
55
+ * Disables the button unless `disableWhenWorking` is set to `false`.
46
56
  */
47
57
  isWorking?: boolean;
48
58
  /**
package/dist/components/buttons/ClipboardButton/ClipboardButton.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ComponentPropsWithoutRef } from 'react';
2
+ import { IconButtonSize } from '../../buttons/IconButton/IconButton';
2
3
  /**
3
4
  * Prop types for ClipboardButton
4
5
  */
@@ -23,6 +24,10 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
23
24
  * Show a visible border around the button.
24
25
  */
25
26
  hasBorder?: boolean;
27
+ /**
28
+ * Which size of button to render.
29
+ */
30
+ size?: IconButtonSize;
26
31
  /**
27
32
  * Which variant of button to render.
28
33
  */
@@ -31,4 +36,4 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
31
36
  /**
32
37
  * ClipboardButton UI component
33
38
  */
34
- export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, hasBorder, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;
39
+ export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, hasBorder, size, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/buttons/IconButton/IconButton.d.ts CHANGED
@@ -2,7 +2,7 @@ import React, { ComponentPropsWithoutRef, MouseEvent } from 'react';
2
2
  import { ButtonType } from '../../../libs/types/custom-types';
3
3
  import { PDSIcon } from '../../icons/Icon/Icon';
4
4
  import './icon-button.css';
5
- type IconButtonSize = 'xs' | 's' | 'm';
5
+ export type IconButtonSize = 'xs' | 's' | 'm';
6
6
  interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
7
7
  /**
8
8
  * Aria-label attribute.
package/dist/components/buttons/SSOButton/SSOButton.d.ts CHANGED
@@ -16,6 +16,12 @@ interface SSOButtonProps extends ComponentPropsWithoutRef<'button'> {
16
16
  * Is the button disabled?
17
17
  */
18
18
  disabled?: boolean;
19
+ /**
20
+ * Whether `isWorking` disables the button. Defaults to `true`. Set to
21
+ * `false` for an ongoing, interactive working state that must stay
22
+ * clickable while it runs.
23
+ */
24
+ disableWhenWorking?: boolean;
19
25
  /**
20
26
  * Is the button in a working state?
21
27
  */
@@ -45,5 +51,5 @@ interface SSOButtonProps extends ComponentPropsWithoutRef<'button'> {
45
51
  /**
46
52
  * A Component used to render an SSO Button
47
53
  */
48
- export declare const SSOButton: ({ buttonType, className, disabled, isWorking, label, onClick, platform, size, tooltipText, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;
54
+ export declare const SSOButton: ({ buttonType, className, disabled, disableWhenWorking, isWorking, label, onClick, platform, size, tooltipText, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;
49
55
  export {};
package/dist/components/buttons/UtilityButton/UtilityButton.d.ts CHANGED
@@ -17,6 +17,12 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
17
17
  * Is the button disabled?
18
18
  */
19
19
  disabled?: boolean;
20
+ /**
21
+ * Whether `isWorking` disables the button. Defaults to `true`. Set to
22
+ * `false` for an ongoing, interactive working state that must stay
23
+ * clickable while it runs.
24
+ */
25
+ disableWhenWorking?: boolean;
20
26
  /**
21
27
  * Should the button have a border?
22
28
  */
@@ -42,7 +48,9 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
42
48
  */
43
49
  isMonospace?: boolean;
44
50
  /**
45
- * Is the button in the process of performing a task and should be disabled?
51
+ * Is the button in the process of performing a task? Renders a spinner in
52
+ * place of the icon, and disables the button unless `disableWhenWorking`
53
+ * is set to `false`.
46
54
  */
47
55
  isWorking?: boolean;
48
56
  /**
@@ -67,4 +75,4 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
67
75
  /**
68
76
  * UtilityButton UI component
69
77
  */
70
- export declare const UtilityButton: ({ buttonProps, className, disabled, hasBorder, iconName, iconPosition, isCritical, isLoading, isMonospace, isWorking, label, linkContent, onClick, tooltipText, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
78
+ export declare const UtilityButton: ({ buttonProps, className, disabled, disableWhenWorking, hasBorder, iconName, iconPosition, isCritical, isLoading, isMonospace, isWorking, label, linkContent, onClick, tooltipText, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/icons/Icon/generated-icon-data.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Generated by: npm run generate:icon-data
5
5
  * Source: icon-registry.ts + Font Awesome packages + custom-icons.tsx
6
- * Generated: 2026-09-30T18:21:27.655Z
6
+ * Generated: 2026-10-02T19:35:35.857Z
7
7
  */
8
8
  import { customIcons } from './custom-icons';
9
9
  export { customIcons };
package/dist/components/inputs/WorkspacePicker/WorkspacePicker.d.ts ADDED
@@ -0,0 +1,90 @@
1
+ import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import type { WorkspaceSelectorItem } from '../../navigation/WorkspaceSelector/WorkspaceSelector';
3
+ import './workspace-picker.css';
4
+ /**
5
+ * Prop types for WorkspacePicker
6
+ */
7
+ export interface WorkspacePickerProps extends ComponentPropsWithoutRef<'div'> {
8
+ /**
9
+ * Accessible label for the `<nav>` landmark, distinct from `label` (the
10
+ * visible field legend). Optional since the legend already names the
11
+ * picker as a whole -- set this only if the nav landmark itself needs a
12
+ * different name.
13
+ */
14
+ ariaLabel?: string;
15
+ /**
16
+ * Additional class names
17
+ */
18
+ className?: string;
19
+ /**
20
+ * Label for the filter input.
21
+ */
22
+ filterLabel?: string;
23
+ /**
24
+ * Placeholder text for the filter input.
25
+ */
26
+ filterPlaceholder?: string;
27
+ /**
28
+ * Unique ID for the picker.
29
+ */
30
+ id: string;
31
+ /**
32
+ * Maximum width of the input field in pixels. The input fills its
33
+ * container up to this cap, then shrinks below it rather than
34
+ * overflowing in a tight flex/grid layout. When omitted, the input
35
+ * fills its container with no cap.
36
+ */
37
+ inputWidth?: number;
38
+ /**
39
+ * Minimum width of the input field in pixels, in a tight flex/grid layout
40
+ * that wraps (e.g. flexWrap="wrap"). Has no effect without inputWidth,
41
+ * and no effect on its own without a wrapping layout.
42
+ */
43
+ inputWidthMin?: number;
44
+ /**
45
+ * Label for the picker. Will be rendered as the fieldset legend.
46
+ */
47
+ label: string;
48
+ /**
49
+ * Input message. Used to provide supplemental text. Will be displayed
50
+ * below the picker.
51
+ */
52
+ message?: string | ReactNode;
53
+ /**
54
+ * Minimum number of items before the filter input is shown.
55
+ * @default 8
56
+ */
57
+ minFilterItems?: number;
58
+ /**
59
+ * Text to display when no results are found.
60
+ */
61
+ noResultsText?: string;
62
+ /**
63
+ * Called when a workspace without its own `workspaceLink` is selected
64
+ * (e.g. picking a workspace as a value rather than navigating to it).
65
+ */
66
+ onSelectWorkspace?: (workspace: WorkspaceSelectorItem) => void;
67
+ /**
68
+ * Should the label (legend) be visible? If false, it will render for
69
+ * screen readers only.
70
+ * @default true
71
+ */
72
+ showLabel?: boolean;
73
+ /**
74
+ * Number of whole item rows visible before the list scrolls.
75
+ * @default 6
76
+ */
77
+ visibleItemCount?: number;
78
+ /**
79
+ * List of all workspaces for a user.
80
+ */
81
+ workspaceList?: WorkspaceSelectorItem[];
82
+ }
83
+ /**
84
+ * WorkspacePicker UI component. A standalone search + selectable list of
85
+ * workspaces, for use as an input (e.g. choosing a workspace before creating
86
+ * a site) rather than navigation -- unlike `WorkspaceSelector`'s dropdown
87
+ * menu or `WorkspaceSelectorPanel`'s embedded display, both of which select
88
+ * a workspace by linking to it.
89
+ */
90
+ export declare const WorkspacePicker: ({ ariaLabel, className, filterLabel, filterPlaceholder, id, inputWidth, inputWidthMin, label, message, minFilterItems, noResultsText, onSelectWorkspace, showLabel, visibleItemCount, workspaceList, ...props }: WorkspacePickerProps) => import("react/jsx-runtime").JSX.Element;
package/dist/css/component-css/pds-button.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --pds-color-button-primary-background-hover
3
3
  );--button-background-color-active:var(
4
4
  --pds-color-button-primary-background-active
5
- );--button-foreground-color:var(--pds-color-button-primary-foreground);--button-foreground-color-hover:var(--button-foreground-color);--button-border-color:var(--pds-color-button-primary-background-default);--button-border-color-hover:var(--pds-color-button-primary-background-hover);--button-border-color-active:var(--button-background-color-active);--button-box-shadow-active:var(--pds-elevation-button-primary-active);align-items:center;background-color:var(--button-background-color);border-color:var(--button-border-color);border-radius:var(--pds-border-radius-button);border-style:solid;border-width:var(--pds-border-width-default);color:var(--button-foreground-color);cursor:pointer;display:inline-flex;font-family:var(--pds-typography-ff-default);font-size:var(--button-font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--button-gap-inline);height:var(--button-height);justify-content:center;line-height:1;max-height:var(--button-height);padding-block:0;padding-inline:var(--button-padding-inline);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button:disabled{cursor:not-allowed;opacity:40%}.pds-button:hover:enabled,a.pds-button:hover{--button-background-color:var(--button-background-color-hover);--button-border-color:var(--button-border-color-hover);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:active:enabled,a.pds-button:active{--button-background-color:var(--button-background-color-active);--button-border-color:var(--button-border-color-active);box-shadow:var(--button-box-shadow-active);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px;transition:var(--pds-animation-transition-focus)}.pds-button__icon{flex-shrink:0}.pds-button--l .pds-button__icon:not(.pds-status-dot){height:var(--button-font-size);width:var(--button-font-size)}.pds-button__tally{flex-shrink:0}.pds-button--highlight .pds-button__tally,.pds-button--primary .pds-button__tally{box-shadow:0 0 0 1px hsla(0,0%,100%,.75)}.pds-button--xs .pds-status-dot{--dot-size:8px}.pds-button--s .pds-status-dot{--dot-size:10px}.pds-button--m .pds-status-dot{--dot-size:12px;margin-inline-end:2px}.pds-button--l .pds-status-dot{--dot-size:14px;margin-inline-end:4px}.pds-button--full-width{width:100%}.pds-button--xs{--button-font-size:var(--pds-typography-size-xs);--button-height:var(--pds-spacing-button-height-xs);--button-padding-inline:var(--pds-spacing-button-padding-inline-xs);--button-gap-inline:var(--pds-spacing-button-gap-inline-xs)}.pds-button--s{--button-font-size:var(--pds-typography-size-s);--button-height:var(--pds-spacing-button-height-s);--button-padding-inline:var(--pds-spacing-button-padding-inline-s);-button-gap-inline:var(--pds-spacing-button-gap-inline-s)}.pds-button--m{--button-font-size:var(--pds-typography-size-m);--button-height:var(--pds-spacing-button-height-m);--button-padding-inline:var(--pds-spacing-button-padding-inline-m);--button-gap-inline:var(--pds-spacing-button-gap-inline-m)}.pds-button--l{--button-font-size:var(--pds-typography-size-l);--button-height:var(--pds-spacing-button-height-l);--button-padding-inline:var(--pds-spacing-button-padding-inline-l);--button-gap-inline:var(--pds-spacing-button-gap-inline-l)}.pds-button--secondary{--button-background-color:var(
5
+ );--button-foreground-color:var(--pds-color-button-primary-foreground);--button-foreground-color-hover:var(--button-foreground-color);--button-border-color:var(--pds-color-button-primary-background-default);--button-border-color-hover:var(--pds-color-button-primary-background-hover);--button-border-color-active:var(--button-background-color-active);--button-box-shadow-active:var(--pds-elevation-button-primary-active);align-items:center;background-color:var(--button-background-color);border-color:var(--button-border-color);border-radius:var(--pds-border-radius-button);border-style:solid;border-width:var(--pds-border-width-default);color:var(--button-foreground-color);cursor:pointer;display:inline-flex;font-family:var(--pds-typography-ff-default);font-size:var(--button-font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--button-gap-inline);height:var(--button-height);justify-content:center;line-height:1;max-height:var(--button-height);padding-block:0;padding-inline:var(--button-padding-inline);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button:has(>.pds-button__working-indicator){padding-inline-start:calc(var(--button-padding-inline) - var(--pds-spacing-4xs))}.pds-button__working-indicator{margin-inline-end:var(--pds-spacing-4xs)}.pds-button:disabled{cursor:not-allowed;opacity:40%}.pds-button:hover:enabled,a.pds-button:hover{--button-background-color:var(--button-background-color-hover);--button-border-color:var(--button-border-color-hover);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:active:enabled,a.pds-button:active{--button-background-color:var(--button-background-color-active);--button-border-color:var(--button-border-color-active);box-shadow:var(--button-box-shadow-active);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px;transition:var(--pds-animation-transition-focus)}.pds-button__icon{flex-shrink:0}.pds-button--l .pds-button__icon:not(.pds-status-dot){height:var(--button-font-size);width:var(--button-font-size)}.pds-button__tally{flex-shrink:0}.pds-button--highlight .pds-button__tally,.pds-button--primary .pds-button__tally{box-shadow:0 0 0 1px hsla(0,0%,100%,.75)}.pds-button--xs .pds-status-dot{--dot-size:8px}.pds-button--s .pds-status-dot{--dot-size:10px}.pds-button--m .pds-status-dot{--dot-size:12px;margin-inline-end:2px}.pds-button--l .pds-status-dot{--dot-size:14px;margin-inline-end:4px}.pds-button--full-width{width:100%}.pds-button--xs{--button-font-size:var(--pds-typography-size-xs);--button-height:var(--pds-spacing-button-height-xs);--button-padding-inline:var(--pds-spacing-button-padding-inline-xs);--button-gap-inline:var(--pds-spacing-button-gap-inline-xs)}.pds-button--s{--button-font-size:var(--pds-typography-size-s);--button-height:var(--pds-spacing-button-height-s);--button-padding-inline:var(--pds-spacing-button-padding-inline-s);-button-gap-inline:var(--pds-spacing-button-gap-inline-s)}.pds-button--m{--button-font-size:var(--pds-typography-size-m);--button-height:var(--pds-spacing-button-height-m);--button-padding-inline:var(--pds-spacing-button-padding-inline-m);--button-gap-inline:var(--pds-spacing-button-gap-inline-m)}.pds-button--l{--button-font-size:var(--pds-typography-size-l);--button-height:var(--pds-spacing-button-height-l);--button-padding-inline:var(--pds-spacing-button-padding-inline-l);--button-gap-inline:var(--pds-spacing-button-gap-inline-l)}.pds-button--secondary{--button-background-color:var(
6
6
  --pds-color-button-secondary-background-default
7
7
  );--button-background-color-hover:var(
8
8
  --pds-color-button-secondary-background-hover
@@ -68,4 +68,4 @@
68
68
  --pds-color-button-reverse-secondary-foreground
69
69
  );--button-border-color:var(--pds-color-button-reverse-secondary-border);--button-border-color-hover:var(--pds-color-button-reverse-secondary-border);--button-border-color-active:var(
70
70
  --pds-color-button-reverse-secondary-border
71
- )}.pds-button--link{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding-inline:0;padding:0;transition:var(--pds-animation-transition-button)}.pds-button--link:hover:enabled,a.pds-button--link:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-button--link:active:enabled,a.pds-button--link:active{box-shadow:none;color:var(--pds-color-interactive-link-active)}.pds-button--link .pds-button-link__icon,.pds-button--link .pds-button__icon{transform:scale(.9)}.pds-button--loading{cursor:not-allowed}.pds-button--loading:active,.pds-button--loading:hover:enabled{--button-background-color:var(--pulse-regular-base-color);--button-border-color:var(--pulse-regular-base-color)}.pds-button--loading.pds-pulse{background-color:var(--pulse-regular-base-color);border-color:var(--pulse-regular-base-color);color:transparent}.pds-button--loading .pds-button__icon,.pds-button--loading .pds-button__tally,.pds-button--loading .pds-button__working-indicator{opacity:0}.pds-button-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m);width:100%}@media (min-width:768px){.pds-button-group{column-gap:var(--pds-spacing-s);flex-direction:row;width:unset}.pds-button-group--lg{column-gap:var(--pds-spacing-m)}}}
71
+ )}.pds-button--link{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding-inline:0;padding:0;transition:var(--pds-animation-transition-button)}.pds-button--link:hover:enabled,a.pds-button--link:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-button--link:active:enabled,a.pds-button--link:active{box-shadow:none;color:var(--pds-color-interactive-link-active)}.pds-button--link .pds-button-link__icon,.pds-button--link .pds-button__icon{transform:scale(.9)}.pds-button--loading{cursor:not-allowed}.pds-button--loading:active,.pds-button--loading:hover:enabled{--button-background-color:var(--pulse-regular-base-color);--button-border-color:var(--pulse-regular-base-color)}.pds-button--loading.pds-pulse{background-color:var(--pulse-regular-base-color);border-color:var(--pulse-regular-base-color);color:transparent}.pds-button--loading .pds-button__icon,.pds-button--loading .pds-button__tally,.pds-button--loading .pds-button__working-indicator{opacity:0}.pds-button-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m);width:100%}.pds-button-group--inline{column-gap:var(--pds-spacing-s);flex-direction:row;flex-wrap:wrap;row-gap:var(--pds-spacing-s);width:unset}@media (min-width:768px){.pds-button-group{column-gap:var(--pds-spacing-s);flex-direction:row;width:unset}.pds-button-group--l{column-gap:var(--pds-spacing-m)}}}