@cloudscape-design/components-themeable 3.0.3 → 3.0.6

package/lib/internal/template/button/styles.selectors.js

@@ -2,23 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content": "awsui_content_vjswe_1tzfx_97",
-  "button": "awsui_button_vjswe_1tzfx_101",
-  "variant-normal": "awsui_variant-normal_vjswe_1tzfx_122",
-  "is-activated": "awsui_is-activated_vjswe_1tzfx_135",
-  "variant-icon": "awsui_variant-icon_vjswe_1tzfx_162",
-  "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_1tzfx_162",
-  "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_1tzfx_162",
-  "variant-inline-icon": "awsui_variant-inline-icon_vjswe_1tzfx_180",
-  "disabled": "awsui_disabled_vjswe_1tzfx_198",
-  "variant-primary": "awsui_variant-primary_vjswe_1tzfx_206",
-  "variant-link": "awsui_variant-link_vjswe_1tzfx_290",
-  "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_1tzfx_710",
-  "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_1tzfx_797",
-  "button-no-text": "awsui_button-no-text_vjswe_1tzfx_881",
-  "button-no-wrap": "awsui_button-no-wrap_vjswe_1tzfx_885",
-  "icon-left": "awsui_icon-left_vjswe_1tzfx_901",
-  "icon-right": "awsui_icon-right_vjswe_1tzfx_906",
-  "icon": "awsui_icon_vjswe_1tzfx_901"
+  "content": "awsui_content_vjswe_1qh5m_97",
+  "button": "awsui_button_vjswe_1qh5m_101",
+  "variant-normal": "awsui_variant-normal_vjswe_1qh5m_122",
+  "is-activated": "awsui_is-activated_vjswe_1qh5m_135",
+  "variant-icon": "awsui_variant-icon_vjswe_1qh5m_162",
+  "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_1qh5m_162",
+  "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_1qh5m_162",
+  "variant-inline-icon": "awsui_variant-inline-icon_vjswe_1qh5m_180",
+  "disabled": "awsui_disabled_vjswe_1qh5m_198",
+  "variant-primary": "awsui_variant-primary_vjswe_1qh5m_206",
+  "variant-link": "awsui_variant-link_vjswe_1qh5m_290",
+  "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_1qh5m_710",
+  "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_1qh5m_797",
+  "button-no-text": "awsui_button-no-text_vjswe_1qh5m_881",
+  "button-no-wrap": "awsui_button-no-wrap_vjswe_1qh5m_885",
+  "icon-left": "awsui_icon-left_vjswe_1qh5m_901",
+  "icon-right": "awsui_icon-right_vjswe_1qh5m_906",
+  "icon": "awsui_icon_vjswe_1qh5m_901"
 };
   

package/lib/internal/template/checkbox/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_k2y2q_a4m0p_93",
-  "checkbox-control": "awsui_checkbox-control_k2y2q_a4m0p_105",
-  "input": "awsui_input_k2y2q_a4m0p_113"
+  "root": "awsui_root_k2y2q_ra7eu_93",
+  "checkbox-control": "awsui_checkbox-control_k2y2q_ra7eu_105",
+  "input": "awsui_input_k2y2q_ra7eu_113"
 };
   

package/lib/internal/template/checkbox/styles.scoped.css

