@mgdis/mg-components 5.18.0 → 5.19.0

package/readme.md

@@ -66,37 +66,6 @@ All of the MGDIS generated web components must use the prefix `mg`.
 
 You will find how to use the library instructions in the [Getting Started section](./getting-started.md).
 
-### Style
-
-#### Naming methodology
-
-MG Components is using [BEM](https://en.bem.info/) (Block, Element, Modifier) methodology with the [two dashes style](https://en.bem.info/methodology/naming-convention/#two-dashes-style) naming scheme.
-
-#### Declaration organisation
-
-When a selector contains too many declaration it is recommended to organize them by theme : Display, Decoration, Font, Others.
-
-```CSS
-.mg-button {
-  // Display
-  display: inline-block;
-  vertical-align: middle;
-  min-height: 3.5rem;
-  padding: 0.6rem 1.2rem;
-  // Decoration
-  background-image: none;
-  border-radius: 0.3rem;
-  border: 0.1rem solid transparent;
-  cursor: pointer;
-  // Font
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  // Others
-  touch-action: manipulation;
-}
-```
-
 ### Storybook
 
 The plugin [storybook-addon-docs-stencil

package/dist/cjs/mg-menu.conf-43aacf30.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu.conf-43aacf30.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;MAOa,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,QAAgB;EAC7E,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACvF,EAAE;AAEF;;;;;;MAMa,YAAY,GAAG,CAAC,MAAc,EAAE,MAAc;EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACtD,EAAE;AAEF;;;MAGa,UAAU,GAAG,gDAAgD;AAE1E;;;;;;MAMa,UAAU,GAAG,CAAC,IAAY,EAAE,MAAc;EACrD,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;IACrE,OAAO,EAAE,CAAC;GACX;EACD,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE,EAAE;AAEF;;;;;;;;AAQO,MAAM,iBAAiB,GAAG,CAAC,OAAoB,EAAE,QAAiB,EAAE,aAAqB;;EAE9F,MAAM,oBAAoB,GAAgB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACpE,MAAM,WAAW,GAAa,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,IAAI,CAAC,CAAC;EAC/F,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,IAAI,aAAa,CAAC;;EAE7F,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;;EAE/C,OAAO;IACL,MAAM;IACN,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,aAAa,CAAC;GAC5D,CAAC;AACJ,CAAC;;ACvDD,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAG,CAAC,OAAoB,KAA4D,iBAAiB,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa;;ACV9J;;;AAGYA;AAAZ,WAAY,SAAS;EACnB,kCAAqB,CAAA;EACrB,sCAAyB,CAAA;AAC3B,CAAC,EAHWA,iBAAS,KAATA,iBAAS,QAGpB;AAOD;;;MAGa,KAAK,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO;;;;;;;;;","names":["Direction"],"sources":["src/utils/locale.utils.ts","src/locales/index.ts","src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"sourcesContent":["/**\n * Format number to the locale currency\n * @param number - number to format\n * @param locale - locale to apply\n * @param currency - currency to apply\n * @returns formatted currency\n */\nexport const localeCurrency = (number: number, locale: string, currency: string): string => {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);\n};\n\n/**\n * Format number to locale\n * @param number - number to format\n * @param locale - locale to apply\n * @returns formatted number\n */\nexport const localeNumber = (number: number, locale: string): string => {\n  return new Intl.NumberFormat(locale).format(number);\n};\n\n/**\n * Date RegExp\n */\nexport const dateRegExp = /^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$/;\n\n/**\n * Locale date format\n * @param date - date to format\n * @param locale - locale to apply\n * @returns formatted date\n */\nexport const localeDate = (date: string, locale: string): string => {\n  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {\n    return '';\n  }\n  return new Intl.DateTimeFormat(locale).format(new Date(date));\n};\n\n/**\n * Get locale and messages\n * We load the defined locale but for now we only support the first subtag for messages\n * @param element - element we need to get the language\n * @param messages - messages to use\n * @param defaultLocale - default messages locale\n * @returns messages object\n */\nexport const getLocaleMessages = (element: HTMLElement, messages: unknown, defaultLocale: string): { locale: string; messages: Record<string, unknown> } => {\n  // Get local\n  const closestLangAttribute: HTMLElement = element.closest('[lang]');\n  const closestLang: string[] = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute?.lang);\n  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;\n  // Only keep first subtag\n  const localeSubtag = locale.split('-').shift();\n  // Return\n  return {\n    locale,\n    messages: messages[localeSubtag] || messages[defaultLocale],\n  };\n};\n","import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { getLocaleMessages } from '../utils/locale.utils';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/**\n * Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = (element: HTMLElement): { locale: string; messages: Record<string, unknown> } => getLocaleMessages(element, messages, defaultLocale);\n","import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"],"version":3}

package/dist/collection/components/atoms/mg-badge/mg-badge.css

@@ -1,116 +0,0 @@
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-/* Variables */
-/* Mixins */
-/* Styles */
-.mg-badge {
-  padding: 0 0.4rem;
-  height: var(--mg-badge-size);
-  min-width: var(--mg-badge-size);
-  box-sizing: border-box;
-  border: 0.1rem solid;
-  border-radius: calc(var(--mg-badge-size) / 2);
-  font-size: var(--mg-badge-font-size);
-  font-weight: 600;
-  text-align: center;
-  line-height: var(--mg-badge-size);
-}
-.mg-badge.mg-badge--primary {
-  background-color: hsl(var(--color-dark));
-  border-color: hsl(var(--color-dark));
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--primary.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--secondary {
-  background-color: hsl(var(--color-light));
-  border-color: hsl(var(--color-light));
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--secondary.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--success {
-  background-color: hsl(var(--color-success));
-  border-color: hsl(var(--color-success));
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--success.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-success));
-}
-.mg-badge.mg-badge--warning {
-  background-color: hsl(var(--color-warning));
-  border-color: hsl(var(--color-warning));
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--warning.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-warning));
-}
-.mg-badge.mg-badge--danger {
-  background-color: hsl(var(--color-danger));
-  border-color: hsl(var(--color-danger));
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--danger.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-danger));
-}
-.mg-badge.mg-badge--info {
-  background-color: hsl(var(--color-info));
-  border-color: hsl(var(--color-info));
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--info.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-info));
-}
-.mg-badge.mg-badge--text-color {
-  background-color: currentColor;
-  border-color: currentColor;
-}
-.mg-badge.mg-badge--text-color .mg-badge__value {
-  color: hsl(var(--mg-badge-text-color, var(--color-light)));
-}
-.mg-badge.mg-badge--text-color.mg-badge--outline {
-  background-color: transparent;
-}
-.mg-badge.mg-badge--text-color.mg-badge--outline .mg-badge__value {
-  color: currentColor;
-}
-
-.mg-badge,
-mg-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}

