@openedx/paragon 23.14.4 → 23.14.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 (21) hide show
  1. package/dist/ChipCarousel/index.d.ts +15 -0
  2. package/dist/ChipCarousel/index.js +1 -40
  3. package/dist/ChipCarousel/index.js.map +1 -1
  4. package/dist/Container/index.d.ts +11 -1
  5. package/dist/Container/index.js +8 -23
  6. package/dist/Container/index.js.map +1 -1
  7. package/dist/Form/FormGroup.d.ts +8 -26
  8. package/dist/Form/FormGroup.js +0 -19
  9. package/dist/Form/FormGroup.js.map +1 -1
  10. package/dist/Hyperlink/index.d.ts +5 -3
  11. package/dist/Hyperlink/index.js +0 -49
  12. package/dist/Hyperlink/index.js.map +1 -1
  13. package/dist/ProductTour/Checkpoint.scss +1 -1
  14. package/package.json +11 -10
  15. package/src/ChipCarousel/index.tsx +16 -42
  16. package/src/Container/index.tsx +21 -27
  17. package/src/Form/FormGroup.tsx +6 -27
  18. package/src/Hyperlink/index.tsx +9 -57
  19. package/src/ProductTour/Checkpoint.scss +1 -1
  20. package/styles/css/core/variables.css +109 -109
  21. package/styles/css/themes/light/variables.css +431 -431
package/src/Container/index.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  /* eslint-disable react/require-default-props */
2
- import React from 'react';
2
+ import React, {
3
+ ForwardedRef, ReactNode, ElementType, forwardRef,
4
+ } from 'react';
3
5
  import classNames from 'classnames';
4
- import PropTypes from 'prop-types';
5
6
  import RBContainer, { type ContainerProps as RBContainerProps } from 'react-bootstrap/Container';
6
7
 
7
8
  import type { ComponentWithAsProp } from '../utils/types/bootstrap';
