@pantheon-systems/pds-toolkit-react 1.0.0-dev.213 → 1.0.0-dev.215

package/_dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,56 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-diff';
+import './code-block.css';
+type SupportedLanguages = 'bash' | 'css' | 'diff' | 'html' | 'js' | 'json' | 'jsx' | 'ts' | 'tsx' | 'yaml';
+/**
+ * Prop types for CodeBlock
+ */
+export interface CodeBlockProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Code to display.
+     */
+    code: string;
+    /**
+     * Color type. Default is dark.
+     */
+    colorType?: 'dark' | 'light';
+    /**
+     * Copy button label. Aria-label and tooltip text for the copy button.
+     */
+    copyButtonLabel?: string;
+    /**
+     * Show copy button.
+     */
+    hasCopyButton?: boolean;
+    /**
+     * Show line numbers.
+     */
+    hasLineNumbers?: boolean;
+    /**
+     * Show prompt. A prompt and and line numbers cannot be shown at the same time.
+     * If both are set to true, line numbers will be shown.
+     */
+    hasPrompt?: boolean;
+    /**
+     * Language for optional syntax highlighting.
+     */
+    language?: SupportedLanguages;
+    /**
+     * Maximum height for the code block in `rem`.
+     */
+    maxHeight?: number;
+    /**
+     * Prompt symbol. Default is '$'.
+     */
+    promptSymbol?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CodeBlock UI component
+ */
+export declare const CodeBlock: ({ code, colorType, copyButtonLabel, hasCopyButton, hasLineNumbers, hasPrompt, language, maxHeight, promptSymbol, className, ...props }: CodeBlockProps) => React.JSX.Element;
+export {};

package/_dist/components/CodeBlock/code-examples.d.ts

@@ -0,0 +1,5 @@
+export declare const logExample = "Already have image (with digest): us-docker.pkg.dev/prod-decoupled-shared/build-tools/pantheon-build:v1.0.8-node20\nThe framework expected according to the configuration is: gatsby.\nThe framework detected from the code is: vite\nERROR: Invalid option: false\ndeprecated-tools [options]\nUsage:\n  deprecated-tools -t node --min-version 18 [--max-version 20] --message-format \"Node version should be between %s and %s\" --message-data \"18 20\"\n  deprecated-tools -f .nvmrc --message-format \"The file %s is deprecated\" --message-data \".nvmrc\"\n\n  -t, --tool <tool>       Check if a tool is deprecated\n    --min-version <ver>         Minimum version supported for the tool\n    --max-version <ver>         Max version supported for the tool\n  --message-format <format>   Format of the deprecation message\n  --message-data <data>       Array of data to use in the deprecation message\n  -f, --file <file>       Check if a file is deprecated\n  --message-format <format>   Format of the deprecation message\n  --message-data <data>       Array of data to use in the deprecation message\n  -h, --help              Display this help message\nnpm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported\nnpm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported\n\n> @pantheon-systems/pds-toolkit-react@1.0.0-dev.213 prepare\n> husky install\n\nhusky - Git hooks installed";
+export declare const reactExample = "export const ControlledExample = () => {\n  const defaultValue = 'This is a default value';\n  const [value, setValue] = useState(defaultValue);\n\n  // This is a comment for this component.\n  return (\n    <TextInput\n      id='text-input-controlled-example'\n      label='Controlled Input example'\n      type='text'\n      hasClearButton={true}\n      onClear={() => {\n        setValue('');\n      }}\n      onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n      value={value}\n    />\n  );\n};";
+export declare const cssExample = "@design-tokens url('node_modules://@pantheon-systems/pds-design-tokens/build/json/pds-design-tokens.json') format('style-dictionary3');\n\n.pds-file-diff {\n  align-items: center;\n  display: flex;\n  gap: 0.25rem;\n  height: 1.0625rem;\n  max-width: 100%;\n  width: 100%;\n\n  .pds-file-diff__total-changes {\n    color: var(--pds-color-foreground-default-secondary);\n    font-size: token('typography.size.XS' to rem);\n  }\n\n  .pds-file-diff__bars {\n    align-items: center;\n    display: flex;\n    gap: 0.125rem;\n    width: 100%;\n  }\n\n  .pds-file-diff__behind {\n    position: relative;\n\n    .pds-file-diff__behind-bar {\n      background-color: var(--pds-color-status-critical-utility);\n      border-bottom-left-radius: 6.25rem;\n      border-top-left-radius: 6.25rem;\n      height: 8px;\n      min-width: 1px;\n      right: 0px;\n      transition: width 0.3s ease;\n      width: 100%;\n    }\n  }\n\n  .pds-file-diff__ahead {\n    position: relative;\n\n    .pds-file-diff__ahead-bar {\n      background-color: var(--pds-color-status-success-utility);\n      border-bottom-right-radius: 6.25rem;\n      border-top-right-radius: 6.25rem;\n      height: 8px;\n      left: 0px;\n      min-width: 1px;\n      transition: width 0.3s ease;\n      width: 100%;\n    }\n  }\n\n  .pds-file-diff__tooltip {\n    display: block;\n    padding-inline: 0;\n  }\n}\n";
+export declare const diffExample = "diff --git a/influitive/index.css b/influitive/index.css\nindex 2069af6..b347ca3 100644\n--- a/influitive/index.css\n+++ b/influitive/index.css\n@@ -1,4 +1,4 @@\n #nav-container ul li.c-nav-list-item a.c-nav-item {\n   font-weight: 500 !important;\n-  font-family: 'Poppins', san-serif !important;\n+  font-family: 'Poppins', sans-serif !important;\n }";
+export declare const twigExample = "<div class=\"pds-status-badge pds-status-badge--{{ color|default('transparent')}}{% if extra_classes %} {{ extra_classes }}{% endif %}\">\n\n  {% if has_status_indicator %}\n    <span class=\"pds-status-badge__status pds-status-badge__status--{{ status_type }}\">\n      {% if status_type %}\n        <span class=\"visually-hidden\">Status: {{ status_type }}</span>\n      {% endif %}\n    </span>\n  {% endif %}\n\n  <span class=\"pds-status-badge__label\">{{ label }}</span>\n</div>";