package/dist/collection/components/atoms/mg-button/mg-button.css

@@ -1,182 +0,0 @@
-/* Variables */
-/* Mixins */
-:host {
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-:host(:focus-visible) {
-  outline: 0;
-}
-:host(:focus-visible) .mg-button {
-  outline-color: -webkit-focus-ring-color;
-  outline-style: auto;
-  outline-width: 0.2rem;
-}
-
-:host(:hover) .mg-button--flat:not(.mg-button--disabled) {
-  background: hsl(var(--color-dark), 0.1);
-}
-
-:host([full-width]) {
-  display: block;
-}
-
-:host([disabled]),
-:host([aria-disabled=true]) {
-  pointer-events: none;
-}
-
-.mg-button.mg-button--primary {
-  border-color: hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--mg-button-primary-font-color));
-  background: linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--primary:not(.mg-button--disabled) {
-  background: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
-}
-
-.mg-button.mg-button--secondary {
-  border-color: hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--mg-button-secondary-font-color));
-  background: linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--secondary:not(.mg-button--disabled) {
-  background: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
-}
-
-.mg-button.mg-button--danger {
-  border-color: hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--color-neutral));
-  background: linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--danger:not(.mg-button--disabled) {
-  background: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-}
-
-.mg-button.mg-button--danger-alt {
-  border-color: hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--color-danger));
-  background: linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled) {
-  background: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
-}
-
-.mg-button.mg-button--info {
-  border-color: hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--color-neutral));
-  background: linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--info:not(.mg-button--disabled) {
-  background: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-}
-
-.mg-button.mg-button--success {
-  border-color: hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--color-dark));
-  background: linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--success:not(.mg-button--disabled) {
-  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-}
-
-/* Styles */
-.mg-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  column-gap: 0.6rem;
-  padding: calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;
-  min-height: var(--default-size);
-  box-sizing: border-box;
-  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));
-  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));
-  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));
-  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));
-  cursor: pointer;
-  background-image: none;
-  border-top-width: var(--mg-button-border-top-width, 0.1rem);
-  border-right-width: var(--mg-button-border-right-width, 0.1rem);
-  border-bottom-width: var(--mg-button-border-bottom-width, 0.1rem);
-  border-left-width: var(--mg-button-border-left-width, 0.1rem);
-  border-style: solid;
-  text-decoration: none;
-  font-family: inherit;
-  font-weight: var(--mg-button-font-weight, normal);
-  text-align: left;
-  font-size: var(--font-size);
-  touch-action: manipulation;
-}
-.mg-button.mg-button--disabled {
-  opacity: var(--mg-button-disabled-opacity);
-  cursor: default;
-}
-.mg-button.mg-button--icon {
-  padding: 0;
-  justify-content: center;
-  width: var(--default-size);
-  height: var(--default-size);
-  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));
-  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));
-  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));
-  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));
-  font-size: var(--font-size);
-  line-height: var(--font-size);
-}
-.mg-button.mg-button--flat {
-  background: none;
-  border: none;
-}
-.mg-button.mg-button--link {
-  padding: unset;
-  min-height: unset;
-  background: unset;
-  border: unset;
-  border-radius: unset;
-  text-decoration: underline;
-}
-.mg-button.mg-button--link slot {
-  font-weight: 600;
-}
-.mg-button.mg-button--link:hover {
-  text-decoration: none;
-}
-.mg-button.mg-button--full-width {
-  display: flex;
-  justify-content: center;
-}
-.mg-button.mg-button--loading > mg-icon:first-of-type {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-.mg-button.mg-button--loading .mg-button__content {
-  opacity: 0;
-}
-.mg-button mg-icon:only-child,
-.mg-button ::slotted(mg-icon) {
-  display: inline-flex;
-  flex-shrink: 0;
-  line-height: 1;
-  margin: auto 0;
-}
-.mg-button slot,
-.mg-button ::slotted(*:not(mg-icon)) {
-  text-decoration: none;
-  font-family: inherit;
-  font-weight: var(--mg-button-font-weight, normal);
-  text-align: left;
-  font-size: var(--font-size);
-  display: flex;
-  align-items: center;
-  column-gap: 0.6rem;
-}

package/dist/collection/components/atoms/mg-card/mg-card.css

@@ -1,75 +0,0 @@
-.mg-card {
-  position: relative;
-  width: 100%;
-  max-width: var(--mg-card-max-width);
-  min-width: var(--mg-card-min-width);
-  padding: var(--mg-card-padding, var(--mg-card-padding-default));
-  overflow: var(--mg-card-overflow, var(--mg-card-overflow-default));
-  box-sizing: border-box;
-  z-index: inherit;
-  background: var(--mg-card-background, var(--mg-card-background-default));
-  border: var(--mg-card-border, var(--mg-card-border-default));
-  border-radius: var(--mg-card-border-radius, var(--mg-card-border-radius-default));
-  box-shadow: var(--mg-card-box-shadow, var(--mg-card-box-shadow-default));
-}
-.mg-card ::slotted(*) {
-  --mg-card-border: var(--mg-card-border-default);
-  --mg-card-padding: var(--mg-card-padding-default);
-  --mg-card-border-radius: var(--mg-card-border-radius-default);
-  --mg-card-background: var(--mg-card-background-default);
-  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
-  --mg-card-max-width: unset;
-  --mg-card-min-width: unset;
-}
-.mg-card.mg-card--info {
-  overflow: hidden;
-}
-.mg-card.mg-card--info.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-}
-.mg-card.mg-card--info.mg-card--fill {
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--warning {
-  overflow: hidden;
-}
-.mg-card.mg-card--warning.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
-}
-.mg-card.mg-card--warning.mg-card--fill {
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--success {
-  overflow: hidden;
-}
-.mg-card.mg-card--success.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-}
-.mg-card.mg-card--success.mg-card--fill {
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--danger {
-  overflow: hidden;
-}
-.mg-card.mg-card--danger.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-}
-.mg-card.mg-card--danger.mg-card--fill {
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--app {
-  overflow: hidden;
-}
-.mg-card.mg-card--app.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));
-}
-.mg-card.mg-card--app.mg-card--fill {
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l));
-}
-.mg-card__bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0.3rem;
-  height: 100%;
-}

