@openedx/paragon 23.0.0-alpha.1 → 23.0.0-alpha.3

package/dist/index.d.ts

@@ -5,9 +5,14 @@
 // Things that have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 export { default as Bubble } from './Bubble';
+export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
+export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -20,7 +25,6 @@ export const Avatar: any; // from './Avatar';
 export const AvatarButton: any; // from './AvatarButton';
 export const Badge: any; // from './Badge';
 export const Breadcrumb: any; // from './Breadcrumb';
-export const Button: any, ButtonGroup: any, ButtonToolbar: any; // from './Button';
 export const
   Card: any,
   CardColumns: any,
@@ -72,8 +76,6 @@ export const
   FormAutosuggestOption: any,
   InputGroup: any;
 // from './Form';
-export const Hyperlink: any, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT: string, HYPER_LINK_EXTERNAL_LINK_TITLE: string; // from './Hyperlink';
-export const IconButton: any, IconButtonWithTooltip: any; // from './IconButton';
 export const IconButtonToggle: any; // from './IconButtonToggle';
 export const Input: any; // from './Input';
 export const InputSelect: any; // from './InputSelect';
@@ -106,7 +108,6 @@ export const
   NavLink: any;
 // from './Nav';
 export const Navbar: any, NavbarBrand: any, NAVBAR_LABEL: string; // from './Navbar';
-export const Overlay: any, OverlayTrigger: any; // from './Overlay';
 export const PageBanner: any, PAGE_BANNER_DISMISS_ALT_TEXT: string; // from './PageBanner';
 export const
   Pagination: any,
@@ -145,7 +146,6 @@ export const
 // from './Tabs';
 export const TextArea: any; // from './TextArea';
 export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
-export const Tooltip: any; // from './Tooltip';
 export const ValidationFormGroup: any; // from './ValidationFormGroup';
 export const TransitionReplace: any; // from './TransitionReplace';
 export const ValidationMessage: any; // from './ValidationMessage';

package/dist/index.js

@@ -1,13 +1,18 @@
-// To keep this file in sync with the .d.ts file, it's in the same order
-// and each line number is the same
+// Keep this file in sync with the .d.ts file (manually). It's in the same order
+// and each line number is the same, to make it easier.
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 export { default as Bubble } from './Bubble';
+export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
+export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -20,7 +25,6 @@ export { default as Avatar } from './Avatar';
 export { default as AvatarButton } from './AvatarButton';
 export { default as Badge } from './Badge';
 export { default as Breadcrumb } from './Breadcrumb';
-export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export {
   default as Card,
   CardColumns,
@@ -69,8 +73,6 @@ export {
   FormAutosuggestOption,
   InputGroup,
 } from './Form';
-export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
-export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as IconButtonToggle } from './IconButtonToggle';
 export { default as Image, Figure } from './Image';
 export { default as MailtoLink, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT, MAIL_TO_LINK_EXTERNAL_LINK_TITLE } from './MailtoLink';
@@ -97,7 +99,6 @@ export {
   NavLink,
 } from './Nav';
 export { default as Navbar, NavbarBrand, NAVBAR_LABEL } from './Navbar';
-export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as PageBanner, PAGE_BANNER_DISMISS_ALT_TEXT } from './PageBanner';
 export {
   default as Pagination,
@@ -132,7 +133,6 @@ export {
   TabPane,
 } from './Tabs';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
-export { default as Tooltip } from './Tooltip';
 export { default as TransitionReplace } from './TransitionReplace';
 export { default as ValidationMessage } from './ValidationMessage';
 export { default as DataTable } from './DataTable';

package/dist/light.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 09 May 2024 13:33:11 GMT
+ * Generated on Wed, 15 May 2024 07:58:56 GMT
  */
 
 :root {
@@ -253,13 +253,11 @@
   --pgn-elevation-form-control-indicator-active: none;
   --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1);
   --pgn-elevation-form-control-indicator-checked-base: none;
-  --pgn-elevation-form-input-focus: none;
   --pgn-elevation-form-input-base: none;
   --pgn-elevation-code-kbd-box-shadow: none;
   --pgn-elevation-btn-box-shadow-active: none;
   --pgn-elevation-btn-box-shadow-base: none;
-  --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))  drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
-  --pgn-elevation-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
+  --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
   --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
   --pgn-elevation-popover-box-shadow: none;
   --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