@@ -17,18 +18,33 @@ enum ContainerSizeClass {
17
18
  export type ContainerSize = keyof typeof ContainerSizeClass;
18
19
 
19
20
  interface ContainerProps extends RBContainerProps {
20
- size?: ContainerSize;
21
+ /** Override the base element */
22
+ as?: ElementType,
23
+ /** Specifies the contents of the container */
24
+ children: ReactNode,
25
+ /** Fill all available space at any breakpoint */
26
+ fluid?: boolean,
27
+ /** Overrides underlying component base CSS class name */
28
+ bsPrefix?: string,
29
+ /** Set the maximum width for the container. Omiting the prop will remove the max-width */
30
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
21
31
  }
22
32
 
23
33
  type ContainerType = ComponentWithAsProp<'div', ContainerProps>;
24
34
 
25
- const Container: ContainerType = React.forwardRef<Element, ContainerProps>(({
35
+ const Container: ContainerType = forwardRef(({
26
36
  size,
27
37
  children,
38
+ as = 'div',
39
+ bsPrefix = 'container',
40
+ fluid = true,
28
41
  ...props
29
- }, ref) => (
42
+ }: ContainerProps, ref: ForwardedRef<Element>) => (
30
43
  <RBContainer
31
44
  {...props}
45
+ as={as}
46
+ bsPrefix={bsPrefix}
47
+ fluid={fluid}
32
48
  ref={ref}
33
49
  className={classNames(
34
50
  props.className,
@@ -39,26 +55,4 @@ const Container: ContainerType = React.forwardRef<Element, ContainerProps>(({
39
55
  </RBContainer>
40
56
  ));
41
57
 
42
- Container.propTypes = {
43
- ...RBContainer.propTypes,
44
- /** Override the base element */
45
- as: PropTypes.elementType,
46
- /** Specifies the contents of the container */
47
- children: PropTypes.node,
48
- /** Fill all available space at any breakpoint */
49
- fluid: PropTypes.bool,
50
- /** Set the maximum width for the container. Omiting the prop will remove the max-width */
51
- size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
52
- /** Overrides underlying component base CSS class name */
53
- bsPrefix: PropTypes.string,
54
- };
55
-
56
- Container.defaultProps = {
57
- as: 'div',
58
- children: undefined,
59
- fluid: true,
60
- size: undefined,
61
- bsPrefix: 'container',
62
- };
63
-
64
58
  export default Container;
package/src/Form/FormGroup.tsx CHANGED
@@ -1,16 +1,15 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
1
+ import React, { ElementType, ReactNode } from 'react';
3
2
  import classNames from 'classnames';
4
3
  import { FormGroupContextProvider } from './FormGroupContext';
5
4
  import { FORM_CONTROL_SIZES } from './constants';
6
5
 
7
- interface Props<As extends React.ElementType> {
6
+ interface Props {
8
7
  /** Specifies contents of the component. */
9
- children: React.ReactNode;
8
+ children: ReactNode;
10
9
  /** Specifies class name to append to the base element. */
11
10
  className?: string;
12
11
  /** Specifies base element for the component. */
13
- as?: As;
12
+ as?: ElementType;
14
13
  /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.
15
14
  * Will be autogenerated if none is supplied. */
16
15
  controlId?: string;
@@ -18,7 +17,7 @@ interface Props<As extends React.ElementType> {
18
17
  isInvalid?: boolean;
19
18
  /** Specifies whether to display components in valid state, this affects styling. */
20
19
  isValid?: boolean;
21
- /** Specifies size for the component. */
20
+ /** Specifies size for the component. Either `'sm'` or `'lg'`. */
22
21
  size?: typeof FORM_CONTROL_SIZES.SMALL | typeof FORM_CONTROL_SIZES.LARGE;
23
22
  }
24
23
 
@@ -30,7 +29,7 @@ function FormGroup<As extends React.ElementType = 'div'>({
30
29
  size,
31
30
  as,
32
31
  ...props
33
- }: Props<As> & React.ComponentPropsWithoutRef<As>) {
32
+ }: { as?: As } & Props & React.ComponentPropsWithoutRef<As>) {
34
33
  return React.createElement(
35
34
  as ?? 'div',
36
35
  {
@@ -49,24 +48,4 @@ function FormGroup<As extends React.ElementType = 'div'>({
49
48
  );
50
49
  }
51
50
 
52
- const SIZE_CHOICES = ['sm', 'lg'];
53
-
54
- FormGroup.propTypes = {
55
- /** Specifies contents of the component. */
56
- children: PropTypes.node.isRequired,
57
- /** Specifies class name to append to the base element. */
58
- className: PropTypes.string,
59
- /** Specifies base element for the component. */
60
- as: PropTypes.elementType,
61
- /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.
62
- * Will be autogenerated if none is supplied. */
63
- controlId: PropTypes.string,
64
- /** Specifies whether to display components in invalid state, this affects styling. */
65
- isInvalid: PropTypes.bool,
66
- /** Specifies whether to display components in valid state, this affects styling. */
67
- isValid: PropTypes.bool,
68
- /** Specifies size for the component. */
69
- size: PropTypes.oneOf(SIZE_CHOICES),
70
- };
71
-
72
51
  export default FormGroup;
package/src/Hyperlink/index.tsx CHANGED
@@ -1,5 +1,6 @@
1
- import React, { forwardRef } from 'react';
2
- import PropTypes from 'prop-types';
1
+ import React, {
2
+ forwardRef, ForwardedRef, ElementType, ReactNode,
3
+ } from 'react';
3
4
  import classNames from 'classnames';
4
5
  import {
5
6
  type BsPrefixRefForwardingComponent as ComponentWithAsProp,
@@ -8,14 +9,14 @@ import {
8
9
  import { defineMessages, useIntl } from 'react-intl';
9
10
  import { Launch } from '../../icons';
10
11
  import Icon from '../Icon';
11
- // @ts-ignore
12
- import { customPropTypeRequirement } from '../utils/propTypes/utils';
13
12
 
14
13
  export interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
15
- /** specifies the URL */
14
+ /** specifies the component element type to render for the hyperlink. */
15
+ as?: ElementType;
16
+ /** specifies the URL; required if `as` prop is a standard anchor tag */
16
17
  destination?: string;
17
18
  /** Content of the hyperlink */
18
- children: React.ReactNode;
19
+ children: ReactNode;
19
20
  /** Custom class names for the hyperlink */
20
21
  className?: string;
21
22
  /** Alt text for the icon indicating that this link opens in a new tab, if target="_blank". e.g. _("in a new tab") */
@@ -49,7 +50,7 @@ const messages = defineMessages({
49
50
  },
50
51
  });
51
52
 
52
- const Hyperlink = forwardRef<HTMLAnchorElement, HyperlinkProps>(({
53
+ const Hyperlink = forwardRef(({
53
54
  as: Component = 'a',
54
55
  className,
55
56
  destination,
@@ -62,7 +63,7 @@ const Hyperlink = forwardRef<HTMLAnchorElement, HyperlinkProps>(({
62
63
  isInline = false,
63
64
  showLaunchIcon = true,
64
65
  ...attrs
65
- }, ref) => {
66
+ }: HyperlinkProps, ref: ForwardedRef<HTMLAnchorElement>) => {
66
67
  const intl = useIntl();
67
68
  let externalLinkIcon;
68
69
 
@@ -127,55 +128,6 @@ const Hyperlink = forwardRef<HTMLAnchorElement, HyperlinkProps>(({
127
128
  );
128
129
  });
129
130
 
130
- Hyperlink.propTypes = {
131
- /** specifies the component element type to render for the hyperlink */
132
- // @ts-ignore
133
- as: PropTypes.elementType,
134
- /** specifies the URL; required iff `as` prop is a standard anchor tag */
135
- destination: customPropTypeRequirement(
136
- PropTypes.string,
137
- ({ as }: { as: React.ElementType }) => as && as === 'a',
138
- // "[`destination` is required when]..."
139
- 'the `as` prop is a standard anchor element (i.e., "a")',
140
- ),
141
- /** Content of the hyperlink */
142
- // @ts-ignore
143
- children: PropTypes.node.isRequired,
144
- /** Custom class names for the hyperlink */
145
- className: PropTypes.string,
146
- /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
147
- * loaded into the same browsing context as the current one.
148
- * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
149
- * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
150
- */
151
- target: PropTypes.oneOf(['_blank', '_self']),
152
- /** specifies the callback function when the link is clicked */
153
- onClick: PropTypes.func,
154
- /** Alt text for the icon indicating that this link opens in a new tab, if target="_blank". e.g. _("in a new tab") */
155
- externalLinkAlternativeText: PropTypes.string,
156
- /** Tooltip text for the "opens in new tab" icon, if target="_blank". e.g. _("Opens in a new tab"). */
157
- externalLinkTitle: PropTypes.string,
158
- /** type of hyperlink */
159
- variant: PropTypes.oneOf(['default', 'muted', 'brand']),
160
- /** Display the link with an underline. By default, it is only underlined on hover. */
161
- isInline: PropTypes.bool,
162
- /** specify if we need to show launch Icon. By default, it will be visible. */
163
- showLaunchIcon: PropTypes.bool,
164
- };
165
-
166
- Hyperlink.defaultProps = {
167
- as: 'a',
168
- className: undefined,
169
- destination: undefined,
170
- externalLinkAlternativeText: undefined,
171
- externalLinkTitle: undefined,
172
- isInline: false,
173
- onClick: undefined,
174
- showLaunchIcon: true,
175
- target: '_self',
176
- variant: 'default',
177
- };
178
-
179
131
  Hyperlink.displayName = 'Hyperlink';
180
132
 
181
133
  export default Hyperlink;
package/src/ProductTour/Checkpoint.scss CHANGED
@@ -64,7 +64,7 @@
64
64
  }
65
65
 
66
66
  .pgn__checkpoint-page-index {
67
- font-size: $small-font-size;
67
+ font-size: var(--pgn-typography-font-size-sm);
68
68
  }
69
69
  }
70
70
 
package/styles/css/core/variables.css CHANGED
@@ -4,11 +4,11 @@
4
4
  */
5
5
 
6
6
  :root {
7
- --pgn-size-border-width: 1px; /* Default border width. */
8
- --pgn-size-border-radius-base: 0.375rem; /* Default border radius. */
9
- --pgn-size-border-radius-lg: 0.425rem; /* Large border radius. */
10
- --pgn-size-border-radius-sm: 0.25rem; /* Small border radius. */
11
- --pgn-size-rounded-pill: 50rem; /* Pill border radius. */
7
+ --pgn-size-border-width: 1px; /** Default border width. */
8
+ --pgn-size-border-radius-base: 0.375rem; /** Default border radius. */
9
+ --pgn-size-border-radius-lg: 0.425rem; /** Large border radius. */
10
+ --pgn-size-border-radius-sm: 0.25rem; /** Small border radius. */
11
+ --pgn-size-rounded-pill: 50rem; /** Pill border radius. */
12
12
  --pgn-size-alert-border-width: 0;
13
13
  --pgn-size-annotation-arrow-border-width: 0.5rem;
14
14
  --pgn-size-annotation-max-width: 18.75rem;
@@ -141,12 +141,12 @@
141
141
  --pgn-size-tooltip-arrow-width: 0.8rem;
142
142
  --pgn-size-caret-width: 0.3em;
143
143
  --pgn-size-input-btn-focus-width: 1px;
144
- --pgn-size-breakpoint-xs: 0px; /* Starting breakpoint for portrait phones. */
145
- --pgn-size-breakpoint-sm: 576px; /* Starting breakpoint for landscape phones. */
146
- --pgn-size-breakpoint-md: 768px; /* Starting breakpoint for tablets. */
147
- --pgn-size-breakpoint-lg: 992px; /* Starting breakpoint for desktops. */
148
- --pgn-size-breakpoint-xl: 1200px; /* Starting breakpoint for large desktops. */
149
- --pgn-size-breakpoint-xxl: 1400px; /* Starting breakpoint for large desktops, more than 1400px. */
144
+ --pgn-size-breakpoint-xs: 0px; /** Starting breakpoint for portrait phones. */
145
+ --pgn-size-breakpoint-sm: 576px; /** Starting breakpoint for landscape phones. */
146
+ --pgn-size-breakpoint-md: 768px; /** Starting breakpoint for tablets. */
147
+ --pgn-size-breakpoint-lg: 992px; /** Starting breakpoint for desktops. */
148
+ --pgn-size-breakpoint-xl: 1200px; /** Starting breakpoint for large desktops. */
149
+ --pgn-size-breakpoint-xxl: 1400px; /** Starting breakpoint for large desktops, more than 1400px. */
150
150
  --pgn-spacing-action-row-gap-x: 0.5rem;
151
151
  --pgn-spacing-action-row-gap-y: 0.5rem;
152
152
  --pgn-spacing-alert-padding-y: 1.5rem;
@@ -292,12 +292,12 @@
292
292
  --pgn-spacing-list-group-item-padding-x: 1.25rem;
293
293
  --pgn-spacing-paragraph-margin-bottom: 1rem;
294
294
  --pgn-spacing-mark-padding: 0.2em;
295
- --pgn-spacing-spacer-0: 0; /* Space value of level 0 */
296
- --pgn-spacing-spacer-base: 1rem; /* Basic space value */
297
- --pgn-spacing-label-margin-bottom: 0.5rem; /* Margin bottom for label. */
298
- --pgn-spacing-table-cell-padding-base: 0.75rem; /* Padding for tables. */
299
- --pgn-spacing-table-cell-padding-sm: 0.3rem; /* Padding sm for tables. */
300
- --pgn-spacing-grid-gutter-width: 24px; /* Grid gutter width value. */
295
+ --pgn-spacing-spacer-0: 0; /** Space value of level 0 */
296
+ --pgn-spacing-spacer-base: 1rem; /** Basic space value */
297
+ --pgn-spacing-label-margin-bottom: 0.5rem; /** Margin bottom for label. */
298
+ --pgn-spacing-table-cell-padding-base: 0.75rem; /** Padding for tables. */
299
+ --pgn-spacing-table-cell-padding-sm: 0.3rem; /** Padding sm for tables. */
300
+ --pgn-spacing-grid-gutter-width: 24px; /** Grid gutter width value. */
301
301
  --pgn-typography-alert-font-size: 0.875rem;
302
302
  --pgn-typography-alert-line-height: 1.5rem;
303
303
  --pgn-typography-badge-font-size: 75%;
@@ -331,39 +331,39 @@
331
331
  --pgn-typography-link-decoration-brand-hover: underline;
332
332
  --pgn-typography-link-decoration-brand-inline-base: underline;
333
333
  --pgn-typography-link-decoration-brand-inline-hover: underline;
334
- --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Sans-serif font family. */
335
- --pgn-typography-font-family-serif: serif; /* Serif font family. */
336
- --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Monospace font family. */
337
- --pgn-typography-font-size-base: 1.125rem; /* Base font size. */
338
- --pgn-typography-font-size-sm: 87.5%; /* Small font size. */
339
- --pgn-typography-font-size-xs: 75%; /* X-small font size. */
340
- --pgn-typography-font-size-micro: 0.688rem; /* Micro utils text font size. */
341
- --pgn-typography-font-size-h1-base: 2.5rem; /* Base font size of heading level 1. */
342
- --pgn-typography-font-size-h1-mobile: 2.25rem; /* Mobile font size of heading level 1. */
343
- --pgn-typography-font-size-h2-base: 2rem; /* Font size of heading level 2. */
344
- --pgn-typography-font-size-h3-base: 1.375rem; /* Font size of heading level 3. */
345
- --pgn-typography-font-size-h4-base: 1.125rem; /* Font size of heading level 4. */
346
- --pgn-typography-font-size-h5-base: 0.875rem; /* Font size of heading level 5. */
347
- --pgn-typography-font-size-h6-base: 0.75rem; /* Font size of heading level 6. */
348
- --pgn-typography-font-size-display-1: 3.75rem; /* Font size for heading of level 1. */
349
- --pgn-typography-font-size-display-2: 4.875rem; /* Font size for heading of level 2. */
350
- --pgn-typography-font-size-display-3: 5.625rem; /* Font size for heading of level 3. */
351
- --pgn-typography-font-size-display-4: 7.5rem; /* Font size for heading of level 4. */
352
- --pgn-typography-font-size-display-mobile-1: 3.25rem; /* Mobile font size for heading of level 1. */
353
- --pgn-typography-font-weight-lighter: lighter; /* Lighter font weight. */
354
- --pgn-typography-font-weight-light: 300; /* Light font weight. */
355
- --pgn-typography-font-weight-normal: 400; /* Normal font weight. */
356
- --pgn-typography-font-weight-semi-bold: 500; /* Semi-bold font weight. */
357
- --pgn-typography-font-weight-bold: 700; /* Bold font weight. */
358
- --pgn-typography-font-weight-bolder: bolder; /* Bolder font weight. */
359
- --pgn-typography-font-weight-lead: inherit; /* Lead text font weight. */
360
- --pgn-typography-font-weight-table-th: 700; /* Table th font weight. */
361
- --pgn-typography-line-height-base: 1.5556; /* Basic line height. */
362
- --pgn-typography-line-height-lg: 1.5; /* Large line height. */
363
- --pgn-typography-line-height-sm: 1.5; /* Small line height. */
364
- --pgn-typography-line-height-micro: 0.938rem; /* Micro utils line height. */
365
- --pgn-typography-line-height-display-base: 1; /* Standard display line height. */
366
- --pgn-typography-line-height-display-mobile: 3.5rem; /* Mobile display line height. */
334
+ --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /** Sans-serif font family. */
335
+ --pgn-typography-font-family-serif: serif; /** Serif font family. */
336
+ --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /** Monospace font family. */
337
+ --pgn-typography-font-size-base: 1.125rem; /** Base font size. */
338
+ --pgn-typography-font-size-sm: 87.5%; /** Small font size. */
339
+ --pgn-typography-font-size-xs: 75%; /** X-small font size. */
340
+ --pgn-typography-font-size-micro: 0.688rem; /** Micro utils text font size. */
341
+ --pgn-typography-font-size-h1-base: 2.5rem; /** Base font size of heading level 1. */
342
+ --pgn-typography-font-size-h1-mobile: 2.25rem; /** Mobile font size of heading level 1. */
343
+ --pgn-typography-font-size-h2-base: 2rem; /** Font size of heading level 2. */
344
+ --pgn-typography-font-size-h3-base: 1.375rem; /** Font size of heading level 3. */
345
+ --pgn-typography-font-size-h4-base: 1.125rem; /** Font size of heading level 4. */
346
+ --pgn-typography-font-size-h5-base: 0.875rem; /** Font size of heading level 5. */
347
+ --pgn-typography-font-size-h6-base: 0.75rem; /** Font size of heading level 6. */
348
+ --pgn-typography-font-size-display-1: 3.75rem; /** Font size for heading of level 1. */
349
+ --pgn-typography-font-size-display-2: 4.875rem; /** Font size for heading of level 2. */
350
+ --pgn-typography-font-size-display-3: 5.625rem; /** Font size for heading of level 3. */
351
+ --pgn-typography-font-size-display-4: 7.5rem; /** Font size for heading of level 4. */
352
+ --pgn-typography-font-size-display-mobile-1: 3.25rem; /** Mobile font size for heading of level 1. */
353
+ --pgn-typography-font-weight-lighter: lighter; /** Lighter font weight. */
354
+ --pgn-typography-font-weight-light: 300; /** Light font weight. */
355
+ --pgn-typography-font-weight-normal: 400; /** Normal font weight. */
356
+ --pgn-typography-font-weight-semi-bold: 500; /** Semi-bold font weight. */
357
+ --pgn-typography-font-weight-bold: 700; /** Bold font weight. */
358
+ --pgn-typography-font-weight-bolder: bolder; /** Bolder font weight. */
359
+ --pgn-typography-font-weight-lead: inherit; /** Lead text font weight. */
360
+ --pgn-typography-font-weight-table-th: 700; /** Table th font weight. */
361
+ --pgn-typography-line-height-base: 1.5556; /** Basic line height. */
362
+ --pgn-typography-line-height-lg: 1.5; /** Large line height. */
363
+ --pgn-typography-line-height-sm: 1.5; /** Small line height. */
364
+ --pgn-typography-line-height-micro: 0.938rem; /** Micro utils line height. */
365
+ --pgn-typography-line-height-display-base: 1; /** Standard display line height. */
366
+ --pgn-typography-line-height-display-mobile: 3.5rem; /** Mobile display line height. */
367
367
  --pgn-transition-badge: none;
368
368
  --pgn-transition-btn: none;
369
369
  --pgn-transition-carousel-base-property: transform;
@@ -414,26 +414,26 @@
414
414
  --pgn-transition-progress-bar-transition-timing-function: ease;
415
415
  --pgn-transition-progress-bar-transition-delay: 0s;
416
416
  --pgn-transition-progress-bar-transition-behavior: normal;
417
- --pgn-transition-base-property: all; /* Generic transition for any property change */
418
- --pgn-transition-base-duration: 0.2s; /* Generic transition for any property change */
419
- --pgn-transition-base-timing-function: ease-in-out; /* Generic transition for any property change */
420
- --pgn-transition-base-delay: 0s; /* Generic transition for any property change */
421
- --pgn-transition-base-behavior: normal; /* Generic transition for any property change */
422
- --pgn-transition-fade-property: opacity; /* Opacity transition that takes 150ms */
423
- --pgn-transition-fade-duration: 0.15s; /* Opacity transition that takes 150ms */
424
- --pgn-transition-fade-timing-function: linear; /* Opacity transition that takes 150ms */
425
- --pgn-transition-fade-delay: 0s; /* Opacity transition that takes 150ms */
426
- --pgn-transition-fade-behavior: normal; /* Opacity transition that takes 150ms */
427
- --pgn-transition-collapse-height-property: height; /* Collapse transition for height that takes 350ms */
428
- --pgn-transition-collapse-height-duration: 0.35s; /* Collapse transition for height that takes 350ms */
429
- --pgn-transition-collapse-height-timing-function: ease; /* Collapse transition for height that takes 350ms */
430
- --pgn-transition-collapse-height-delay: 0s; /* Collapse transition for height that takes 350ms */
431
- --pgn-transition-collapse-height-behavior: normal; /* Collapse transition for height that takes 350ms */
432
- --pgn-transition-collapse-width-property: width; /* Collapse transition for width that takes 350ms */
433
- --pgn-transition-collapse-width-duration: 0.35s; /* Collapse transition for width that takes 350ms */
434
- --pgn-transition-collapse-width-timing-function: ease; /* Collapse transition for width that takes 350ms */
435
- --pgn-transition-collapse-width-delay: 0s; /* Collapse transition for width that takes 350ms */
436
- --pgn-transition-collapse-width-behavior: normal; /* Collapse transition for width that takes 350ms */
417
+ --pgn-transition-base-property: all; /** Generic transition for any property change */
418
+ --pgn-transition-base-duration: 0.2s; /** Generic transition for any property change */
419
+ --pgn-transition-base-timing-function: ease-in-out; /** Generic transition for any property change */
420
+ --pgn-transition-base-delay: 0s; /** Generic transition for any property change */
421
+ --pgn-transition-base-behavior: normal; /** Generic transition for any property change */
422
+ --pgn-transition-fade-property: opacity; /** Opacity transition that takes 150ms */
423
+ --pgn-transition-fade-duration: 0.15s; /** Opacity transition that takes 150ms */
424
+ --pgn-transition-fade-timing-function: linear; /** Opacity transition that takes 150ms */
425
+ --pgn-transition-fade-delay: 0s; /** Opacity transition that takes 150ms */
426
+ --pgn-transition-fade-behavior: normal; /** Opacity transition that takes 150ms */
427
+ --pgn-transition-collapse-height-property: height; /** Collapse transition for height that takes 350ms */
428
+ --pgn-transition-collapse-height-duration: 0.35s; /** Collapse transition for height that takes 350ms */
429
+ --pgn-transition-collapse-height-timing-function: ease; /** Collapse transition for height that takes 350ms */
430
+ --pgn-transition-collapse-height-delay: 0s; /** Collapse transition for height that takes 350ms */
431
+ --pgn-transition-collapse-height-behavior: normal; /** Collapse transition for height that takes 350ms */
432
+ --pgn-transition-collapse-width-property: width; /** Collapse transition for width that takes 350ms */
433
+ --pgn-transition-collapse-width-duration: 0.35s; /** Collapse transition for width that takes 350ms */
434
+ --pgn-transition-collapse-width-timing-function: ease; /** Collapse transition for width that takes 350ms */
435
+ --pgn-transition-collapse-width-delay: 0s; /** Collapse transition for width that takes 350ms */
436
+ --pgn-transition-collapse-width-behavior: normal; /** Collapse transition for width that takes 350ms */
437
437
  --pgn-elevation-dropdown-zindex: 1000;
438
438
  --pgn-elevation-modal-backdrop-zindex: 1040;
439
439
  --pgn-elevation-modal-zindex: 1050;
@@ -442,19 +442,19 @@
442
442
  --pgn-elevation-sheet-zindex-backdrop: 1031;
443
443
  --pgn-elevation-sheet-zindex-main: 1032;
444
444
  --pgn-elevation-tooltip-zindex: 1070;
445
- --pgn-elevation-zindex-0: 0; /* z-index of level 0. */
446
- --pgn-elevation-zindex-200: 200; /* z-index of level 200. */
447
- --pgn-elevation-zindex-400: 400; /* z-index of level 400. */
448
- --pgn-elevation-zindex-600: 600; /* z-index of level 600. */
449
- --pgn-elevation-zindex-800: 800; /* z-index of level 800. */
450
- --pgn-elevation-zindex-1000: 1000; /* z-index of level 1000. */
451
- --pgn-elevation-zindex-1200: 1200; /* z-index of level 1200. */
452
- --pgn-elevation-zindex-1400: 1400; /* z-index of level 1400. */
453
- --pgn-elevation-zindex-1600: 1600; /* z-index of level 1600. */
454
- --pgn-elevation-zindex-1800: 1800; /* z-index of level 1800. */
455
- --pgn-elevation-zindex-2000: 2000; /* z-index of level 2000. */
456
- --pgn-elevation-zindex-sticky: 1020; /* z-index for sticky element. */
457
- --pgn-elevation-zindex-fixed: 1030; /* z-index of for fixed element. */
445
+ --pgn-elevation-zindex-0: 0; /** z-index of level 0. */
446
+ --pgn-elevation-zindex-200: 200; /** z-index of level 200. */
447
+ --pgn-elevation-zindex-400: 400; /** z-index of level 400. */
448
+ --pgn-elevation-zindex-600: 600; /** z-index of level 600. */
449
+ --pgn-elevation-zindex-800: 800; /** z-index of level 800. */
450
+ --pgn-elevation-zindex-1000: 1000; /** z-index of level 1000. */
451
+ --pgn-elevation-zindex-1200: 1200; /** z-index of level 1200. */
452
+ --pgn-elevation-zindex-1400: 1400; /** z-index of level 1400. */
453
+ --pgn-elevation-zindex-1600: 1600; /** z-index of level 1600. */
454
+ --pgn-elevation-zindex-1800: 1800; /** z-index of level 1800. */
455
+ --pgn-elevation-zindex-2000: 2000; /** z-index of level 2000. */
456
+ --pgn-elevation-zindex-sticky: 1020; /** z-index for sticky element. */
457
+ --pgn-elevation-zindex-fixed: 1030; /** z-index of for fixed element. */
458
458
  --pgn-other-form-control-cursor: auto;
459
459
  --pgn-other-form-control-range-track-cursor: pointer;
460
460
  --pgn-other-form-control-custom-file-lang: en;
@@ -539,17 +539,17 @@
539
539
  --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
540
540
  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
541
541
  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
542
- --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /* Space value of level 1 */
543
- --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /* Space value of level 2 */
544
- --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /* Space value of level 3 */
545
- --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); /* Space value of level 4 */
546
- --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); /* Space value of level 5 */
547
- --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); /* Space value of level 6 */
548
- --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); /* Space value of level 1.5 */
549
- --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); /* Space value of level 2.5 */
550
- --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /* Space value of level 3.5 */
551
- --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /* Space value of level 4.5 */
552
- --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /* Space value of level 5.5 */
542
+ --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /** Space value of level 1 */
543
+ --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /** Space value of level 2 */
544
+ --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /** Space value of level 3 */
545
+ --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); /** Space value of level 4 */
546
+ --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); /** Space value of level 5 */
547
+ --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); /** Space value of level 6 */
548
+ --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); /** Space value of level 1.5 */
549
+ --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); /** Space value of level 2.5 */
550
+ --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /** Space value of level 3.5 */
551
+ --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /** Space value of level 4.5 */
552
+ --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /** Space value of level 5.5 */
553
553
  --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
554
554
  --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
555
555
  --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
@@ -587,21 +587,21 @@
587
587
  --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
588
588
  --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-sm);
589
589
  --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
590
- --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */
591
- --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */
592
- --pgn-typography-font-size-h2-mobile: var(--pgn-typography-font-size-h2-base); /* Mobile font size of heading level 2. */
593
- --pgn-typography-font-size-h3-mobile: var(--pgn-typography-font-size-h3-base); /* Mobile font size of heading level 3. */
594
- --pgn-typography-font-size-h4-mobile: var(--pgn-typography-font-size-h4-base); /* Mobile font size of heading level 4. */
595
- --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base); /* Mobile font size of heading level 5. */
596
- --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base); /* Mobile font size of heading level 6. */
597
- --pgn-typography-font-size-display-mobile-2: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 2. */
598
- --pgn-typography-font-size-display-mobile-3: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 3. */
599
- --pgn-typography-font-size-display-mobile-4: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 4. */
600
- --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); /* Basic font weight. */
601
- --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold); /* Font weight of display level 1. */
602
- --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold); /* Font weight of display level 2. */
603
- --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold); /* Font weight of display level 3. */
604
- --pgn-typography-font-weight-display-4: var(--pgn-typography-font-weight-bold); /* Font weight of display level 4. */
590
+ --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /** Basic font family. */
591
+ --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /** Lead text font size. */
592
+ --pgn-typography-font-size-h2-mobile: var(--pgn-typography-font-size-h2-base); /** Mobile font size of heading level 2. */
593
+ --pgn-typography-font-size-h3-mobile: var(--pgn-typography-font-size-h3-base); /** Mobile font size of heading level 3. */
594
+ --pgn-typography-font-size-h4-mobile: var(--pgn-typography-font-size-h4-base); /** Mobile font size of heading level 4. */
595
+ --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base); /** Mobile font size of heading level 5. */
596
+ --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base); /** Mobile font size of heading level 6. */
597
+ --pgn-typography-font-size-display-mobile-2: var(--pgn-typography-font-size-display-mobile-1); /** Mobile font size for heading of level 2. */
598
+ --pgn-typography-font-size-display-mobile-3: var(--pgn-typography-font-size-display-mobile-1); /** Mobile font size for heading of level 3. */
599
+ --pgn-typography-font-size-display-mobile-4: var(--pgn-typography-font-size-display-mobile-1); /** Mobile font size for heading of level 4. */
600
+ --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); /** Basic font weight. */
601
+ --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold); /** Font weight of display level 1. */
602
+ --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold); /** Font weight of display level 2. */
603
+ --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold); /** Font weight of display level 3. */
604
+ --pgn-typography-font-weight-display-4: var(--pgn-typography-font-weight-bold); /** Font weight of display level 4. */
605
605
  --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration);
606
606
  --pgn-transition-carousel-indicator-duration: var(--pgn-transition-carousel-duration);
607
607
  --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);