@moda/om 19.9.0 → 20.1.0

package/src/components/LoadingItemsLavenderBlue/LoadingItems1.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItemsLavenderBlue1: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#1E22AA'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#1E22AA'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#1E22AA'
+    />
+    <path d='M12.5109 4.92857L22.0054 0.696598L21.9727 9.23309L12.5109 4.92857Z' fill='#1E22AA' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#1E22AA' />
+    <rect x='3.18616' y='4.93652' width='18.8016' height='16.0635' fill='#1E22AA' />
+  </svg>
+);

package/src/components/LoadingItemsLavenderBlue/LoadingItems2.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItemsLavenderBlue2: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#1E22AA'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#1E22AA'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#1E22AA'
+    />
+    <path d='M12.5109 4.92857L22.0054 0.696598L21.9727 9.23309L12.5109 4.92857Z' fill='#D5C2D8' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#D5C2D8' />
+    <rect x='3.18619' y='4.93652' width='18.8016' height='16.0635' fill='#D5C2D8' />
+  </svg>
+);

package/src/components/LoadingItemsLavenderBlue/LoadingItems3.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItemsLavenderBlue3: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#D5C2D8'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#1E22AA'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#1E22AA'
+    />
+    <path d='M12.5109 4.92857L22.0054 0.696598L21.9727 9.23309L12.5109 4.92857Z' fill='#D5C2D8' />
+    <path d='M12.6203 4.95946L3.19631 9.27653L3.15217 0.740086L12.6203 4.95946Z' fill='#D5C2D8' />
+    <rect x='3.18617' y='4.93652' width='18.8016' height='16.0635' fill='#D5C2D8' />
+  </svg>
+);

package/src/components/LoadingItemsLavenderBlue/LoadingItems4.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItemsLavenderBlue4: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#D5C2D8'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#D5C2D8'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#1E22AA'
+    />
+    <path d='M12.5109 4.92857L22.0054 0.696598L21.9727 9.23309L12.5109 4.92857Z' fill='#D5C2D8' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#D5C2D8' />
+    <rect x='3.18619' y='4.93652' width='18.8016' height='16.0635' fill='#D5C2D8' />
+  </svg>
+);

package/src/components/LoadingItemsLavenderBlue/LoadingItems5.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItemsLavenderBlue5: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#D5C2D8'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#D5C2D8'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#D5C2D8'
+    />
+    <path d='M12.5109 4.92857L22.0054 0.696598L21.9727 9.23309L12.5109 4.92857Z' fill='#D5C2D8' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#D5C2D8' />
+    <rect x='3.18619' y='4.93652' width='18.8016' height='16.0635' fill='#D5C2D8' />
+  </svg>
+);

package/src/components/LoadingItemsLavenderBlue/index.ts

@@ -0,0 +1,5 @@
+export { LoadingItemsLavenderBlue1 } from './LoadingItems1';
+export { LoadingItemsLavenderBlue2 } from './LoadingItems2';
+export { LoadingItemsLavenderBlue3 } from './LoadingItems3';
+export { LoadingItemsLavenderBlue4 } from './LoadingItems4';
+export { LoadingItemsLavenderBlue5 } from './LoadingItems5';

package/src/components/LoadingItemsPinkGreen/LoadingItems.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { States } from 'storybook-states';
+import * as LOADINGITEMS from '.';
+
+export default { title: 'Components/Shape' };
+
+export const LoadingItemsPinkGreen = () => (
+  <>
+    {Object.entries(LOADINGITEMS).map(([name, Component]) => (
+      <States key={name}>
+        <Component style={{ width: '5rem' }} />
+      </States>
+    ))}
+  </>
+);

package/src/components/LoadingItemsPinkGreen/LoadingItems.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export type LoadingItemsProps = React.HTMLAttributes<HTMLOrSVGElement>;

package/src/components/LoadingItemsPinkGreen/LoadingItems1.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItems1: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#DB4C8A'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#DB4C8A'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#DB4C8A'
+    />
+    <path d='M12.5109 4.9286L22.0054 0.696629L21.9727 9.23312L12.5109 4.9286Z' fill='#DB4C8A' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#DB4C8A' />
+    <rect x='3.18616' y='4.93651' width='18.8016' height='16.0635' fill='#DB4C8A' />
+  </svg>
+);

package/src/components/LoadingItemsPinkGreen/LoadingItems2.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItems2: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#DB4C8A'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#DB4C8A'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#DB4C8A'
+    />
+    <path d='M12.5109 4.9286L22.0054 0.696629L21.9727 9.23312L12.5109 4.9286Z' fill='#006F62' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#006F62' />
+    <rect x='3.18619' y='4.93651' width='18.8016' height='16.0635' fill='#006F62' />
+  </svg>
+);

