@cyber-harbour/ui 1.0.51 → 1.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/Checkbox/Checkbox.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FabricComponent, createComponent, destructSpaceProps, pxToRem } from '../../Theme';
+
+type CheckboxProps = FabricComponent<{
+  label?: any;
+}> &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export const Checkbox = ({ label, className, disabled, ...props }: CheckboxProps) => {
+  const spaceProps = destructSpaceProps(props);
+  return (
+    <StyledCheckbox className={className} $disabled={disabled} {...spaceProps}>
+      <HiddenInput type="checkbox" disabled={disabled} {...props} />
+      <CustomCheckbox />
+      {!!label && <LabelText>{label}</LabelText>}
+    </StyledCheckbox>
+  );
+};
+
+const CustomCheckbox = styled.div(
+  ({ theme }) => `
+    width: ${pxToRem(15)};
+    height: ${pxToRem(15)};
+    border-radius: ${pxToRem(2)};
+    border: 1px solid ${theme.colors.stroke.main};
+    background-color: ${theme.colors.background};
+    transition: all 0.2s ease;
+  `
+);
+
+const LabelText = styled.span(
+  ({ theme }) => `
+  margin-left: ${pxToRem(5)};
+  font-size: ${theme.typography.variants.h3.fontSize};
+  color: ${theme.colors.text.main};
+`
+);
+
+const HiddenInput = styled.input`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+`;
+
+const StyledCheckbox = createComponent(
+  styled.label<{ $disabled?: boolean }>(({ theme, $disabled }) => {
+    return `
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: ${$disabled ? 'not-allowed' : 'pointer'};
+
+    &:hover {
+        ${HiddenInput}:not(:disabled) + ${CustomCheckbox} {
+          border-color: ${theme.colors.primary.main};
+        }
+    }
+
+    ${HiddenInput}:checked + ${CustomCheckbox} {
+        background-color: ${theme.colors.primary.main};
+        border-color: ${theme.colors.primary.main};
+    }
+    ${HiddenInput}:disabled + ${CustomCheckbox} {
+        background-color: ${theme.colors.disable};
+    }
+    `;
+  })
+);

package/src/Core/Checkbox/index.ts

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

