@pantheon-systems/pds-toolkit-react 1.0.0-dev.193 → 1.0.0-dev.195

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 (40) hide show
  1. package/_dist/components/LinkNewWindow/LinkNewWindow.d.ts +5 -1
  2. package/_dist/components/Panel/Panel.d.ts +7 -2
  3. package/_dist/components/SiteDashboardHeading/SiteDashboardHeading.d.ts +28 -0
  4. package/_dist/components/buttons/SegmentedButton/SegmentedButton.d.ts +5 -1
  5. package/_dist/components/buttons/SplitButton/SplitButton.d.ts +35 -34
  6. package/_dist/components/inputs/FileUpload/FileUpload.d.ts +5 -1
  7. package/_dist/components/navigation/DashboardSearch/SiteOptionDisplay.d.ts +2 -2
  8. package/_dist/css/component-css/pds-combobox.css +1 -1
  9. package/_dist/css/component-css/pds-dashboard-search.css +1 -1
  10. package/_dist/css/component-css/pds-dropdown-menu.css +1 -1
  11. package/_dist/css/component-css/pds-file-upload.css +1 -1
  12. package/_dist/css/component-css/pds-index.css +8 -8
  13. package/_dist/css/component-css/pds-link-new-window.css +1 -1
  14. package/_dist/css/component-css/pds-panel.css +1 -1
  15. package/_dist/css/component-css/pds-section-message.css +1 -1
  16. package/_dist/css/component-css/pds-segmented-button.css +1 -1
  17. package/_dist/css/component-css/pds-select.css +1 -1
  18. package/_dist/css/component-css/pds-side-nav.css +1 -1
  19. package/_dist/css/component-css/pds-site-dashboard-heading.css +1 -0
  20. package/_dist/css/component-css/pds-tab-menu.css +2 -2
  21. package/_dist/css/component-css/pds-text-input.css +1 -1
  22. package/_dist/css/pds-components.css +8 -8
  23. package/_dist/css/pds-core.css +2 -2
  24. package/_dist/css/pds-layouts.css +3 -2
  25. package/_dist/index.css +1 -1
  26. package/_dist/index.d.ts +4 -3
  27. package/_dist/index.js +2923 -2887
  28. package/_dist/index.js.map +1 -1
  29. package/_dist/layouts/{DashboardLayout/DashboardLayout.d.ts → DashboardGlobal/DashboardGlobal.d.ts} +10 -9
  30. package/_dist/layouts/DashboardInner/DashboardInner.d.ts +20 -0
  31. package/_dist/libs/types/custom-types.d.ts +63 -0
  32. package/_dist/mocks/data/navigation-items.d.ts +357 -0
  33. package/_dist/mocks/markup/dashboard-main-content.d.ts +16 -0
  34. package/_dist/mocks/markup/dashboard-navigation.d.ts +11 -0
  35. package/_dist/mocks/markup/modal.d.ts +2 -0
  36. package/package.json +1 -1
  37. package/_dist/components/navigation/DashboardNav/dashboard-nav-sample-content.d.ts +0 -30
  38. package/_dist/components/navigation/UserMenu/user-menu-sample-content.d.ts +0 -2
  39. package/_dist/components/navigation/WorkspaceSelector/workspace-sample-content.d.ts +0 -35
  40. package/_dist/layouts/DashboardLayout/DemoContent.d.ts +0 -2
@@ -8,6 +8,10 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
8
8
  * Content for the LinkNewWindow.
9
9
  */
10
10
  children?: ReactNode;
11
+ /**
12
+ * Optional font size for the LinkNewWindow. If not provided, the font size will be inherited from the parent element.
13
+ */
14
+ fontSize?: 'sm' | 'md' | 'lg';
11
15
  /**
12
16
  * Translation string for the "opens in a new window" message.
13
17
  */
@@ -24,4 +28,4 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
24
28
  /**
25
29
  * LinkNewWindow UI component
26
30
  */
27
- export declare const LinkNewWindow: ({ children, newWindowText, url, className, ...props }: LinkNewWindowProps) => React.JSX.Element;
31
+ export declare const LinkNewWindow: ({ children, fontSize, newWindowText, url, className, ...props }: LinkNewWindowProps) => React.JSX.Element;
@@ -1,5 +1,6 @@
1
1
  import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  import './panel.css';