package/dist/collection/components/atoms/mg-character-left/mg-character-left.css

@@ -1,3 +0,0 @@
-mg-character-left {
-  display: block;
-}

package/dist/collection/components/atoms/mg-divider/mg-divider.css

@@ -1,9 +0,0 @@
-.mg-divider {
-  margin: var(--mg-divider-vertical-spacing) auto;
-  width: 12rem;
-  height: var(--mg-divider-thickness);
-  background-color: var(--mg-divider-background-color);
-}
-.mg-divider.mg-divider--full {
-  width: 100%;
-}

package/dist/collection/components/atoms/mg-icon/mg-icon.css

@@ -1,138 +0,0 @@
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-:host {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.mg-icon {
-  color: currentColor;
-}
-.mg-icon[size=small], .mg-icon.mg-icon--size-small {
-  width: var(--mg-icon-small-size);
-  height: var(--mg-icon-small-size);
-}
-.mg-icon[size=small][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-small[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-small-size) / 2);
-}
-.mg-icon[size=regular], .mg-icon.mg-icon--size-regular {
-  width: var(--mg-icon-regular-size);
-  height: var(--mg-icon-regular-size);
-}
-.mg-icon[size=regular][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-regular[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-regular-size) / 2);
-}
-.mg-icon[size=medium], .mg-icon.mg-icon--size-medium {
-  width: var(--mg-icon-medium-size);
-  height: var(--mg-icon-medium-size);
-}
-.mg-icon[size=medium][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-medium[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-medium-size) / 2);
-}
-.mg-icon[size=large], .mg-icon.mg-icon--size-large {
-  width: var(--mg-icon-large-size);
-  height: var(--mg-icon-large-size);
-}
-.mg-icon[size=large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-large-size) / 2);
-}
-.mg-icon[size=extra-large], .mg-icon.mg-icon--size-extra-large {
-  width: var(--mg-icon-extra-large-size);
-  height: var(--mg-icon-extra-large-size);
-}
-.mg-icon[size=extra-large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-extra-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-extra-large-size) / 2);
-}
-.mg-icon.mg-icon--variant-success.mg-icon--variant-style-icon {
-  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-}
-.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-icon {
-  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
-}
-.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-icon {
-  color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-}
-.mg-icon.mg-icon--variant-info.mg-icon--variant-style-icon {
-  color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-}
-.mg-icon.mg-icon--variant-app.mg-icon--variant-style-icon {
-  color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));
-}
-.mg-icon.mg-icon--variant-success.mg-icon--variant-style-background {
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-background {
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-background {
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-info.mg-icon--variant-style-background {
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-app.mg-icon--variant-style-background {
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-success.mg-icon--variant-style-full {
-  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-full {
-  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-full {
-  color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-info.mg-icon--variant-style-full {
-  color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-app.mg-icon--variant-style-full {
-  color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l));
-}
-.mg-icon[class*=mg-icon--variant-] {
-  border-radius: var(--mg-icon-border-radius);
-}
-
-/**
-* Animations
-**/
-.mg-icon--spin {
-  animation-name: rotate;
-  animation-duration: 0.75s;
-  animation-iteration-count: infinite;
-}
-
-@keyframes rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/dist/collection/components/atoms/mg-input-title/mg-input-title.css

@@ -1,12 +0,0 @@
-.is-asterisk {
-  color: hsl(var(--color-danger));
-}
-
-legend.mg-input-title {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.mg-input-title__required {
-  display: var(--mg-input-title-display, unset);
-}