package/src/Core/IconComponents/AndroidIcon.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+interface AndroidIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const AndroidIcon = ({ fill = 'currentColor', ...props }: AndroidIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M13.0054 7.9201C12.9254 7.0301 12.1654 6.2901 11.2454 6.1901C10.7254 6.1301 9.84544 6.1001 8.87544 6.1001C7.95544 6.1001 7.12544 6.1301 6.62544 6.1801C5.60544 6.2801 4.88544 7.0501 4.80544 8.1201C4.73544 9.0901 4.70544 11.0701 4.82544 11.9701C4.93544 12.7301 5.47544 13.3501 6.23544 13.6001C6.24544 13.7801 6.23544 13.9801 6.22544 14.1901C6.19544 15.0901 6.13544 16.4401 7.40544 16.5001H7.49544C7.86544 16.5001 8.15544 16.3901 8.36544 16.1701C8.78544 15.7401 8.76544 14.9901 8.74544 14.3301C8.73544 14.0201 8.72544 13.7301 8.81544 13.6501H9.07544V15.4301C9.07544 15.6001 9.35544 16.0501 9.38544 16.1001C9.60544 16.3601 9.93544 16.5001 10.3054 16.5001C10.8554 16.5001 11.4654 16.1701 11.5754 15.5401C11.6054 15.3601 11.5854 14.8901 11.5754 14.4301C11.5654 14.1401 11.5554 13.7601 11.5454 13.6101C12.3654 13.3401 12.9254 12.6901 13.0054 11.9101C13.0954 10.9101 13.0954 8.9401 13.0054 7.9201ZM7.65544 15.3401C7.65544 15.3401 7.57544 15.4001 7.49544 15.4001C7.42544 15.4001 7.37544 15.3701 7.35544 15.3101C7.30544 15.1201 7.28544 13.7401 7.23544 13.6601C7.24544 13.6601 7.27544 13.6501 7.39544 13.6501H7.65544V15.3401ZM10.0854 13.6601C10.0854 13.6601 10.1154 13.6501 10.2354 13.6501H10.4954V15.3401C10.4954 15.3401 10.4154 15.4001 10.3354 15.4001C10.2654 15.4001 10.2154 15.3701 10.1954 15.3101C10.1454 15.1201 10.1254 13.7401 10.0854 13.6601ZM11.9154 11.7301C11.8654 12.2101 11.5554 12.5301 11.0854 12.5701C10.7554 12.6001 10.5154 12.6301 10.0954 12.6101C9.65544 12.5901 9.42544 12.5801 9.25544 12.5801C8.46544 12.5701 8.27544 12.6601 7.56544 12.6401C7.35544 12.6401 7.05544 12.6201 6.69544 12.5801C6.20544 12.4801 5.94544 12.1801 5.89544 11.6701C5.81544 10.8601 5.80544 8.8501 5.90544 8.1201C5.95544 7.6801 6.23544 7.3701 6.57544 7.2801C6.73544 7.2601 6.96544 7.2401 7.23544 7.2301C7.36544 7.2301 7.76544 7.2001 8.59544 7.1801C9.55544 7.1701 9.25544 7.2001 10.1054 7.1801C10.2354 7.1801 10.6054 7.1801 11.0754 7.2501C11.4554 7.3201 11.6354 7.3901 11.7554 7.5301C11.9054 7.7101 11.9154 7.9201 11.9154 8.0301C11.9654 9.1101 12.0754 10.2301 11.9154 11.7201V11.7301Z"
+        fill={fill}
+      />
+      <path
+        d="M11.3952 1.66C10.7352 0.92 9.82522 0.5 8.90522 0.5C8.79522 0.5 8.68522 0.51 8.57522 0.52C6.96522 0.7 5.62522 2.14 5.52522 3.8C5.46522 4.69 5.92522 5.7 6.87522 5.84C7.35522 5.9 8.22522 5.91 8.70522 5.91C9.51522 5.91 10.3452 5.89 10.8052 5.85C11.5552 5.78 12.1952 5.14 12.2852 4.36C12.3952 3.41 12.0752 2.42 11.3952 1.66ZM8.98522 4.82C8.28522 4.82 7.56522 4.8 7.19522 4.76C6.94522 4.73 6.78522 4.63 6.70522 4.45C6.47522 3.97 6.76522 3.09 7.05522 2.64C7.42522 2.06 8.13522 1.64 8.81522 1.6H8.91522C9.81522 1.6 10.7352 2.27 11.0452 3.17C11.1852 3.6 11.2852 4.21 11.0852 4.53C11.0052 4.66 10.8752 4.74 10.6852 4.76C10.3252 4.8 9.66522 4.82 8.98522 4.82Z"
+        fill={fill}
+      />
+      <path
+        d="M4.45531 7.78014C4.34531 7.26014 3.84531 6.89014 3.23531 6.89014C2.87531 6.89014 2.54531 7.02014 2.32531 7.24014C2.13531 7.43014 1.99531 7.80014 1.97531 8.05014C1.90531 8.62014 1.88531 10.6801 1.98531 11.2701C2.11531 11.9401 2.70531 12.2401 3.23531 12.2401C3.87531 12.2401 4.38531 11.8401 4.46531 11.2701C4.54531 10.7801 4.55531 8.25014 4.45531 7.78014ZM3.24531 7.98014C3.24531 7.98014 3.37531 7.98014 3.39531 8.17014C3.45531 8.71014 3.46531 10.5401 3.38531 11.0001C3.37531 11.1101 3.31531 11.1701 3.25531 11.1701C3.16531 11.1701 3.07531 11.0701 3.05531 10.8301C3.00531 10.2601 2.97531 8.71014 3.05531 8.18014C3.07531 8.09014 3.15531 7.99014 3.20531 7.98014H3.24531Z"
+        fill={fill}
+      />
+      <path
+        d="M15.8355 7.99014C15.7655 7.34014 15.2555 6.89014 14.5955 6.89014C14.5255 6.89014 14.4455 6.89014 14.3655 6.91014C13.8555 6.99014 13.4355 7.38014 13.3555 7.85014C13.2455 8.46014 13.2755 10.5401 13.3355 11.1401C13.4155 11.9001 14.0255 12.2401 14.5955 12.2401C15.2055 12.2401 15.7155 11.8701 15.8155 11.3401C15.9255 10.8001 15.9055 8.57014 15.8355 7.99014ZM14.6055 7.99014C14.6755 7.99014 14.7355 7.99014 14.7555 8.17014C14.8155 8.71014 14.8255 10.5501 14.7555 11.0001C14.7355 11.1101 14.6855 11.1601 14.6055 11.1601C14.5255 11.1601 14.4355 11.1101 14.4155 10.9501C14.3455 10.3601 14.3555 8.73014 14.4255 8.18014C14.4455 8.00014 14.4655 8.00014 14.5555 7.99014H14.6055Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/IosIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from 'react';
+
+interface IosIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const IosIcon = ({ fill = 'currentColor', ...props }: IosIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M14.2026 11.7603C14.1126 11.7203 14.0426 11.6803 13.9726 11.6503C13.3326 11.2203 12.9126 10.4803 12.8726 9.68029C12.8326 8.92029 13.1326 8.22029 13.7026 7.75029C13.7926 7.67029 13.8926 7.62029 13.9826 7.57029C14.1726 7.46029 14.3726 7.33029 14.4126 7.12029C14.4526 6.94029 14.3726 6.75029 14.1826 6.51029C13.5226 5.66029 12.3526 5.12029 11.2026 5.12029C11.1226 5.12029 11.0526 5.12029 10.9626 5.13029C10.5226 5.16029 10.1426 5.28029 9.77263 5.40029C9.40263 5.53029 9.05263 5.64029 8.66263 5.64029C8.48263 5.64029 8.31263 5.61029 8.12263 5.56029C7.89263 5.50029 7.68263 5.43029 7.49263 5.37029C6.92263 5.19029 6.43263 5.05029 5.91263 5.05029C5.35263 5.05029 4.80263 5.21029 4.17263 5.59029C2.91263 6.33029 2.19263 7.63029 2.09263 9.35029C1.96263 11.7903 3.16263 14.6003 4.89263 15.9103C5.39263 16.3003 5.86263 16.4803 6.34263 16.4803C6.74263 16.4803 7.10263 16.3503 7.46263 16.2303C7.85263 16.0903 8.24263 15.9503 8.71263 15.9503C8.77263 15.9503 8.84263 15.9503 8.91263 15.9603C9.20263 15.9903 9.47263 16.0903 9.76263 16.2103C10.0126 16.3103 10.2826 16.4203 10.5826 16.4603C10.6826 16.4703 10.7826 16.4903 10.8826 16.4903C11.5426 16.4903 12.1326 16.2403 12.6826 15.7203C13.2726 15.1503 14.0026 14.0703 14.4226 13.2603C14.7226 12.6703 14.7926 12.4903 14.8026 12.4003C14.8326 12.0503 14.4526 11.8703 14.1826 11.7403L14.2026 11.7603ZM5.44263 15.0203C4.08263 13.8703 2.85263 11.1303 3.18263 8.89029C3.32263 8.02029 3.74263 6.88029 5.05263 6.32029C5.38263 6.18029 5.69263 6.12029 6.02263 6.12029C6.47263 6.12029 6.88263 6.25029 7.31263 6.38029C7.78263 6.53029 8.24263 6.70029 8.80263 6.70029C8.93263 6.70029 9.04263 6.69029 9.17263 6.67029C9.41263 6.64029 9.62263 6.56029 9.84263 6.47029C9.95263 6.43029 10.0826 6.38029 10.1926 6.34029C10.5726 6.24029 10.9326 6.19029 11.2626 6.19029C11.9826 6.19029 12.6026 6.42029 13.1126 6.88029C12.2426 7.54029 11.7726 8.55029 11.8226 9.68029C11.8826 10.9003 12.5526 12.0103 13.5726 12.6503C13.2026 13.3303 12.7626 14.0903 12.1926 14.7203C11.7226 15.2403 11.3426 15.4503 10.9226 15.4503C10.7726 15.4503 10.6226 15.4203 10.4726 15.3703C10.2326 15.2903 10.0426 15.2303 9.88263 15.1703C9.49263 15.0203 9.19263 14.9203 8.68263 14.9203C8.54263 14.9203 8.38263 14.9203 8.19263 14.9503C7.79263 15.0003 7.46263 15.1303 7.16263 15.2403C6.88263 15.3403 6.63263 15.4403 6.37263 15.4403C6.08263 15.4403 5.78263 15.3003 5.45263 15.0203H5.44263Z"
+        fill={fill}
+      />
+      <path
+        d="M10.9426 0.500234C10.8826 0.500234 10.8326 0.510234 10.7526 0.510234C9.89258 0.620234 9.01258 1.17023 8.39258 1.96023C7.82258 2.70023 7.57258 3.54023 7.68258 4.31023C7.71258 4.51023 7.83258 4.85023 8.37258 4.85023C8.57258 4.85023 8.77258 4.80023 8.94258 4.77023C10.4026 4.44023 11.6926 2.64023 11.5426 1.12023C11.5126 0.850234 11.4126 0.490234 10.9326 0.490234L10.9426 0.500234ZM8.73258 3.73023C8.87258 2.80023 9.56258 1.98023 10.4726 1.69023C10.2926 2.61023 9.65258 3.52023 8.73258 3.73023Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/MicrosoftIcon.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+interface MicrosoftIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const MicrosoftIcon = ({ fill = 'currentColor', ...props }: MicrosoftIconProps) => {
+  return (
+    <svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M15.9805 6.96004V6.61004C16.0005 5.75004 15.9805 4.88004 15.9805 4.03004C15.9605 3.03004 15.9505 2.04004 15.9605 1.02004C15.9305 0.740039 15.7005 0.540039 15.3305 0.540039C15.3105 0.540039 7.92049 2.02004 7.92049 2.02004C7.64049 2.10004 7.48049 2.18004 7.44049 2.58004C7.36049 3.45004 7.39049 4.39004 7.42049 5.30004C7.45049 6.12004 7.49049 6.98004 7.44049 7.75004C7.41049 7.96004 7.52049 8.14004 7.87049 8.31004C9.04049 8.34004 10.2205 8.34004 11.4105 8.34004C12.6905 8.34004 13.9805 8.34004 15.2405 8.32004L15.6005 8.29004C15.7005 8.24004 15.9105 8.14004 15.9505 7.85004C15.9805 7.62004 15.9805 7.27004 15.9705 6.96004H15.9805ZM14.8305 1.81004V7.21004H8.59049V3.04004L14.8305 1.81004Z"
+        fill={fill}
+      />
+      <path
+        d="M15.9806 10.6102V10.0502C16.0006 9.74018 16.0006 9.41018 15.9606 9.14018C15.9406 9.07018 15.9406 8.96018 15.8406 8.84018C15.7906 8.77018 15.6306 8.69018 15.5106 8.68018H7.87056C7.80056 8.68018 7.72056 8.73018 7.67056 8.76018C7.59056 8.84018 7.44056 8.97018 7.44056 9.20018C7.49056 9.99018 7.46056 10.8502 7.42056 11.6802C7.39056 12.5902 7.35056 13.5202 7.44056 14.4102C7.47056 14.8202 7.69056 14.9002 7.95056 14.9902C9.17056 15.3002 10.4706 15.5202 11.7206 15.7302C12.8906 15.9302 14.0906 16.1402 15.2406 16.4202C15.2606 16.4402 15.3906 16.4402 15.3906 16.4402C15.9706 16.4402 15.9706 15.8602 15.9706 15.4702C16.0006 13.8702 15.9906 12.2102 15.9706 10.6002L15.9806 10.6102ZM8.59056 13.9102V9.81018H14.8306V15.1602L8.59056 13.9102Z"
+        fill={fill}
+      />
+      <path
+        d="M7.14065 11.6202C7.11065 10.8602 7.07065 10.0702 7.12065 9.32018C7.10065 8.94018 6.87066 8.68018 6.51065 8.68018L0.470655 8.70018C0.220655 8.75018 0.0606546 9.00018 0.0406546 9.28018C0.0906546 9.81018 0.0606546 10.4202 0.0206546 11.0102C-0.00934539 11.6702 -0.0493454 12.3402 0.0406546 12.9502C0.0906546 13.3902 0.340655 13.4802 0.600655 13.5402C1.55065 13.8002 2.59065 14.0002 3.58065 14.1802C4.50065 14.3402 5.47065 14.5302 6.39065 14.7702H6.52065C6.68065 14.7702 7.06065 14.7202 7.11065 14.1402C7.19065 13.3302 7.16066 12.4602 7.13065 11.6202H7.14065ZM1.22065 12.4602V9.81018H5.94065V13.4802L1.22065 12.4602Z"
+        fill={fill}
+      />
+      <path
+        d="M7.13046 2.83C7.06046 2.3 6.70046 2.25 6.54046 2.25C6.52046 2.25 6.36046 2.27 6.34046 2.27C5.45046 2.5 4.53046 2.68 3.61046 2.85C2.61046 3.03 1.59046 3.23 0.620459 3.49C0.290459 3.59 0.0904587 3.67 0.0604587 4.13C-0.00954127 4.74 0.0304587 5.4 0.0404587 6.02C0.0704587 6.6 0.0904587 7.17 0.0604587 7.76C0.110459 8.12 0.320459 8.34 0.690459 8.34C1.04046 8.32 1.40046 8.31 1.78046 8.31C2.34046 8.31 2.92046 8.33 3.49046 8.36C4.07046 8.38 4.64046 8.39 5.22046 8.39C5.68046 8.39 6.13046 8.39 6.55046 8.34C7.03046 8.31 7.13046 7.98 7.14046 7.67C7.09046 6.96 7.12046 6.16 7.16046 5.38C7.19046 4.52 7.24046 3.64 7.14046 2.83H7.13046ZM5.94046 3.54V7.21H1.22046V4.58L5.94046 3.54Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -50,3 +50,6 @@ export { WayIcon } from './WayIcon';
 export { PlaneIcon } from './PlaneIcon';
 export { ShipIcon } from './ShipIcon';
 export { FileIcon } from './FileIcon';
+export { IosIcon } from './IosIcon';
+export { AndroidIcon } from './AndroidIcon';
+export { MicrosoftIcon } from './MicrosoftIcon';

package/src/Core/Label/Label.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FabricComponent, LabelSize, createComponent, generatePropertySpaceStyle, propToRem } from '../../Theme';
+
+type LabelProps = FabricComponent<{
+  label?: any;
+  helpText?: any;
+  errorText?: string;
+  size?: LabelSize;
+  children: any;
+  fullWidth?: boolean;
+}> &
+  Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &
+  (LabelDirection | LabelDirectionRaw);
+
+type LabelDirectionRaw = {
+  direction?: 'row' | 'row-reverse';
+  childrenWidth?: number | string;
+};
+
+type LabelDirection = {
+  direction?: Omit<React.CSSProperties['flexDirection'], 'row' | 'row-reverse'>;
+};
+
+export const Label = ({
+  label,
+  helpText,
+  children,
+  direction = 'column',
+  size = 'small',
+  errorText,
+  fullWidth,
+  ...props
+}: LabelProps) => {
+  const $isRow = direction === 'row' || direction === 'row-reverse';
+  const $width = $isRow ? (props as LabelDirectionRaw).childrenWidth || '50%' : '100%';
+
+  return (
+    <StyledLabel $size={size} $direction={direction} $fullWidth={fullWidth} $isRow={$isRow} {...props}>
+      <LabelWrapper $width={$width}>
+        {!!label && <LabelText $size={size}>{label}</LabelText>}
+        {!!helpText && <HelpText $size={size}>{helpText}</HelpText>}
+      </LabelWrapper>
+      <Wrapper $width={$width}>
+        {children}
+        {!!errorText && <ErrorText $size={size}>{errorText}</ErrorText>}
+      </Wrapper>
+    </StyledLabel>
+  );
+};
+
+type StyledProps = {
+  $size: LabelSize;
+  $direction?: LabelDirection['direction'] | LabelDirectionRaw['direction'];
+  $fullWidth?: boolean;
+  $isRow: boolean;
+};
+
+type WrapperProps = { $width: number | string };
+type TextProps = { $size: LabelSize };
+
+const Wrapper = styled.div<WrapperProps>(
+  ({ theme, $width }) => `
+  flex-basis: 100%;
+  @media (min-width: ${theme.breakpoints.m}px) {
+    flex-basis: ${propToRem($width, theme.baseSize)};
+  }
+  `
+);
+
+const LabelWrapper = styled(Wrapper)<WrapperProps>`
+  align-self: flex-start;
+`;
+
+const LabelText = styled.div<TextProps>(
+  ({ theme, $size }) => `
+  line-height: 1.2;
+  font-weight: 500;
+  font-size: ${theme.label.sizes[$size].fontSize};
+  color: ${theme.label.color};
+  cursor: pointer;
+  :hover {
+    color: ${theme.colors.primary.main};
+  }
+
+`
+);
+
+const HelpText = styled.div<TextProps>(
+  ({ theme, $size }) => `
+  margin-top: ${theme.label.sizes[$size].helpText.marginTop};
+  word-break: break-word;
+  line-height: 1.2;
+  font-size:  ${theme.label.sizes[$size].helpText.fontSize};
+  color: ${theme.label.helpTextColor};
+`
+);
+const ErrorText = styled.div<TextProps>(
+  ({ theme, $size }) => `
+  margin-top: ${theme.label.sizes[$size].helpText.marginTop};
+  word-break: break-word;
+  line-height: 1.2;
+  font-size:  ${theme.label.sizes[$size].helpText.fontSize};
+  color: ${theme.colors.error};
+`
+);
+
+const StyledLabel = createComponent(
+  styled.label<FabricComponent<StyledProps>>(
+    ({
+      theme,
+      $direction = 'column',
+      $isRow,
+      $size,
+      $fullWidth = false,
+      mb = theme.label.sizes[$size].marginBottom,
+    }) => {
+      return `
+        display: inline-flex;
+        justify-content: space-between;
+        ${$fullWidth ? 'width: 100%;' : ''}
+        min-width: 0;
+        flex-direction: column;
+
+        @media (min-width: ${theme.breakpoints.m}px) {
+          flex-direction: ${$direction};
+          align-items:  ${$isRow ? 'center' : 'stretch'};
+        }
+
+        gap: ${theme.label.sizes[$size].gap};
+        ${generatePropertySpaceStyle(theme, 'margin-bottom', mb)};
+      `;
+    }
+  ),
+  { ignoreStyles: ['margin-bottom'] }
+);

package/src/Core/Label/index.ts

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

package/src/Core/index.ts

@@ -16,3 +16,5 @@ export * from './Line';
 export * from './EmptyData';
 export * from './Tag';
 export * from './Alert';
+export * from './Label';
+export * from './Checkbox';

package/src/Layouts/PageLayout/PageLayout.tsx

@@ -5,11 +5,12 @@ interface PageLayoutProps {
   header?: any;
   sidebar?: any;
   children?: any;
+  className?: string;
 }
 
-export const PageLayout = ({ children, header, sidebar }: PageLayoutProps) => {
+export const PageLayout = ({ children, header, sidebar, className }: PageLayoutProps) => {
   return (
-    <StyledContainer $withHeader={!!header} $withSidebar={!!sidebar}>
+    <StyledContainer className={className} $withHeader={!!header} $withSidebar={!!sidebar}>
       {header}
       {sidebar}
       <StyledMain>{children}</StyledMain>

package/src/Theme/componentFabric.ts

@@ -1,7 +1,7 @@
 import styled, { css, IStyledComponent, DefaultTheme, WebTarget } from 'styled-components';
 import { pxToRem } from './utils';
 
-type MarginProps = {
+type SpaceProps = {
   m?: string | number; // margin
   mt?: string | number; // margin-top
   mr?: string | number; // margin-right
@@ -18,7 +18,7 @@ type MarginProps = {
   py?: string | number; // padding-top + padding-bottom
 };
 
-export type FabricComponent<T = object> = T & MarginProps;
+export type FabricComponent<T = object> = T & SpaceProps;
 
 const marginStyles = ({ ignoreStyles }: FabricComponentOptions = {}) =>
   css<FabricComponent>(({ theme, ...props }) => {
@@ -91,3 +91,15 @@ export const createComponent = <T extends object = {}>(
     ${paddingStyles(options)}
   `;
 };
+
+export const destructSpaceProps = <T extends FabricComponent>(props: T): SpaceProps => {
+  const rest: SpaceProps = {};
+  ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].forEach((key) => {
+    if (key in props) {
+      rest[key as keyof SpaceProps] = props[key as keyof SpaceProps];
+      delete props[key as keyof SpaceProps];
+    }
+  });
+
+  return rest;
+};

package/src/Theme/themes/dark.ts

@@ -758,6 +758,24 @@ export const darkThemePx: Theme = {
       background: '#FFFBE0',
     },
   },
+  label: {
+    sizes: {
+      small: {
+        fontSize: 14,
+        gap: 10,
+        marginBottom: 20,
+        helpText: { fontSize: 12, marginTop: 5 },
+      },
+      medium: {
+        fontSize: 16,
+        gap: 10,
+        marginBottom: 25,
+        helpText: { fontSize: 14, marginTop: 5 },
+      },
+    },
+    color: '#ffffff',
+    helpTextColor: '#535353',
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -757,6 +757,24 @@ export const lightThemePx: Theme = {
       background: '#FFFBE0',
     },
   },
+  label: {
+    sizes: {
+      small: {
+        fontSize: 14,
+        gap: 10,
+        marginBottom: 20,
+        helpText: { fontSize: 12, marginTop: 5 },
+      },
+      medium: {
+        fontSize: 16,
+        gap: 10,
+        marginBottom: 25,
+        helpText: { fontSize: 14, marginTop: 5 },
+      },
+    },
+    color: '#101010',
+    helpTextColor: '#99989C',
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -22,6 +22,14 @@ export type TagColor =
   | 'orange'
   | string;
 
+export type LabelSize = 'small' | 'medium';
+export type LabelSizeStyle = {
+  fontSize: number | string;
+  gap: number | string;
+  marginBottom: number | string;
+  helpText: { fontSize: number | string; marginTop: number | string };
+};
+
 // Типи для spacing та breakpoints
 export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
 
@@ -274,6 +282,11 @@ export type Theme = {
       background: string;
     };
   };
+  label: {
+    sizes: Record<LabelSize, LabelSizeStyle>;
+    color: string;
+    helpTextColor: string;
+  };
 };
 
 //TODO check and refactoring

package/src/Theme/utils.ts

@@ -88,6 +88,27 @@ const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
   baseSize: true,
 };
 
+/**
+ * Converts a prop value to rem units if needed
+ *
+ * @param value - The pixel value to convert. Can be a number or a string with 'px' suffix
+ * @param baseSize - Base font size in pixels. Default is 16px (browser default)
+ * @returns The value in rem units as a string (e.g., "1.25rem")
+ */
+export const propToRem = (value: number | string, baseSize: number = 16): string => {
+  if (typeof value === 'string' && value.trim().endsWith('%')) return value; // Return percentage values as-is
+  const numericValue = typeof value === 'string' ? parseFloat(value) : value;
+
+  // Handle invalid values
+  if (isNaN(numericValue)) {
+    return `${value}`;
+  }
+
+  // Convert to rem and round to 4 decimal places for precision
+  const remValue = (numericValue / baseSize).toFixed(4).replace(/\.?0+$/, '');
+
+  return `${remValue}rem`;
+};
 /**
  * Recursively converts all pixel values in an object to rem units
  *