oddsgate-ds 1.0.171 → 1.0.175

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.theme.ts

@@ -1,134 +1,134 @@
-import styled, { css } from 'styled-components';
-
-import { ICheckRadioField } from './CheckRadioField.interface';
-import { colors } from '@/styles/variables';
-import { pxToRem } from './../../../../styles/variables';
-
-export const StyledCheckRadioField = styled.div<ICheckRadioField>`
-  position: relative;
-
-  input[type="checkbox"],
-  input[type="radio"] {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    opacity: 0;
-
-    cursor: pointer;
-    /* z-index: 5; */
-
-    &+label {
-      display: inline-block;
-      vertical-align: middle;
-
-      position: relative;
-      text-align: left;
-      margin-bottom: 0;
-      padding: 5px 0;
-      padding-left: ${pxToRem(34)};
-
-      &:before,
-      &:after {
-        content: "";
-        position: absolute;
-        top: 50%;
-
-        cursor: pointer;
-
-        transition: all 0.3s linear;
-      }
-
-      &:before {
-        left: 0px;
-        margin-top: ${pxToRem(-12)};
-        width: ${pxToRem(24)};
-        height: ${pxToRem(24)};
-
-        background: transparent;
-        border: 1px solid currentColor;
-        border-radius: 4px;
-      }
-
-      &:after {
-        opacity: 0;
-        visibility: hidden;
-      }
-
-      & a {
-        color: ${colors.primary50};
-
-        &:hover{
-          opacity:0.6;
-        }
-      }
-    }
-  }
-
-  & input[type="checkbox"]+label {
-    &:after {
-      left: ${pxToRem(5)};
-      margin-top: ${pxToRem(-4)};
-      width: ${pxToRem(14)};
-      height: ${pxToRem(6)};
-
-      border: 2px solid ${colors.white};
-      border-top: none;
-      border-right: none;
-
-      transform: rotate(-45deg);
-    }
-  }
-
-  & input[type="radio"]+label {
-    &:before,
-    &:after {
-      border-radius: 50%;
-    }
-
-    &::after {
-      background: ${colors.white};
-
-      width: ${pxToRem(13)};
-      height: ${pxToRem(13)};
-
-      margin-top: ${pxToRem(-6)};
-      left: ${pxToRem(5.5)};
-    }
-  }
-
-  & input[type="checkbox"]:checked+label::before,
-  & input[type="radio"]:checked+label::before {
-    border-color: ${colors.primary50};
-    background: ${colors.primary50};
-  }
-
-  & input[type="checkbox"]:checked+label::after,
-  & input[type="radio"]:checked+label::after {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  .style-dark & {
-    & input[type="checkbox"]+label {
-      &:after {
-        border-color: ${colors.primary50};
-      }
-    }
-
-    & input[type="radio"]+label {
-      &::after {
-        background: ${colors.primary50};
-      }
-    }
-    & input[type="checkbox"]:checked+label::before,
-    & input[type="radio"]:checked+label::before {
-      border-color: ${colors.white};
-      background: ${colors.white};
-    }
-  }
-
-`;
+import styled, { css } from 'styled-components';
+
+import { ICheckRadioField } from './CheckRadioField.interface';
+import { colors } from '@/styles/variables';
+import { pxToRem } from './../../../../styles/variables';
+
+export const StyledCheckRadioField = styled.div<ICheckRadioField>`
+  position: relative;
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+
+    cursor: pointer;
+    /* z-index: 5; */
+
+    &+label {
+      display: inline-block;
+      vertical-align: middle;
+
+      position: relative;
+      text-align: left;
+      margin-bottom: 0;
+      padding: 5px 0;
+      padding-left: ${pxToRem(34)};
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+
+        cursor: pointer;
+
+        transition: all 0.3s linear;
+      }
+
+      &:before {
+        left: 0px;
+        margin-top: ${pxToRem(-12)};
+        width: ${pxToRem(24)};
+        height: ${pxToRem(24)};
+
+        background: transparent;
+        border: 1px solid currentColor;
+        border-radius: 4px;
+      }
+
+      &:after {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      & a {
+        color: ${colors.primary50};
+
+        &:hover{
+          opacity:0.6;
+        }
+      }
+    }
+  }
+
+  & input[type="checkbox"]+label {
+    &:after {
+      left: ${pxToRem(5)};
+      margin-top: ${pxToRem(-4)};
+      width: ${pxToRem(14)};
+      height: ${pxToRem(6)};
+
+      border: 2px solid ${colors.white};
+      border-top: none;
+      border-right: none;
+
+      transform: rotate(-45deg);
+    }
+  }
+
+  & input[type="radio"]+label {
+    &:before,
+    &:after {
+      border-radius: 50%;
+    }
+
+    &::after {
+      background: ${colors.white};
+
+      width: ${pxToRem(13)};
+      height: ${pxToRem(13)};
+
+      margin-top: ${pxToRem(-6)};
+      left: ${pxToRem(5.5)};
+    }
+  }
+
+  & input[type="checkbox"]:checked+label::before,
+  & input[type="radio"]:checked+label::before {
+    border-color: ${colors.primary50};
+    background: ${colors.primary50};
+  }
+
+  & input[type="checkbox"]:checked+label::after,
+  & input[type="radio"]:checked+label::after {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .style-dark & {
+    & input[type="checkbox"]+label {
+      &:after {
+        border-color: ${colors.primary50};
+      }
+    }
+
+    & input[type="radio"]+label {
+      &::after {
+        background: ${colors.primary50};
+      }
+    }
+    & input[type="checkbox"]:checked+label::before,
+    & input[type="radio"]:checked+label::before {
+      border-color: ${colors.white};
+      background: ${colors.white};
+    }
+  }
+
+`;