@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-div.awsui_root_k2y2q_a4m0p_93:not(#\9) {
+div.awsui_root_k2y2q_ra7eu_93:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -133,7 +133,7 @@ div.awsui_root_k2y2q_a4m0p_93:not(#\9) {
   display: flex;
 }
 
-.awsui_checkbox-control_k2y2q_a4m0p_105:not(#\9) {
+.awsui_checkbox-control_k2y2q_ra7eu_105:not(#\9) {
   margin-top: calc((22px - 14px) / 2);
   margin-top: calc((var(--font-body-m-line-height-i7xxvv, 22px) - var(--size-control-eyly4k, 14px)) / 2);
   min-height: 14px;
@@ -146,17 +146,17 @@ div.awsui_root_k2y2q_a4m0p_93:not(#\9) {
   width: var(--size-control-eyly4k, 14px);
 }
 
-.awsui_input_k2y2q_a4m0p_113[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_input_k2y2q_ra7eu_113[data-awsui-focus-visible=true]:not(#\9):focus {
   /* stylelint-disable-next-line selector-max-type -- Can't access the outline class from focus-visible */
 }
-.awsui_input_k2y2q_a4m0p_113[data-awsui-focus-visible=true]:not(#\9):focus + div {
+.awsui_input_k2y2q_ra7eu_113[data-awsui-focus-visible=true]:not(#\9):focus + div {
   position: relative;
 }
-.awsui_input_k2y2q_a4m0p_113[data-awsui-focus-visible=true]:not(#\9):focus + div {
+.awsui_input_k2y2q_ra7eu_113[data-awsui-focus-visible=true]:not(#\9):focus + div {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_input_k2y2q_a4m0p_113[data-awsui-focus-visible=true]:not(#\9):focus + div::before {
+.awsui_input_k2y2q_ra7eu_113[data-awsui-focus-visible=true]:not(#\9):focus + div::before {
   content: " ";
   display: block;
   position: absolute;
@@ -166,6 +166,6 @@ div.awsui_root_k2y2q_a4m0p_93:not(#\9) {
   height: calc(100% + 2 * 2px);
   border-radius: 2px;
   border-radius: var(--border-control-focus-ring-radius-default-9royjh, 2px);
-  box-shadow: 0 0 0 2px #00a1c9;
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-bs10w5, #00a1c9);
+  box-shadow: 0 0 0 2px #0073bb;
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }

package/lib/internal/template/checkbox/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_k2y2q_a4m0p_93",
-  "checkbox-control": "awsui_checkbox-control_k2y2q_a4m0p_105",
-  "input": "awsui_input_k2y2q_a4m0p_113"
+  "root": "awsui_root_k2y2q_ra7eu_93",
+  "checkbox-control": "awsui_checkbox-control_k2y2q_ra7eu_105",
+  "input": "awsui_input_k2y2q_ra7eu_113"
 };
   

package/lib/internal/template/code-editor/preferences-modal.js

@@ -10,7 +10,7 @@ import InternalFormField from '../form-field/internal';
 import InternalModal from '../modal/internal';
 import InternalSelect from '../select/internal';
 import InternalSpaceBetween from '../space-between/internal';
-import { FormFieldDomContext } from '../internal/context/form-field-context';
+import { FormFieldContext } from '../internal/context/form-field-context';
 import { LightThemes, DarkThemes } from './ace-themes';
 export default (function (props) {
     var _a, _b, _c, _d;
@@ -21,7 +21,7 @@ export default (function (props) {
         setTheme(e.detail.selectedOption.value);
         setSelectedThemeOption(e.detail.selectedOption);
     };
-    return (React.createElement(FormFieldDomContext.RootProvider, { value: {} },
+    return (React.createElement(FormFieldContext.Provider, { value: {} },
         React.createElement(InternalModal, { size: "medium", visible: true, onDismiss: props.onDismiss, header: props.i18nStrings.header, closeAriaLabel: props.i18nStrings.cancel, footer: React.createElement(InternalBox, { float: "right" },
                 React.createElement(InternalSpaceBetween, { direction: "horizontal", size: "xs" },
                     React.createElement(InternalButton, { onClick: props.onDismiss }, props.i18nStrings.cancel),

package/lib/internal/template/code-editor/preferences-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"preferences-modal.js","sourceRoot":"","sources":["../../../src/code-editor/preferences-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalModal from '../modal/internal';\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { FormFieldDomContext } from '../internal/context/form-field-context';\nimport { NonCancelableCustomEvent } from '../internal/events';\nimport { LightThemes, DarkThemes } from './ace-themes';\nimport { CodeEditorProps } from './interfaces';\n\ninterface PreferencesModali18nStrings {\n  header: string;\n  cancel: string;\n  confirm: string;\n  wrapLines: string;\n  theme: string;\n  lightThemes: string;\n  darkThemes: string;\n}\n\ninterface PreferencesModalProps {\n  preferences?: Partial<CodeEditorProps.Preferences>;\n\n  i18nStrings: PreferencesModali18nStrings;\n\n  defaultTheme: CodeEditorProps.Theme;\n\n  onConfirm: (preferences: CodeEditorProps.Preferences) => void;\n  onDismiss: () => void;\n}\n\nexport default (props: PreferencesModalProps) => {\n  const [wrapLines, setWrapLines] = useState<boolean>(props.preferences?.wrapLines ?? true);\n  const [theme, setTheme] = useState<CodeEditorProps.Theme>(props.preferences?.theme ?? props.defaultTheme);\n  const [selectedThemeOption, setSelectedThemeOption] = useState<SelectProps.Option>(\n    () => [...LightThemes, ...DarkThemes].filter(t => t.value === theme)[0]\n  );\n\n  const onThemeSelected = (e: NonCancelableCustomEvent<SelectProps.ChangeDetail>) => {\n    setTheme(e.detail.selectedOption.value as CodeEditorProps.Theme);\n    setSelectedThemeOption(e.detail.selectedOption);\n  };\n\n  return (\n    <FormFieldDomContext.RootProvider value={{}}>\n      <InternalModal\n        size=\"medium\"\n        visible={true}\n        onDismiss={props.onDismiss}\n        header={props.i18nStrings.header}\n        closeAriaLabel={props.i18nStrings.cancel}\n        footer={\n          <InternalBox float=\"right\">\n            <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n              <InternalButton onClick={props.onDismiss}>{props.i18nStrings.cancel}</InternalButton>\n              <InternalButton onClick={() => props.onConfirm({ wrapLines, theme })} variant=\"primary\">\n                {props.i18nStrings.confirm}\n              </InternalButton>\n            </InternalSpaceBetween>\n          </InternalBox>\n        }\n      >\n        <InternalColumnLayout columns={2} variant=\"text-grid\">\n          <div>\n            <InternalCheckbox checked={wrapLines} onChange={e => setWrapLines(e.detail.checked)}>\n              {props.i18nStrings.wrapLines}\n            </InternalCheckbox>\n          </div>\n          <div>\n            <InternalFormField label={props.i18nStrings.theme}>\n              <InternalSelect\n                selectedOption={selectedThemeOption}\n                onChange={onThemeSelected}\n                options={[\n                  { label: props.i18nStrings.lightThemes, options: LightThemes },\n                  { label: props.i18nStrings.darkThemes, options: DarkThemes },\n                ]}\n                filteringType=\"auto\"\n              />\n            </InternalFormField>\n          </div>\n        </InternalColumnLayout>\n      </InternalModal>\n    </FormFieldDomContext.RootProvider>\n  );\n};\n"]}
+{"version":3,"file":"preferences-modal.js","sourceRoot":"","sources":["../../../src/code-editor/preferences-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalModal from '../modal/internal';\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { FormFieldContext } from '../internal/context/form-field-context';\nimport { NonCancelableCustomEvent } from '../internal/events';\nimport { LightThemes, DarkThemes } from './ace-themes';\nimport { CodeEditorProps } from './interfaces';\n\ninterface PreferencesModali18nStrings {\n  header: string;\n  cancel: string;\n  confirm: string;\n  wrapLines: string;\n  theme: string;\n  lightThemes: string;\n  darkThemes: string;\n}\n\ninterface PreferencesModalProps {\n  preferences?: Partial<CodeEditorProps.Preferences>;\n\n  i18nStrings: PreferencesModali18nStrings;\n\n  defaultTheme: CodeEditorProps.Theme;\n\n  onConfirm: (preferences: CodeEditorProps.Preferences) => void;\n  onDismiss: () => void;\n}\n\nexport default (props: PreferencesModalProps) => {\n  const [wrapLines, setWrapLines] = useState<boolean>(props.preferences?.wrapLines ?? true);\n  const [theme, setTheme] = useState<CodeEditorProps.Theme>(props.preferences?.theme ?? props.defaultTheme);\n  const [selectedThemeOption, setSelectedThemeOption] = useState<SelectProps.Option>(\n    () => [...LightThemes, ...DarkThemes].filter(t => t.value === theme)[0]\n  );\n\n  const onThemeSelected = (e: NonCancelableCustomEvent<SelectProps.ChangeDetail>) => {\n    setTheme(e.detail.selectedOption.value as CodeEditorProps.Theme);\n    setSelectedThemeOption(e.detail.selectedOption);\n  };\n\n  return (\n    <FormFieldContext.Provider value={{}}>\n      <InternalModal\n        size=\"medium\"\n        visible={true}\n        onDismiss={props.onDismiss}\n        header={props.i18nStrings.header}\n        closeAriaLabel={props.i18nStrings.cancel}\n        footer={\n          <InternalBox float=\"right\">\n            <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n              <InternalButton onClick={props.onDismiss}>{props.i18nStrings.cancel}</InternalButton>\n              <InternalButton onClick={() => props.onConfirm({ wrapLines, theme })} variant=\"primary\">\n                {props.i18nStrings.confirm}\n              </InternalButton>\n            </InternalSpaceBetween>\n          </InternalBox>\n        }\n      >\n        <InternalColumnLayout columns={2} variant=\"text-grid\">\n          <div>\n            <InternalCheckbox checked={wrapLines} onChange={e => setWrapLines(e.detail.checked)}>\n              {props.i18nStrings.wrapLines}\n            </InternalCheckbox>\n          </div>\n          <div>\n            <InternalFormField label={props.i18nStrings.theme}>\n              <InternalSelect\n                selectedOption={selectedThemeOption}\n                onChange={onThemeSelected}\n                options={[\n                  { label: props.i18nStrings.lightThemes, options: LightThemes },\n                  { label: props.i18nStrings.darkThemes, options: DarkThemes },\n                ]}\n                filteringType=\"auto\"\n              />\n            </InternalFormField>\n          </div>\n        </InternalColumnLayout>\n      </InternalModal>\n    </FormFieldContext.Provider>\n  );\n};\n"]}

package/lib/internal/template/code-editor/styles.css.js

@@ -1,38 +1,38 @@
 
     import './styles.scoped.css';
     export default {
-  "code-editor": "awsui_code-editor_1gl9c_d2zui_98",
-  "code-editor-refresh": "awsui_code-editor-refresh_1gl9c_d2zui_534",
-  "pane": "awsui_pane_1gl9c_d2zui_546",
-  "pane__close-container": "awsui_pane__close-container_1gl9c_d2zui_557",
-  "pane__list": "awsui_pane__list_1gl9c_d2zui_562",
-  "pane__table": "awsui_pane__table_1gl9c_d2zui_569",
-  "pane__item": "awsui_pane__item_1gl9c_d2zui_574",
-  "pane__cell": "awsui_pane__cell_1gl9c_d2zui_574",
-  "pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_d2zui_588",
-  "pane__location": "awsui_pane__location_1gl9c_d2zui_609",
-  "pane__description": "awsui_pane__description_1gl9c_d2zui_609",
-  "focus-lock": "awsui_focus-lock_1gl9c_d2zui_624",
-  "resizable-box": "awsui_resizable-box_1gl9c_d2zui_647",
-  "resizable-box-handle": "awsui_resizable-box-handle_1gl9c_d2zui_652",
-  "editor": "awsui_editor_1gl9c_d2zui_689",
-  "status-bar": "awsui_status-bar_1gl9c_d2zui_722",
-  "status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_d2zui_731",
-  "status-bar__left": "awsui_status-bar__left_1gl9c_d2zui_735",
-  "status-bar__left-virtual": "awsui_status-bar__left-virtual_1gl9c_d2zui_742",
-  "status-bar__right": "awsui_status-bar__right_1gl9c_d2zui_746",
-  "status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_d2zui_750",
-  "status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_d2zui_750",
-  "status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_d2zui_755",
-  "status-bar-virtual": "awsui_status-bar-virtual_1gl9c_d2zui_759",
-  "tab-button": "awsui_tab-button_1gl9c_d2zui_765",
-  "tab-button--refresh": "awsui_tab-button--refresh_1gl9c_d2zui_778",
-  "tab-button--active": "awsui_tab-button--active_1gl9c_d2zui_792",
-  "tab-button--disabled": "awsui_tab-button--disabled_1gl9c_d2zui_812",
-  "tab-button--divider": "awsui_tab-button--divider_1gl9c_d2zui_842",
-  "tab-button--errors": "awsui_tab-button--errors_1gl9c_d2zui_849",
-  "tab-button--warnings": "awsui_tab-button--warnings_1gl9c_d2zui_849",
-  "loading-screen": "awsui_loading-screen_1gl9c_d2zui_853",
-  "error-screen": "awsui_error-screen_1gl9c_d2zui_854"
+  "code-editor": "awsui_code-editor_1gl9c_zsh2a_98",
+  "code-editor-refresh": "awsui_code-editor-refresh_1gl9c_zsh2a_534",
+  "pane": "awsui_pane_1gl9c_zsh2a_546",
+  "pane__close-container": "awsui_pane__close-container_1gl9c_zsh2a_557",
+  "pane__list": "awsui_pane__list_1gl9c_zsh2a_562",
+  "pane__table": "awsui_pane__table_1gl9c_zsh2a_569",
+  "pane__item": "awsui_pane__item_1gl9c_zsh2a_574",
+  "pane__cell": "awsui_pane__cell_1gl9c_zsh2a_574",
+  "pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_zsh2a_588",
+  "pane__location": "awsui_pane__location_1gl9c_zsh2a_609",
+  "pane__description": "awsui_pane__description_1gl9c_zsh2a_609",
+  "focus-lock": "awsui_focus-lock_1gl9c_zsh2a_624",
+  "resizable-box": "awsui_resizable-box_1gl9c_zsh2a_647",
+  "resizable-box-handle": "awsui_resizable-box-handle_1gl9c_zsh2a_652",
+  "editor": "awsui_editor_1gl9c_zsh2a_689",
+  "status-bar": "awsui_status-bar_1gl9c_zsh2a_722",
+  "status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_zsh2a_731",
+  "status-bar__left": "awsui_status-bar__left_1gl9c_zsh2a_735",
+  "status-bar__left-virtual": "awsui_status-bar__left-virtual_1gl9c_zsh2a_742",
+  "status-bar__right": "awsui_status-bar__right_1gl9c_zsh2a_746",
+  "status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_zsh2a_750",
+  "status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_zsh2a_750",
+  "status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_zsh2a_755",
+  "status-bar-virtual": "awsui_status-bar-virtual_1gl9c_zsh2a_759",
+  "tab-button": "awsui_tab-button_1gl9c_zsh2a_765",
+  "tab-button--refresh": "awsui_tab-button--refresh_1gl9c_zsh2a_778",
+  "tab-button--active": "awsui_tab-button--active_1gl9c_zsh2a_792",
+  "tab-button--disabled": "awsui_tab-button--disabled_1gl9c_zsh2a_812",
+  "tab-button--divider": "awsui_tab-button--divider_1gl9c_zsh2a_842",
+  "tab-button--errors": "awsui_tab-button--errors_1gl9c_zsh2a_849",
+  "tab-button--warnings": "awsui_tab-button--warnings_1gl9c_zsh2a_849",
+  "loading-screen": "awsui_loading-screen_1gl9c_zsh2a_853",
+  "error-screen": "awsui_error-screen_1gl9c_zsh2a_854"
 };