3
+ import { GridGapOptions } from '@layouts/layout-types';
3
4
  type StatusType = 'info' | 'success' | 'warning' | 'critical';
4
5
  export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
5
6
  /**
@@ -10,10 +11,14 @@ export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
10
11
  * Should the panel show a status indicator.
11
12
  */
12
13
  hasStatusIndicator?: boolean;
14
+ /**
15
+ * Padding for the panel.
16
+ */
17
+ padding?: GridGapOptions;
13
18
  /**
14
19
  * Status type for panel. Only renders if `hasStatusIndicator` is true.
15
20
  */
16
- statusType: StatusType;
21
+ statusType?: StatusType;
17
22
  /**
18
23
  * Which variant of panel to render
19
24
  */
@@ -26,5 +31,5 @@ export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
26
31
  /**
27
32
  * Panel UI component
28
33
  */
29
- export declare const Panel: ({ children, hasStatusIndicator, statusType, variant, className, ...props }: PanelProps) => React.JSX.Element;
34
+ export declare const Panel: ({ children, hasStatusIndicator, padding, statusType, variant, className, ...props }: PanelProps) => React.JSX.Element;
30
35
  export {};
@@ -0,0 +1,28 @@
1
+ import React, { ComponentPropsWithoutRef } from 'react';
2
+ import { SitePlanLevel, SiteType } from '@libs/types/custom-types';
3
+ import './site-dashboard-heading.css';
4
+ /**
5
+ * Prop types for SiteDashboardHeading
6
+ */
7
+ export interface SiteDashboardHeadingProps extends ComponentPropsWithoutRef<'div'> {
8
+ /**
9
+ * Name of the site.
10
+ */
11
+ siteName: string;
12
+ /**
13
+ * Site plan level.
14
+ */
15
+ sitePlanLevel?: SitePlanLevel;
16
+ /**
17
+ * Site type.
18
+ */
19
+ siteType?: SiteType;
20
+ /**
21
+ * Additional class names
22
+ */
23
+ className?: string;
24
+ }
25
+ /**
26
+ * SiteDashboardHeading UI component
27
+ */
28
+ export declare const SiteDashboardHeading: ({ siteName, sitePlanLevel, siteType, className, ...props }: SiteDashboardHeadingProps) => React.JSX.Element;
@@ -42,6 +42,10 @@ export interface SegmentedButtonProps {
42
42
  * Array of button options — must be between 2 and 6 options.
43
43
  */
44
44
  options: OptionType[];
45
+ /**
46
+ * Size of the SegmentedButton.
47
+ */
48
+ size?: 'sm' | 'md';
45
49
  /**
46
50
  * Additional class names
47
51
  */
@@ -50,5 +54,5 @@ export interface SegmentedButtonProps {
50
54
  /**
51
55
  * SegmentedButton UI component
52
56
  */
53
- export declare const SegmentedButton: ({ disabled, id, defaultValue, label, onChange, options, className, ...props }: SegmentedButtonProps) => React.JSX.Element;
57
+ export declare const SegmentedButton: ({ disabled, id, defaultValue, label, onChange, options, size, className, ...props }: SegmentedButtonProps) => React.JSX.Element;
54
58
  export {};
@@ -1,36 +1,37 @@
1
- export function SplitButton({ actionItems, disabled, moreActionsLabel, size, variant, className, ...props }: {
2
- [x: string]: any;
3
- actionItems: any;
4
- disabled: any;
1
+ import React, { ComponentPropsWithoutRef } from 'react';
2
+ import { LinkItemType, MenuItemType } from '@libs/types/custom-types';
3
+ import './split-button.css';
4
+ /**
5
+ * Prop types for SplitButton
6
+ */
7
+ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
8
+ /**
9
+ * Array of menu items
10
+ */
11
+ actionItems: Array<LinkItemType | MenuItemType>;
12
+ /**
13
+ * Is the button disabled?
14
+ */
15
+ disabled?: boolean;
16
+ /**
17
+ * Label for the buttons additional actions menu.
18
+ */
5
19
  moreActionsLabel?: string;
6
- size?: string;
7
- variant?: string;
8
- className: any;
9
- }): React.JSX.Element;
10
- export namespace SplitButton {
11
- namespace propTypes {
12
- let actionItems: PropTypes.Requireable<NonNullable<Required<PropTypes.InferProps<{
13
- description: PropTypes.Requireable<string>;
14
- disabled: PropTypes.Requireable<boolean>;
15
- iconName: PropTypes.Requireable<string>;
16
- isLink: PropTypes.Validator<boolean>;
17
- linkContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
18
- testId: PropTypes.Requireable<string>;
19
- }>> | Required<PropTypes.InferProps<{
20
- callback: PropTypes.Requireable<(...args: any[]) => any>;
21
- description: PropTypes.Requireable<string>;
22
- disabled: PropTypes.Requireable<boolean>;
23
- iconName: PropTypes.Requireable<string>;
24
- id: PropTypes.Requireable<string>;
25
- label: PropTypes.Validator<string>;
26
- testId: PropTypes.Requireable<string>;
27
- }>>>[]>;
28
- let disabled: PropTypes.Requireable<boolean>;
29
- let moreActionsLabel: PropTypes.Requireable<string>;
30
- let size: PropTypes.Requireable<string>;
31
- let variant: PropTypes.Requireable<string>;
32
- let className: PropTypes.Requireable<string>;
33
- }
20
+ /**
21
+ * Which size of button to render
22
+ */
23
+ size?: 'sm' | 'md';
24
+ /**
25
+ * Which variant of button to render
26
+ */
27
+ variant?: 'primary' | 'secondary';
28
+ /**
29
+ * Additional class names
30
+ */
31
+ className?: string;
34
32
  }
35
- import React from 'react';
36
- import PropTypes from 'prop-types';
33
+ /**
34
+ * A component used to render a button with a primary action and a menu of additional options
35
+ */
36
+ export declare const SplitButton: ({ actionItems, disabled, moreActionsLabel, size, variant, className, ...props }: SplitButtonProps) => React.JSX.Element;
37
+ export {};
@@ -25,6 +25,10 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
25
25
  * Input ID.
26
26
  */
27
27
  id: string;
28
+ /**
29
+ * Additional props for the `<input>` element.
30
+ */
31
+ inputProps?: ComponentPropsWithoutRef<'input'>;
28
32
  /**
29
33
  * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
30
34
  */
@@ -73,5 +77,5 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
73
77
  /**
74
78
  * FileUpload UI component
75
79
  */
76
- export declare const FileUpload: ({ accept, disabled, fieldLabel, id, inputWidth, labelStrings, message, multiple, onClear, onFileChange, required, showLabel, validationMessage, validationStatus, className, ...props }: FileUploadProps) => React.JSX.Element;
80
+ export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLInputElement>>;
77
81
  export {};
@@ -1,5 +1,5 @@
1
1
  import React, { ComponentPropsWithoutRef } from 'react';
2
- import { SiteStatus } from '@libs/types/custom-types';
2
+ import { SiteStatus, SiteType } from '@libs/types/custom-types';
3
3
  export type SiteOption = {
4
4
  /**
5
5
  * ID of the site.
@@ -20,7 +20,7 @@ export type SiteOption = {
20
20
  /**
21
21
  * Site type.
22
22
  */
23
- type?: 'drupal' | 'wordpress' | 'gatsby' | 'nextjs';
23
+ type?: SiteType;
24
24
  };
25
25
  /** Site option display props. */
26
26
  export interface SiteOptionDisplayProps extends ComponentPropsWithoutRef<'div'> {
@@ -1 +1 @@
1
- .pds-combobox{position:relative}.pds-combobox__input-wrapper{align-items:center;background-color:var(--pds-color-input-background-default);border:.0625rem solid var(--pds-color-input-border-default);border-radius:.1875rem;box-sizing:border-box;display:flex;gap:.64rem;column-gap:.512rem;height:2.441rem;justify-content:space-between;padding-inline:.64rem;position:relative;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:100%}.pds-combobox__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-input-foreground-default);color:var(--pds-color-input-foreground-default);flex-grow:1;line-height:1;padding-inline:0;width:100%}.pds-combobox__input:focus{outline:none}.pds-combobox__input::placeholder{color:var(--pds-color-input-placeholder-text)}.pds-combobox__trigger{align-items:center;background-color:transparent;border:none;border-radius:.1875rem;color:var(--pds-color-text-default);display:flex;height:1.563rem}.pds-combobox__trigger:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-text-default-secondary);pointer-events:none;transition:transform .2s ease-in-out 0s}.pds-combobox__trigger[aria-expanded=true] .pds-combobox__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-combobox__dropdown{background-color:var(--pds-color-menu-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-active);box-sizing:border-box;margin-block-start:.512rem;max-height:18rem;overflow-x:hidden;overflow-y:auto;position:absolute;width:100%}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;row-gap:.0625rem}.pds-combobox__loading,.pds-combobox__no-results{color:var(--pds-color-text-default);font-size:1rem;padding:1rem}
1
+ .pds-combobox{position:relative}.pds-combobox__input-wrapper{align-items:center;background-color:var(--pds-color-input-background-default);border:.0625rem solid var(--pds-color-input-border-default);border-radius:.1875rem;box-sizing:border-box;display:flex;gap:.64rem;column-gap:.512rem;height:var(--pds-spacing-input-height);justify-content:space-between;padding-inline:.64rem;position:relative;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:100%}.pds-combobox__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-input-foreground-default);color:var(--pds-color-input-foreground-default);flex-grow:1;line-height:1;padding-inline:0;width:100%}.pds-combobox__input:focus{outline:none}.pds-combobox__input::placeholder{color:var(--pds-color-input-placeholder-text)}.pds-combobox__trigger{align-items:center;background-color:transparent;border:none;border-radius:.1875rem;color:var(--pds-color-text-default);display:flex;height:1.563rem}.pds-combobox__trigger:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-text-default-secondary);pointer-events:none;transition:transform .2s ease-in-out 0s}.pds-combobox__trigger[aria-expanded=true] .pds-combobox__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-combobox__dropdown{background-color:var(--pds-color-menu-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-active);box-sizing:border-box;margin-block-start:.512rem;max-height:18rem;overflow-x:hidden;overflow-y:auto;position:absolute;width:100%}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;row-gap:.0625rem}.pds-combobox__loading,.pds-combobox__no-results{color:var(--pds-color-text-default);font-size:1rem;padding:1rem}
@@ -1 +1 @@
1
- .pds-dashboard-search{--dashboard-search-height:2.441rem;height:var(--dashboard-search-height);margin-inline-end:-.64rem;position:absolute;transition:width .375s ease;z-index:400}.pds-dashboard-search--inner{align-content:stretch;display:flex}.pds-dashboard-search__combobox{left:0;position:absolute;right:0}.pds-dashboard-search__search-toggle{align-items:center;background-color:transparent;border:.0625rem solid transparent;border-radius:.1875rem;color:var(--pds-color-text-default);cursor:pointer;display:flex;height:var(--dashboard-search-height);padding-inline:.64rem}.pds-dashboard-search__search-toggle:hover{color:var(--pds-color-interactive-link-hover)}.pds-dashboard-search__search-toggle:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus);transition:outline .2s ease-in-out 0s}.pds-dashboard-search__search-toggle-icon{pointer-events:none}.pds-dashboard-search__option-display{justify-content:space-between;width:100%}.pds-dashboard-search__option-display,.pds-dashboard-search__option-inner{align-items:center;column-gap:.8rem;display:flex}.pds-dashboard-search__option-icon{align-items:center;color:var(--pds-color-text-default-secondary);display:flex}.pds-dashboard-search__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-dashboard-search--isMobile{border-bottom:.0625rem solid var(--pds-color-border-default);left:50%;margin-inline-start:-50vw;min-height:3.815rem;position:relative;width:100vw}.pds-dashboard-search--isMobile .pds-dashboard-search__combobox{margin-inline:auto;width:calc(100% - 2.5rem)}.pds-dashboard-search--mobile-inner{padding-block:.64rem}
1
+ .pds-dashboard-search{--dashboard-search-height:var(--pds-spacing-input-height);height:var(--dashboard-search-height);margin-inline-end:-.64rem;position:absolute;transition:width .375s ease;z-index:400}.pds-dashboard-search--inner{align-content:stretch;display:flex}.pds-dashboard-search__combobox{left:0;position:absolute;right:0}.pds-dashboard-search__search-toggle{align-items:center;background-color:transparent;border:.0625rem solid transparent;border-radius:.1875rem;color:var(--pds-color-text-default);cursor:pointer;display:flex;height:var(--dashboard-search-height);padding-inline:.64rem}.pds-dashboard-search__search-toggle:hover{color:var(--pds-color-interactive-link-hover)}.pds-dashboard-search__search-toggle:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus);transition:outline .2s ease-in-out 0s}.pds-dashboard-search__search-toggle-icon{pointer-events:none}.pds-dashboard-search__option-display{justify-content:space-between;width:100%}.pds-dashboard-search__option-display,.pds-dashboard-search__option-inner{align-items:center;column-gap:.8rem;display:flex}.pds-dashboard-search__option-icon{align-items:center;color:var(--pds-color-text-default-secondary);display:flex}.pds-dashboard-search__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-dashboard-search--isMobile{border-bottom:.0625rem solid var(--pds-color-border-default);left:50%;margin-inline-start:-50vw;min-height:3.815rem;position:relative;width:100vw}.pds-dashboard-search--isMobile .pds-dashboard-search__combobox{margin-inline:auto;width:calc(100% - 2.5rem)}.pds-dashboard-search--mobile-inner{padding-block:.64rem}
@@ -1,2 +1,2 @@
1
- .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-text-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-input-background-default);border:.0625rem solid var(--pds-color-input-border-default);border-radius:.1875rem;color:var(--pds-color-input-foreground-default);cursor:pointer;display:flex;height:2.441rem;justify-content:space-between;padding:0 .64rem;text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__trigger[aria-expanded=true]
1
+ .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-text-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-input-background-default);border:.0625rem solid var(--pds-color-input-border-default);border-radius:.1875rem;color:var(--pds-color-input-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:.0625rem solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__trigger[aria-expanded=true]
2
2
  .pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__dropdown{background-color:var(--pds-color-menu-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-active);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-menu-item-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-menu-item-background-hover);outline:none}.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__active-label{display:flex;padding-inline-start:.25rem}.pds-dropdown-menu__item--active{align-items:center;background-color:var(--pds-color-menu-item-background-active);color:var(--pds-color-foreground-default);display:flex;justify-content:space-between}.pds-dropdown-menu__active-icon{flex-shrink:0;margin-inline:1rem}