@@ -453,11 +451,13 @@
   --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-yiq-light: var(--pgn-color-white);
   --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200);
   --pgn-color-list-group-action-base: var(--pgn-color-gray-700);
   --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600);
   --pgn-color-list-group-border: #00000020;
   --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100);
+  --pgn-color-list-group-bg-base: var(--pgn-color-white);
   --pgn-color-hr-border: #0000001A;
   --pgn-color-headings-base: var(--pgn-color-black);
   --pgn-color-body-base: var(--pgn-color-gray-700);
@@ -472,7 +472,6 @@
   --pgn-color-dropdown-link-base: var(--pgn-color-gray-900);
   --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100);
   --pgn-color-dropdown-border: #00000026;
-  --pgn-color-data-table-border: var(--pgn-color-gray-200);
   --pgn-color-data-table-bg-is-loading: #FFFFFFB3;
   --pgn-color-code-pre: var(--pgn-color-gray-900);
   --pgn-color-code-kbd-bg: var(--pgn-color-gray-700);
@@ -565,7 +564,6 @@
   --pgn-color-bubble-text-warning: var(--pgn-color-white);
   --pgn-color-bubble-text-success: var(--pgn-color-white);
   --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white);
-  --pgn-color-breadcrumb-bg: var(--pgn-color-gray-200);
   --pgn-color-badge-bg-dark: var(--pgn-color-dark-base);
   --pgn-color-badge-bg-light: var(--pgn-color-light-base);
   --pgn-color-badge-bg-primary: var(--pgn-color-primary-base);
@@ -611,7 +609,6 @@
   --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
   --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
   --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
-  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
   --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
@@ -896,11 +893,12 @@
   --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base);
   --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-blockquote-small: var(--pgn-color-gray-500);
   --pgn-color-text-muted: var(--pgn-color-gray-500);
   --pgn-color-list-group-action-active-base: var(--pgn-color-body-base);
   --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base);
+  --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
   --pgn-color-list-group-active-base: var(--pgn-color-active);
-  --pgn-color-list-group-bg-base: var(--pgn-color-bg-base);
   --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500);
   --pgn-color-link-brand-base: var(--pgn-color-brand-500);
   --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500);
@@ -931,6 +929,7 @@
   --pgn-color-dropdown-bg: var(--pgn-color-bg-base);
   --pgn-color-dropdown-header: var(--pgn-color-gray-500);
   --pgn-color-dropdown-text: var(--pgn-color-body-base);
+  --pgn-color-data-table-border: var(--pgn-color-light-300);
   --pgn-color-data-table-bg-base: var(--pgn-color-bg-base);
   --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark);
   --pgn-color-chip-label-base: var(--pgn-color-primary-700);
@@ -939,7 +938,7 @@
   --pgn-color-chip-border-base: var(--pgn-color-light-800);
   --pgn-color-chip-bg-dark: var(--pgn-color-primary-300);
   --pgn-color-card-divider-bg: var(--pgn-color-light-400);
-  --pgn-color-card-border-focus-base: #0A305580;
+  --pgn-color-card-border-focus-base: var(--pgn-color-primary-500);
   --pgn-color-card-bg-muted: var(--pgn-color-light-200);
   --pgn-color-card-bg-dark: var(--pgn-color-primary-500);
   --pgn-color-card-bg-base: var(--pgn-color-bg-base);
@@ -1137,6 +1136,7 @@
   --pgn-color-bg-active: var(--pgn-color-primary-500);
   --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
+  --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500);
   --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
   --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
   --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
@@ -1233,7 +1233,6 @@
   --pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base);
   --pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base);
   --pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base);
-  --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
   --pgn-color-list-group-active-bg: var(--pgn-color-bg-active);
   --pgn-color-link-brand-inline-hover-base: #51002BFF;
   --pgn-color-link-brand-inline-decoration: #9D00544D;
@@ -1468,13 +1467,14 @@
   --pgn-color-theme-bg-success: var(--pgn-color-success-100);
   --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100);
   --pgn-color-table-caption: var(--pgn-color-text-muted);
-  --pgn-color-input-btn-focus: var(--pgn-color-input-focus);
+  --pgn-color-input-btn-focus: var(--pgn-color-bg-active);
   --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="%23454545FF"/></svg>');
   --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23C32D3AFF'/></svg>");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23178253FF'/></svg>");
+  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
   --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
   --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300);
   --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);