package/src/components/LoadingItemsPinkGreen/LoadingItems3.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItems3: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#006F62'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#DB4C8A'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#DB4C8A'
+    />
+    <path d='M12.5109 4.9286L22.0054 0.696629L21.9727 9.23312L12.5109 4.9286Z' fill='#006F62' />
+    <path d='M12.6203 4.95946L3.19631 9.27653L3.15217 0.740086L12.6203 4.95946Z' fill='#006F62' />
+    <rect x='3.18617' y='4.93651' width='18.8016' height='16.0635' fill='#006F62' />
+  </svg>
+);

package/src/components/LoadingItemsPinkGreen/LoadingItems4.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItems4: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#006F62'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#006F62'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#F04E98'
+    />
+    <path d='M12.5109 4.9286L22.0054 0.696629L21.9727 9.23312L12.5109 4.9286Z' fill='#006F62' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#006F62' />
+    <rect x='3.18619' y='4.93651' width='18.8016' height='16.0635' fill='#006F62' />
+  </svg>
+);

package/src/components/LoadingItemsPinkGreen/LoadingItems5.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItems5: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#006F62'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#006F62'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#006F62'
+    />
+    <path d='M12.5109 4.9286L22.0054 0.696629L21.9727 9.23312L12.5109 4.9286Z' fill='#006F62' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#006F62' />
+    <rect x='3.18616' y='4.93651' width='18.8016' height='16.0635' fill='#006F62' />
+  </svg>
+);

package/src/components/LoadingItemsPinkGreen/index.ts

@@ -0,0 +1,5 @@
+export { LoadingItems1 } from './LoadingItems1';
+export { LoadingItems2 } from './LoadingItems2';
+export { LoadingItems3 } from './LoadingItems3';
+export { LoadingItems4 } from './LoadingItems4';
+export { LoadingItems5 } from './LoadingItems5';

package/src/components/LoadingShapes/LoadingShapes.scss

@@ -1,9 +1,9 @@
-@import '~om';
+@use '~@moda/om';
 
 .LoadingShapes__item--current {
   // stylelint-disable-next-line plugin/selector-bem-pattern
   path {
-    fill: color('snow');
+    fill: om.color('snow');
     transition: fill 1s;
   }
 }

package/src/components/LoadingShapesLavenderBlue/LoadingShapesLavenderBlue.scss

@@ -0,0 +1,9 @@
+@use '~@moda/om';
+
+.LoadingShapesLavenderBlue__item {
+  display: block;
+}
+
+.LoadingShapesLavenderBlue__item--current {
+  display: none;
+}

package/src/components/LoadingShapesLavenderBlue/LoadingShapesLavenderBlue.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { States } from 'storybook-states';
+import { LoadingShapesLavenderBlue } from './LoadingShapesLavenderBlue';
+
+export default { title: 'Components/LoadingShapesLavenderBlue' };
+
+export const Default = () => (
+  <States>
+    <LoadingShapesLavenderBlue />
+  </States>
+);