package/_dist/components/CodeBlock/themes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pdsDark';
+export * from './pdsLight';

package/_dist/components/CodeBlock/themes/pdsDark.d.ts

@@ -0,0 +1,2 @@
+import type { PrismTheme } from 'prism-react-renderer';
+export declare const pdsDark: PrismTheme;

package/_dist/components/CodeBlock/themes/pdsLight.d.ts

@@ -0,0 +1,2 @@
+import type { PrismTheme } from 'prism-react-renderer';
+export declare const pdsLight: PrismTheme;

package/_dist/components/FlowSteps/FlowSteps.d.ts

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './flow-steps.css';
+export type FlowStep = {
+    /**
+     * The header text of the step
+     */
+    header: string | ReactNode;
+    /**
+     * The content of the step
+     */
+    content?: string | ReactNode;
+};
+/**
+ * Prop types for FlowSteps
+ */
+export interface FlowStepsProps extends ComponentPropsWithoutRef<'ol'> {
+    /**
+     * The list of steps to display.
+     */
+    steps: FlowStep[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * FlowSteps UI component
+ */
+export declare const FlowSteps: ({ steps, className, ...props }: FlowStepsProps) => React.JSX.Element;

package/_dist/components/FlowSteps/example-steps.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare const stepsWithoutExtraContent: {
+    header: string;
+}[];
+export declare const stepsWithCode: ({
+    header: string;
+    content: React.JSX.Element;
+} | {
+    header: React.JSX.Element;
+    content: React.JSX.Element;
+})[];
+export declare const stepsWithText: {
+    header: string;
+    content: string;
+}[];

package/_dist/components/Icon/Icon.d.ts

@@ -429,6 +429,14 @@ declare const svgData: {
         readonly path: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L532.4 392c45.4-28.2 75.6-78.6 75.6-136c0-88.4-71.6-160-160-160H384c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c53 0 96 43 96 96c0 43.3-28.6 79.8-67.9 91.8L399.7 288H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H318.1l-81.7-64H256c17.7 0 32-14.3 32-32s-14.3-32-32-32H192c-11.3 0-22.3 1.2-32.9 3.4L38.8 5.1zM121 191.4L70.7 151.7C46.6 179.7 32 216.1 32 256c0 88.4 71.6 160 160 160h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H192c-53 0-96-43-96-96c0-24.9 9.5-47.6 25-64.6z";
         readonly width: "640";
     };
+    readonly lock: {
+        readonly path: "M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z";
+        readonly width: "448";
+    };
+    readonly lockOpen: {
+        readonly path: "M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z";
+        readonly width: "576";
+    };
     readonly magnifyingGlass: {
         readonly path: "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z";
         readonly width: "512";
@@ -670,5 +678,5 @@ declare const svgData: {
         readonly width: "576";
     };
 };
-export declare const iconList: ("angleDown" | "angleLeft" | "angleRight" | "angleUp" | "anglesLeft" | "anglesRight" | "arrowDownToLine" | "arrowLeft" | "arrowRight" | "asterisk" | "banBug" | "bars" | "barsFilter" | "billboard" | "bitbucket" | "bolt" | "book" | "books" | "bracketRight" | "broomWide" | "building" | "buildings" | "calendarDays" | "ccAmex" | "ccDiscover" | "ccGeneric" | "ccMC" | "ccVisa" | "chartSimple" | "cloud" | "cloudArrowUp" | "cloudPlus" | "code" | "codeBranch" | "codeMerge" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "chartLine" | "chartNetwork" | "check" | "circle" | "circleExclamation" | "circleCheck" | "circleInfo" | "circleMinus" | "circleMinusOutline" | "circleNotch" | "circlePlus" | "circlePlusOutline" | "circleQuestion" | "circleXmark" | "command" | "comment" | "copy" | "diamondExclamation" | "diamonds4" | "discourse" | "download" | "drupal" | "ellipsis" | "ellipsisVertical" | "emptySet" | "envelope" | "exclamation" | "externalLink" | "eye" | "eyeSlash" | "facebook" | "file" | "fileCheck" | "fileContract" | "fileCSV" | "fileDiff" | "fileExport" | "fileImport" | "fileLines" | "filePDF" | "fileZip" | "folder" | "gear" | "github" | "gitlab" | "globe" | "globeLine" | "graduationCap" | "grid" | "gripDots" | "gripDotsVertical" | "heart" | "house" | "idCard" | "instagram" | "keySkeleton" | "laptopCode" | "leaf" | "lifeRing" | "linkedin" | "linkSimple" | "linkSimpleSlash" | "magnifyingGlass" | "memo" | "messages" | "minus" | "moon" | "paperclip" | "paperPlane" | "pen" | "phone" | "play" | "plus" | "quotesLeft" | "quotesRight" | "rectangleList" | "rocketLaunch" | "robot" | "rotate" | "rotateClock" | "rss" | "save" | "server" | "shield" | "shovel" | "siren" | "sitemap" | "slack" | "slashForward" | "slidersSimple" | "snowflake" | "sparkles" | "squareCheck" | "squareCode" | "squareMinus" | "squarePen" | "squareQuestion" | "squareTerminal" | "star" | "sun" | "table" | "terminal" | "threads" | "thumbsDown" | "thumbsUp" | "trash" | "triangleExclamation" | "twitter" | "upload" | "user" | "userGear" | "userPlus" | "users" | "video" | "wavePulse" | "windowRestore" | "wordpress" | "wrench" | "xmark" | "xmarkLarge" | "xTwitter" | "youtube")[];
+export declare const iconList: ("angleDown" | "angleLeft" | "angleRight" | "angleUp" | "anglesLeft" | "anglesRight" | "arrowDownToLine" | "arrowLeft" | "arrowRight" | "asterisk" | "banBug" | "bars" | "barsFilter" | "billboard" | "bitbucket" | "bolt" | "book" | "books" | "bracketRight" | "broomWide" | "building" | "buildings" | "calendarDays" | "ccAmex" | "ccDiscover" | "ccGeneric" | "ccMC" | "ccVisa" | "chartSimple" | "cloud" | "cloudArrowUp" | "cloudPlus" | "code" | "codeBranch" | "codeMerge" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "chartLine" | "chartNetwork" | "check" | "circle" | "circleExclamation" | "circleCheck" | "circleInfo" | "circleMinus" | "circleMinusOutline" | "circleNotch" | "circlePlus" | "circlePlusOutline" | "circleQuestion" | "circleXmark" | "command" | "comment" | "copy" | "diamondExclamation" | "diamonds4" | "discourse" | "download" | "drupal" | "ellipsis" | "ellipsisVertical" | "emptySet" | "envelope" | "exclamation" | "externalLink" | "eye" | "eyeSlash" | "facebook" | "file" | "fileCheck" | "fileContract" | "fileCSV" | "fileDiff" | "fileExport" | "fileImport" | "fileLines" | "filePDF" | "fileZip" | "folder" | "gear" | "github" | "gitlab" | "globe" | "globeLine" | "graduationCap" | "grid" | "gripDots" | "gripDotsVertical" | "heart" | "house" | "idCard" | "instagram" | "keySkeleton" | "laptopCode" | "leaf" | "lifeRing" | "linkedin" | "linkSimple" | "linkSimpleSlash" | "lock" | "lockOpen" | "magnifyingGlass" | "memo" | "messages" | "minus" | "moon" | "paperclip" | "paperPlane" | "pen" | "phone" | "play" | "plus" | "quotesLeft" | "quotesRight" | "rectangleList" | "rocketLaunch" | "robot" | "rotate" | "rotateClock" | "rss" | "save" | "server" | "shield" | "shovel" | "siren" | "sitemap" | "slack" | "slashForward" | "slidersSimple" | "snowflake" | "sparkles" | "squareCheck" | "squareCode" | "squareMinus" | "squarePen" | "squareQuestion" | "squareTerminal" | "star" | "sun" | "table" | "terminal" | "threads" | "thumbsDown" | "thumbsUp" | "trash" | "triangleExclamation" | "twitter" | "upload" | "user" | "userGear" | "userPlus" | "users" | "video" | "wavePulse" | "windowRestore" | "wordpress" | "wrench" | "xmark" | "xmarkLarge" | "xTwitter" | "youtube")[];
 export {};

package/_dist/components/Modal/Modal.d.ts

@@ -24,7 +24,7 @@ export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * The width of the modal.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     /**
      * Text for modal title
      */

package/_dist/components/buttons/ClipboardButton/ClipboardButton.d.ts

@@ -0,0 +1,31 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './clipboard-button.css';
+/**
+ * Prop types for ClipboardButton
+ */
+export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Translation string for aria-label attribute and tooltip text.
+     */
+    ariaLabel: string;
+    /**
+     * Text to copy to clipboard.
+     */
+    clipboardText?: string;
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Which variant of button to render.
+     */
+    variant?: 'standard' | 'reverse';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ClipboardButton UI component
+ */
+export declare const ClipboardButton: ({ ariaLabel, clipboardText, disabled, variant, className, ...props }: ClipboardButtonProps) => React.JSX.Element;

package/_dist/components/buttons/IconButton/IconButton.d.ts

@@ -37,7 +37,7 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Which variant of button to render.
      */
-    variant?: 'standard' | 'critical' | 'critical-hover';
+    variant?: 'standard' | 'reverse' | 'critical' | 'critical-hover';
     /**
      * Additional class names.
      */

package/_dist/components/inputs/TextInput/TextInput.d.ts

@@ -87,6 +87,10 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
      * Is this field required?
      */
     required?: boolean;
+    /**
+     * Icon to use when type is search.
+     */
+    searchIcon?: 'search' | 'filter';
     /**
      * Should the label be visible? If false, it will render for screen readers only.
      */

package/_dist/components/inputs/input-utilities.d.ts

@@ -57,7 +57,7 @@ export declare const InputMessage: ({ id, message, hasValidationMessage, validat
     validationStatus?: string;
     className?: string;
 }) => React.JSX.Element;
-type DecoratorVariants = 'search' | 'error' | 'success';
+type DecoratorVariants = 'search' | 'error' | 'success' | 'filter';
 export declare const InputDecorator: ({ variant }: {
     variant: DecoratorVariants;
 }) => React.JSX.Element;

package/_dist/css/component-css/pds-code-block.css

@@ -0,0 +1 @@
+.pds-code-block{--code-block-padding:1.25rem;--code-block-background:var(--pds-color-code-block-dark-background);--code-block-foreground:var(--pds-color-code-block-dark-foreground);--code-block-line-prefix:var(--pds-color-code-block-dark-line-prefix);--code-block-focus-color:var(--pds-color-interactive-reverse-focus);background-color:var(--code-block-background);border-radius:.375rem;display:flex;font-family:var(--pds-typography-font-code);font-size:.9rem;font-weight:400;justify-content:space-between;line-height:165%}.pds-code-block__code{flex-grow:1;margin:0;overflow:auto;padding:1.25rem}.pds-code-block__code:focus-visible{border-radius:.375rem;outline:2px solid var(--code-block-focus-color)}.pds-code-block__code .token.plain{color:var(--code-block-foreground)}.pds-code-block__line{column-gap:.64rem;display:table-row}.pds-code-block__number,.pds-code-block__prompt{color:var(--code-block-line-prefix);display:table-cell;padding-inline-end:1rem;text-align:right}.pds-code-block__copy{padding:.8rem}.pds-code-block--dark{--code-block-background:var(--pds-color-code-block-dark-background);--code-block-foreground:var(--pds-color-code-block-dark-foreground);--code-block-line-prefix:var(--pds-color-code-block-dark-line-prefix);--code-block-focus-color:var(--pds-color-interactive-reverse-focus)}.pds-code-block--light{--code-block-background:var(--pds-color-code-block-light-background);--code-block-foreground:var(--pds-color-code-block-light-foreground);--code-block-line-prefix:var(--pds-color-code-block-light-line-prefix);--code-block-focus-color:var(--pds-color-interactive-focus);font-weight:600}.pds-code-block--light button.pds-clipboard-button{color:var(--pds-color-code-block-light-foreground)}.pds-code-block--light button.pds-clipboard-button:hover{background-color:var(--pds-color-code-block-light-highlight)}.pds-code-block--light button.pds-clipboard-button:active{background-color:#d0d2d5}

package/_dist/css/component-css/pds-dropdown-menu.css

@@ -1,2 +1,2 @@
-.pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-size:1rem;font-weight:600;margin-block-end:.64rem}.pds-dropdown-menu__heading a{color:var(--pds-color-foreground-default);text-decoration:none}.pds-dropdown-menu__heading a:hover{color:var(--pds-color-interactive-link-hover)}.pds-dropdown-menu__trigger{align-items:center;background-color:var(--pds-color-background-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;color:var(--pds-color-foreground-default);cursor:pointer;display:flex;height:var(--pds-spacing-input-height);justify-content:space-between;padding:0 .64rem;text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{color:var(--pds-color-nav-trigger-default);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__trigger[aria-expanded=true]
+.pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-size:1rem;font-weight:600;margin-block-end:.64rem}.pds-dropdown-menu__heading a{color:var(--pds-color-foreground-default);text-decoration:none}.pds-dropdown-menu__heading a:hover{color:var(--pds-color-interactive-link-hover)}.pds-dropdown-menu__trigger{align-items:center;background-color:var(--pds-color-background-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;color:var(--pds-color-foreground-default);cursor:pointer;display:flex;height:var(--pds-spacing-input-height);justify-content:space-between;padding:0 .64rem;text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{color:var(--pds-color-nav-item-default-foreground-trigger);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__trigger[aria-expanded=true]
 	.pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);list-style-type:none;margin-block-start:.64rem;max-height:30rem;overflow-y:scroll;padding:0;position:absolute;width:100%;z-index:200}.pds-dropdown-menu__dropdown a{color:var(--pds-color-dropdown-foreground);display:flex;padding:.64rem 1rem;text-decoration:none}.pds-dropdown-menu__dropdown:focus{outline:none}.pds-dropdown-menu__item:focus,.pds-dropdown-menu__item:hover{background-color:var(--pds-color-dropdown-item-background-hover);outline:none}.pds-dropdown-menu__item:focus a:active,.pds-dropdown-menu__item:hover a:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown-menu__item--second-level a{padding-inline-start:2.441rem}.pds-dropdown-menu__item--third-level a{padding-inline-start:4.004rem}.pds-dropdown-menu__item--fourth-level a{padding-inline-start:5.567rem}.pds-dropdown-menu__active-label{display:flex;padding-inline-start:.25rem}.pds-dropdown-menu__item--active{align-items:center;background-color:var(--pds-color-dropdown-item-background-selected);color:var(--pds-color-foreground-default);display:flex;justify-content:space-between}.pds-dropdown-menu__active-icon{flex-shrink:0;margin-inline:1rem}

package/_dist/css/component-css/pds-flow-steps.css

@@ -0,0 +1 @@
+ol.pds-flow-steps{display:flex;flex-direction:column;list-style:none;row-gap:2.441rem}.pds-flow-steps__header{align-items:flex-start;column-gap:.512rem;display:flex;font-size:1rem;font-weight:600;line-height:140%}.pds-flow-steps__number{align-items:center;background-color:var(--pds-color-background-reverse);border-radius:50%;color:var(--pds-color-foreground-reverse);display:flex;flex-shrink:0;font-family:Poppins,sans-serif;font-size:.833rem;font-weight:600;height:1.25rem;justify-content:center;line-height:90%;padding:1px;width:1.25rem}.pds-flow-steps__number span{padding-block-start:1px}.pds-flow-steps__content{padding-block-start:.8rem}

package/_dist/css/component-css/pds-icon-button.css

@@ -1,7 +1,13 @@
-button.pds-icon-button{--pds-button-size:2.25rem;--pds-button-color-foreground:var(--pds-color-foreground-default);--pds-button-color-background-hover:var(
-		--pds-color-interactive-background-hover
-	);--pds-button-color-background-active:var(
-		--pds-color-interactive-background-active
-	);background-color:transparent;border:none;border-radius:.1875rem;color:var(--pds-button-color-foreground);height:var(--pds-button-size);padding:0;width:var(--pds-button-size)}.pds-icon-button__content,button.pds-icon-button{align-items:center;display:flex;justify-content:center}.pds-icon-button__content{align-content:stretch;height:100%}.pds-icon-button:disabled .pds-icon-button__content{cursor:not-allowed;opacity:45%}button.pds-icon-button:hover:enabled{background-color:var(--pds-button-color-background-hover)}button.pds-icon-button:active:enabled{background-color:var(--pds-button-color-background-active)}button.pds-icon-button:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}button.pds-icon-button--critical{--pds-button-color-foreground:var(--pds-color-status-critical-foreground)}button.pds-icon-button--critical,button.pds-icon-button--critical-hover{--pds-button-color-background-hover:var(
-		--pds-color-status-critical-background
-	);--pds-button-color-background-active:#fcc5be}button.pds-icon-button--critical-hover:active,button.pds-icon-button--critical-hover:hover{--pds-button-color-foreground:var(--pds-color-status-critical-foreground)}button.pds-icon-button--sm{--pds-button-size:2rem}button.pds-icon-button--lg{--pds-button-size:3rem}.pds-icon-button__tooltip .pds-tooltip__container{padding:.328rem .512rem}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}
+button.pds-icon-button{--icon-button-size:2.25rem;--icon-button-foreground:var(--pds-color-foreground-default);--icon-button-background-hover:var(
+		--pds-color-icon-button-standard-background-hover
+	);--icon-button-background-active:var(
+		--pds-color-icon-button-standard-background-active
+	);background-color:transparent;border:none;border-radius:.1875rem;color:var(--icon-button-foreground);height:var(--icon-button-size);padding:0;width:var(--icon-button-size)}.pds-icon-button__content,button.pds-icon-button{align-items:center;display:flex;justify-content:center}.pds-icon-button__content{align-content:stretch;height:100%}.pds-icon-button:disabled .pds-icon-button__content{cursor:not-allowed;opacity:45%}button.pds-icon-button:hover:enabled{background-color:var(--icon-button-background-hover)}button.pds-icon-button:active:enabled{background-color:var(--icon-button-background-active)}button.pds-icon-button:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}button.pds-icon-button--reverse{--icon-button-foreground:var(--pds-color-foreground-reverse);--icon-button-background-hover:var(
+		--pds-color-icon-button-reverse-background-hover
+	);--icon-button-background-active:var(
+		--pds-color-icon-button-reverse-background-active
+	)}button.pds-icon-button--reverse:focus-visible{outline-color:var(--pds-color-interactive-reverse-focus)}button.pds-icon-button--critical{--icon-button-foreground:var(--pds-color-status-critical-foreground)}button.pds-icon-button--critical,button.pds-icon-button--critical-hover{--icon-button-background-hover:var(
+		--pds-color-icon-button-critical-background-hover
+	);--icon-button-background-active:var(
+		--pds-color-icon-button-critical-background-active
+	)}button.pds-icon-button--critical-hover:active,button.pds-icon-button--critical-hover:hover{--icon-button-foreground:var(--pds-color-status-critical-foreground)}button.pds-icon-button--sm{--icon-button-size:2rem}button.pds-icon-button--lg{--icon-button-size:3rem}.pds-icon-button__tooltip .pds-tooltip__container{padding:.328rem .512rem}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}