@@ -1,4 +1,4 @@
1
- .pds-file-upload__input-wrapper{align-items:center;background-color:var(--pds-color-input-background-default);border:.0625rem solid var(--pds-color-input-border-default);border-radius:.1875rem;box-sizing:border-box;display:flex;gap:.64rem;column-gap:.512rem;cursor:pointer;height:2.441rem;padding-inline:.512rem;position:relative;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:100%}.pds-file-upload__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-file-upload__input::file-selector-button{padding:0;visibility:hidden;width:.1rem}.pds-file-upload__input{color:var(--pds-color-text-default);font-size:1rem;text-align:left;width:100%}.pds-file-upload__input:focus{outline:none}.pds-file-upload__input-label{all:unset;align-items:center;background-color:var(
1
+ .pds-file-upload__input-wrapper{align-items:center;background-color:var(--pds-color-input-background-default);border:.0625rem solid var(--pds-color-input-border-default);border-radius:.1875rem;box-sizing:border-box;display:flex;gap:.64rem;column-gap:.328rem;cursor:pointer;height:var(--pds-spacing-input-height);padding-inline:.328rem;position:relative;transition:background-color .2s ease-in-out 0s,border-color .2s ease-in-out 0s;width:100%}.pds-file-upload__input-wrapper:focus-within{border-color:var(--pds-color-interactive-focus);outline:none;transition:outline .2s ease-in-out 0s}.pds-file-upload__input::file-selector-button{padding:0;visibility:hidden;width:.1rem}.pds-file-upload__input{color:var(--pds-color-text-default);font-size:1rem;text-align:left;width:100%}.pds-file-upload__input:focus{outline:none}.pds-file-upload__input-label{all:unset;align-items:center;background-color:var(
2
2
  --pds-color-input-file-upload-button-background-default
3
3
  );border-radius:.1875rem;color:var(--pds-color-foreground-default);display:flex;font-family:Poppins,sans-serif;font-size:.833rem;font-weight:400;gap:.41rem;letter-spacing:0;line-height:1;padding:.41rem .512rem;white-space:nowrap}.pds-file-upload__input-label:hover{background-color:var(
4
4
  --pds-color-input-file-upload-button-background-hover