package/src/components/LoadingShapesLavenderBlue/LoadingShapesLavenderBlue.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { useCursor } from 'use-cursor';
+import {
+  LoadingItemsLavenderBlue1,
+  LoadingItemsLavenderBlue2,
+  LoadingItemsLavenderBlue3,
+  LoadingItemsLavenderBlue4,
+  LoadingItemsLavenderBlue5
+} from '../LoadingItemsLavenderBlue';
+
+import './LoadingShapesLavenderBlue.scss';
+
+const INTERVAL_MS = 250;
+
+export const LoadingShapesLavenderBlue = () => {
+  const items = [
+    LoadingItemsLavenderBlue1,
+    LoadingItemsLavenderBlue2,
+    LoadingItemsLavenderBlue3,
+    LoadingItemsLavenderBlue4,
+    LoadingItemsLavenderBlue5
+  ];
+  const { index, handleNext } = useCursor({ max: items.length });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      handleNext();
+    }, INTERVAL_MS);
+
+    return () => clearInterval(interval);
+  }, [handleNext]);
+
+  return (
+    <div>
+      {items.map((Item, itemIndex) => (
+        <div
+          className={classNames('LoadingShapesLavenderBlue__item', {
+            'LoadingShapesLavenderBlue__item--current': itemIndex !== index
+          })}
+          key={itemIndex}
+        >
+          <Item />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/LoadingShapesLavenderBlue/index.ts

@@ -0,0 +1 @@
+export * from './LoadingShapesLavenderBlue';

package/src/components/LoadingShapesPinkGreen/LoadingShapesPinkGreen.scss

@@ -0,0 +1,9 @@
+@use '~@moda/om';
+
+.LoadingShapesPinkGreen__item {
+  display: block;
+}
+
+.LoadingShapesPinkGreen__item--current {
+  display: none;
+}

package/src/components/LoadingShapesPinkGreen/LoadingShapesPinkGreen.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { States } from 'storybook-states';
+import { LoadingShapesPinkGreen } from './LoadingShapesPinkGreen';
+
+export default { title: 'Components/LoadingShapesPinkGreen' };
+
+export const Default = () => (
+  <States>
+    <LoadingShapesPinkGreen />
+  </States>
+);

package/src/components/LoadingShapesPinkGreen/LoadingShapesPinkGreen.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { useCursor } from 'use-cursor';
+import {
+  LoadingItems1,
+  LoadingItems2,
+  LoadingItems3,
+  LoadingItems4,
+  LoadingItems5
+} from '../LoadingItemsPinkGreen';
+
+import './LoadingShapesPinkGreen.scss';
+
+const INTERVAL_MS = 250;
+
+export const LoadingShapesPinkGreen = () => {
+  const items = [LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5];
+  const { index, handleNext } = useCursor({ max: items.length });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      handleNext();
+    }, INTERVAL_MS);
+
+    return () => clearInterval(interval);
+  }, [handleNext]);
+
+  return (
+    <div>
+      {items.map((Item, itemIndex) => (
+        <div
+          className={classNames('LoadingShapesPinkGreen__item', {
+            'LoadingShapesPinkGreen__item--current': itemIndex !== index
+          })}
+          key={itemIndex}
+        >
+          <Item />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/LoadingShapesPinkGreen/index.ts

@@ -0,0 +1 @@
+export * from './LoadingShapesPinkGreen';

package/src/components/Modal/Modal.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .Modal {
   position: fixed;

package/src/components/ModalOverlay/ModalOverlay.scss

@@ -1,15 +1,15 @@
-@import '~om';
+@use '~@moda/om';
 
 .ModalOverlay {
   background: rgba(255, 255, 255, 0.9);
-  padding: spacing(8, 6);
+  padding: om.spacing(8, 6);
 
-  @include breakpoint(sm, $prop: max-width) {
-    padding: spacing(8, 4);
+  @include om.breakpoint(sm, $prop: max-width) {
+    padding: om.spacing(8, 4);
   }
 
-  @include breakpoint(xs, $prop: max-width) {
-    padding: spacing(8, 2);
+  @include om.breakpoint(xs, $prop: max-width) {
+    padding: om.spacing(8, 2);
   }
 
   &__content {

package/src/components/Overlay/Overlay.scss

@@ -1,17 +1,17 @@
-@import '~om';
+@use '~@moda/om';
 
 .Overlay {
-  @include stack(2);
+  @include om.stack(2);
 
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: color('snow', 0.9);
+  background-color: om.color('snow', 0.9);
   justify-content: center;
   align-items: center;
-  color: color('ink');
+  color: om.color('ink');
   animation: slow-in 0.5s;
 
   @keyframes slow-in {

package/src/components/Paginator/Paginator.scss

@@ -1,21 +1,21 @@
-@import '~om';
+@use '~@moda/om';
 
 .Paginator {
   display: flex;
   justify-content: center;
 
   &__button {
-    @include text(body1);
+    @include om.text(body1);
 
     border: none;
-    height: space(6);
-    width: space(6);
+    height: om.space(6);
+    width: om.space(6);
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    margin-right: space(1);
-    margin-left: space(1);
+    margin-right: om.space(1);
+    margin-left: om.space(1);
     background-color: transparent;
 
     &:first-child {
@@ -27,7 +27,7 @@
     }
 
     &:hover {
-      background-color: color(noise);
+      background-color: om.color(noise);
     }
 
     &--next,
@@ -36,16 +36,16 @@
     }
 
     &--currentPage {
-      background-color: color(noise);
+      background-color: om.color(noise);
     }
   }
 
   &__next-chevron {
-    margin-left: space(2);
+    margin-left: om.space(2);
   }
 
   &__previous-chevron {
-    margin-right: space(2);
+    margin-right: om.space(2);
   }
 
   &__button--ellipsis {

package/src/components/PasswordInput/PasswordInput.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .PasswordInput {
   position: relative;
@@ -9,10 +9,10 @@
 
   &__password-action {
     position: absolute;
-    top: space(2);
-    right: space(6);
+    top: om.space(2);
+    right: om.space(6);
 
-    @include breakpoint(sm, $prop: max-width) {
+    @include om.breakpoint(sm, $prop: max-width) {
       top: 0.7rem;
     }
   }