oddsgate-ds 1.0.168 → 1.0.171

package/src/components/atoms/Icon/Icon.theme.ts

@@ -1,115 +1,115 @@
-import styled, { css } from 'styled-components';
-
-import { IIcon } from './Icon.interface';
-
-export const StyledIcon = styled.i<IIcon>`
-  color: currentColor;
-  font-size: 20px;
-  line-height: 1;
-
-  &::before {
-    display: block;
-    font-family: 'miewfont' !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    webkit-font-smoothing: antialiased;
-    moz-osx-font-smoothing: grayscale
-  }
-
-
-  &.icon-arrow-left:before {
-    content: "\\e918";
-  }
-  &.icon-arrow-right:before {
-    content: "\\e919";
-  }
-  &.icon-arrowDown:before {
-    content: "\\e91a";
-  }
-  &.icon-arrowUp:before {
-    content: "\\e91b";
-  }
-  &.icon-tumblr:before {
-    content: "\\e91c";
-  }
-  &.icon-twitter:before {
-    content: "\\e90e";
-  }
-  &.icon-facebook:before {
-    content: "\\e90f";
-  }
-  &.icon-google:before {
-    content: "\\e910";
-  }
-  &.icon-whatsapp:before {
-    content: "\\e911";
-  }
-  &.icon-youtube:before {
-    content: "\\e912";
-  }
-  &.icon-instagram:before {
-    content: "\\e913";
-  }
-  &.icon-less:before {
-    content: "\\e914";
-  }
-  &.icon-linkedin:before {
-    content: "\\e915";
-  }
-  &.icon-more:before {
-    content: "\\e916";
-  }
-  &.icon-email:before {
-    content: "\\e917";
-  }
-  &.icon-add:before {
-    content: "\\e900";
-  }
-  &.icon-alert-circle-outline:before {
-    content: "\\e901";
-  }
-  &.icon-trash:before {
-    content: "\\e902";
-  }
-  &.icon-remove:before {
-    content: "\\e903";
-  }
-  &.icon-pencil:before {
-    content: "\\e904";
-  }
-  &.icon-book:before {
-    content: "\\e905";
-  }
-  &.icon-close:before {
-    content: "\\e906";
-  }
-  &.icon-arrow-up:before {
-    content: "\\e907";
-  }
-  &.icon-arrow-down:before {
-    content: "\\e908";
-  }
-  &.icon-arrow-back:before {
-    content: "\\e909";
-  }
-  &.icon-arrow-forward:before {
-    content: "\\e90a";
-  }
-  &.icon-search:before {
-    content: "\\e90b";
-  }
-  &.icon-eye-outline:before {
-    content: "\\e90c";
-  }
-  &.icon-eye-off-outline:before {
-    content: "\\e90d";
-  }
-
-
-
-
-`;
+import styled, { css } from 'styled-components';
+
+import { IIcon } from './Icon.interface';
+
+export const StyledIcon = styled.i<IIcon>`
+  color: currentColor;
+  font-size: 20px;
+  line-height: 1;
+
+  &::before {
+    display: block;
+    font-family: 'miewfont' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    webkit-font-smoothing: antialiased;
+    moz-osx-font-smoothing: grayscale
+  }
+
+
+  &.icon-arrow-left:before {
+    content: "\\e918";
+  }
+  &.icon-arrow-right:before {
+    content: "\\e919";
+  }
+  &.icon-arrowDown:before {
+    content: "\\e91a";
+  }
+  &.icon-arrowUp:before {
+    content: "\\e91b";
+  }
+  &.icon-tumblr:before {
+    content: "\\e91c";
+  }
+  &.icon-twitter:before {
+    content: "\\e90e";
+  }
+  &.icon-facebook:before {
+    content: "\\e90f";
+  }
+  &.icon-google:before {
+    content: "\\e910";
+  }
+  &.icon-whatsapp:before {
+    content: "\\e911";
+  }
+  &.icon-youtube:before {
+    content: "\\e912";
+  }
+  &.icon-instagram:before {
+    content: "\\e913";
+  }
+  &.icon-less:before {
+    content: "\\e914";
+  }
+  &.icon-linkedin:before {
+    content: "\\e915";
+  }
+  &.icon-more:before {
+    content: "\\e916";
+  }
+  &.icon-email:before {
+    content: "\\e917";
+  }
+  &.icon-add:before {
+    content: "\\e900";
+  }
+  &.icon-alert-circle-outline:before {
+    content: "\\e901";
+  }
+  &.icon-trash:before {
+    content: "\\e902";
+  }
+  &.icon-remove:before {
+    content: "\\e903";
+  }
+  &.icon-pencil:before {
+    content: "\\e904";
+  }
+  &.icon-book:before {
+    content: "\\e905";
+  }
+  &.icon-close:before {
+    content: "\\e906";
+  }
+  &.icon-arrow-up:before {
+    content: "\\e907";
+  }
+  &.icon-arrow-down:before {
+    content: "\\e908";
+  }
+  &.icon-arrow-back:before {
+    content: "\\e909";
+  }
+  &.icon-arrow-forward:before {
+    content: "\\e90a";
+  }
+  &.icon-search:before {
+    content: "\\e90b";
+  }
+  &.icon-eye-outline:before {
+    content: "\\e90c";
+  }
+  &.icon-eye-off-outline:before {
+    content: "\\e90d";
+  }
+
+
+
+
+`;