package/src/components/atoms/FormField/CheckRadioField/index.ts

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

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

@@ -1,37 +1,37 @@
-import React, { Children, useMemo } from 'react'
-
-import { IFormField } from './FormField.interface'
-import { StyledFieldContainer } from './FormField.theme'
-import { getId } from '@/helpers/uuid'
-
-export const FormField = ({
-  id,
-  label,
-  leftIcon,
-  rightIcon,
-  isCheckRadio,
-  className,
-  children,
-  ...props
-}: IFormField) => {
-  const itemID = id ? id : useMemo(() => getId(), [])
-  return (
-    <StyledFieldContainer $isCheckRadio={isCheckRadio} className={className}>
-      {label && (
-        <label
-          htmlFor={itemID}
-          className="d-blocks h5 color-primary50 fw-bold text-uppercase mb-2"
-        >
-          {label}
-        </label>
-      )}
-      <div>
-        {leftIcon && leftIcon}
-        {children}
-        {rightIcon && rightIcon}
-      </div>
-    </StyledFieldContainer>
-  )
-}
-
-export default FormField
+import React, { Children, useMemo } from 'react'
+
+import { IFormField } from './FormField.interface'
+import { StyledFieldContainer } from './FormField.theme'
+import { getId } from '@/helpers/uuid'
+
+export const FormField = ({
+  id,
+  label,
+  leftIcon,
+  rightIcon,
+  isCheckRadio,
+  className,
+  children,
+  ...props
+}: IFormField) => {
+  const itemID = id ? id : useMemo(() => getId(), [])
+  return (
+    <StyledFieldContainer $isCheckRadio={isCheckRadio} className={className}>
+      {label && (
+        <label
+          htmlFor={itemID}
+          className="d-blocks h5 color-primary50 fw-bold text-uppercase mb-2"
+        >
+          {label}
+        </label>
+      )}
+      <div>
+        {leftIcon && leftIcon}
+        {children}
+        {rightIcon && rightIcon}
+      </div>
+    </StyledFieldContainer>
+  )
+}
+
+export default FormField

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

@@ -1,10 +1,10 @@
-export interface IFormField {
-  id?: string
-  label?: string
-  leftIcon?: React.ReactNode | React.ReactNode[]
-  rightIcon?: React.ReactNode | React.ReactNode[]
-  $isCheckRadio?: boolean
-  isCheckRadio?: boolean
-  children?: React.ReactNode
-  className?: string
-}
+export interface IFormField {
+  id?: string
+  label?: string
+  leftIcon?: React.ReactNode | React.ReactNode[]
+  rightIcon?: React.ReactNode | React.ReactNode[]
+  $isCheckRadio?: boolean
+  isCheckRadio?: boolean
+  children?: React.ReactNode
+  className?: string
+}