package/src/components/atoms/Icon/index.ts

@@ -1 +1 @@
-export { default } from './Icon.component'
+export { default } from './Icon.component'

package/src/components/atoms/ImageWrapper/ImageWrapper.component.tsx

@@ -1,42 +1,42 @@
-import { IImageWrapper } from './ImageWrapper.interface';
-import React from 'react';
-import { Overlay, StyledImageWrapper } from './ImageWrapper.theme';
-
-const ImageWrapper = ({
-  aspectRatioHeight,
-  align,
-  caption,
-  href,
-  linkTarget,
-  rel,
-  className,
-  style,
-  children,
-  asBackground = false
-}: IImageWrapper) => {
-  return (
-    <StyledImageWrapper $align={align} className={className} style={style}>
-      <span
-        className='d-block'
-        aria-hidden="true"
-        style={
-          aspectRatioHeight
-            ? { paddingBottom: `${aspectRatioHeight.toFixed(2)}%` }
-            : {}
-        }
-      ></span>
-      {children}
-      {!!caption && (
-        <figcaption>
-          <span>{caption}</span>
-        </figcaption>
-      )}
-      {!!href && (
-        <a className={'linker'} href={href} target={linkTarget} rel={rel}></a>
-      )}
-      {asBackground && <Overlay />}
-    </StyledImageWrapper>
-  )
-}
-
-export default ImageWrapper
+import { IImageWrapper } from './ImageWrapper.interface';
+import React from 'react';
+import { Overlay, StyledImageWrapper } from './ImageWrapper.theme';
+
+const ImageWrapper = ({
+  aspectRatioHeight,
+  align,
+  caption,
+  href,
+  linkTarget,
+  rel,
+  className,
+  style,
+  children,
+  asBackground = false
+}: IImageWrapper) => {
+  return (
+    <StyledImageWrapper $align={align} className={className} style={style}>
+      <span
+        className='d-block'
+        aria-hidden="true"
+        style={
+          aspectRatioHeight
+            ? { paddingBottom: `${aspectRatioHeight.toFixed(2)}%` }
+            : {}
+        }
+      ></span>
+      {children}
+      {!!caption && (
+        <figcaption>
+          <span>{caption}</span>
+        </figcaption>
+      )}
+      {!!href && (
+        <a className={'linker'} href={href} target={linkTarget} rel={rel}></a>
+      )}
+      {asBackground && <Overlay />}
+    </StyledImageWrapper>
+  )
+}
+
+export default ImageWrapper

package/src/components/atoms/ImageWrapper/ImageWrapper.interface.ts

@@ -1,16 +1,16 @@
-import { CSSProperties } from 'react';
-
-export type IImageWrapper = {
-  aspectRatioHeight?: number
-  anchor?: string;
-  $align?: string;
-  align?: string;
-  caption?: string;
-  href?: string;
-  linkTarget?: string;
-  rel?: string;
-  className?: string;
-  style?: CSSProperties;
-  children?: React.ReactNode;
-  asBackground?: boolean;
-}
+import { CSSProperties } from 'react';
+
+export type IImageWrapper = {
+  aspectRatioHeight?: number
+  anchor?: string;
+  $align?: string;
+  align?: string;
+  caption?: string;
+  href?: string;
+  linkTarget?: string;
+  rel?: string;
+  className?: string;
+  style?: CSSProperties;
+  children?: React.ReactNode;
+  asBackground?: boolean;
+}

package/src/components/atoms/ImageWrapper/ImageWrapper.stories.tsx

@@ -1,27 +1,27 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import React from 'react'
-
-import ImageWrapper from './ImageWrapper.component'
-import { IImageWrapper } from './ImageWrapper.interface'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/ImageWrapper',
-  component: ImageWrapper
-} as Meta
-
-export const Simple: StoryObj<IImageWrapper> = {
-  render: args => (
-    <ImageWrapper {...args} style={{ maxWidth: '320px' }}>
-      <img
-        width="100%"
-        height="100%"
-        decoding="async"
-        src="/assets/placeholder.png"
-        alt="Empty state"
-      />
-    </ImageWrapper>
-  ),
-  args: {}
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import React from 'react'
+
+import ImageWrapper from './ImageWrapper.component'
+import { IImageWrapper } from './ImageWrapper.interface'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/ImageWrapper',
+  component: ImageWrapper
+} as Meta
+
+export const Simple: StoryObj<IImageWrapper> = {
+  render: args => (
+    <ImageWrapper {...args} style={{ maxWidth: '320px' }}>
+      <img
+        width="100%"
+        height="100%"
+        decoding="async"
+        src="/assets/placeholder.png"
+        alt="Empty state"
+      />
+    </ImageWrapper>
+  ),
+  args: {}
+}

package/src/components/atoms/ImageWrapper/ImageWrapper.theme.ts

@@ -1,50 +1,50 @@
-import { css, styled } from 'styled-components';
-
-import { IImageWrapper } from './ImageWrapper.interface';
-
-export const StyledImageWrapper = styled.picture<IImageWrapper>`
-  & picture{
-    position: relative;
-  }
-  & img{
-    object-fit:cover;
-  }
-
-  &.as-background{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
-
-    & img{
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  ${(props) => {
-    switch (props.$align) {
-      case "left": default:
-        return css` `;
-      case "center":
-        return css`
-          margin-left:auto;
-          margin-right:auto;
-        `;
-      case "right":
-        return css`
-          margin-right:auto;
-        `;
-    }
-  }}
-`
-export const Overlay = styled.div`
-  display: block;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-`
+import { css, styled } from 'styled-components';
+
+import { IImageWrapper } from './ImageWrapper.interface';
+
+export const StyledImageWrapper = styled.picture<IImageWrapper>`
+  & picture{
+    position: relative;
+  }
+  & img{
+    object-fit:cover;
+  }
+
+  &.as-background{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
+
+    & img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  ${(props) => {
+    switch (props.$align) {
+      case "left": default:
+        return css` `;
+      case "center":
+        return css`
+          margin-left:auto;
+          margin-right:auto;
+        `;
+      case "right":
+        return css`
+          margin-right:auto;
+        `;
+    }
+  }}
+`
+export const Overlay = styled.div`
+  display: block;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`

package/src/components/atoms/ImageWrapper/index.ts

@@ -1 +1 @@
-export { default } from "./ImageWrapper.component";
+export { default } from "./ImageWrapper.component";

package/src/components/atoms/LegalLinks/LegalLinks.component.tsx

@@ -1,35 +1,35 @@
-import { ILegalLinks } from './LegalLinks.interface'
-import React from 'react'
-import { StyledLegalLinks } from './LegalLinks.theme'
-
-const LegalLinks = ({
-  links,
-  className,
-  style,
-}: ILegalLinks) => {
-  if (!links) return <></>
-
-  return (
-    <StyledLegalLinks className={className} style={style}>
-      {links.map((link, index) => {
-        if (!link.label || !link.url) return <></>
-
-        return (
-          <li key={`legalLink-${index}`}>
-            <a
-              href={link.url}
-              target="_blank"
-              aria-label={link.label}
-              rel="noreferrer"
-              className="font-epilogue"
-            >
-              {link.label}
-            </a>
-          </li>
-        )
-      })}
-    </StyledLegalLinks>
-  )
-}
-
-export default LegalLinks
+import { ILegalLinks } from './LegalLinks.interface'
+import React from 'react'
+import { StyledLegalLinks } from './LegalLinks.theme'
+
+const LegalLinks = ({
+  links,
+  className,
+  style,
+}: ILegalLinks) => {
+  if (!links) return <></>
+
+  return (
+    <StyledLegalLinks className={className} style={style}>
+      {links.map((link, index) => {
+        if (!link.label || !link.url) return <></>
+
+        return (
+          <li key={`legalLink-${index}`}>
+            <a
+              href={link.url}
+              target="_blank"
+              aria-label={link.label}
+              rel="noreferrer"
+              className="font-epilogue"
+            >
+              {link.label}
+            </a>
+          </li>
+        )
+      })}
+    </StyledLegalLinks>
+  )
+}
+
+export default LegalLinks

package/src/components/atoms/LegalLinks/LegalLinks.interface.ts

@@ -1,12 +1,12 @@
-import { CSSProperties } from 'react';
-
-export type ILegalLink = {
-  label: string
-  url: string
-}
-
-export type ILegalLinks = {
-  links?: ILegalLink[]
-  className?: string,
-  style?: CSSProperties
-}
+import { CSSProperties } from 'react';
+
+export type ILegalLink = {
+  label: string
+  url: string
+}
+
+export type ILegalLinks = {
+  links?: ILegalLink[]
+  className?: string,
+  style?: CSSProperties
+}