@oc-digital/react-component-library 7.2.1-beta.0 → 7.2.2-beta.0

package/build/EditableTable/components/styled/Checkbox.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Checkbox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

package/build/EditableTable/components/styled/CheckboxLabel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const CheckboxLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;

package/build/EditableTable/components/styled/Input.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const Input: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const NumericFormatInput: import("@emotion/styled").StyledComponent<import("react-number-format/types/types").InternalNumberFormatBase & {
+    thousandSeparator?: string | boolean | undefined;
+    decimalSeparator?: string | undefined;
+    allowedDecimalSeparators?: string[] | undefined;
+    thousandsGroupStyle?: "none" | "thousand" | "lakh" | "wan" | undefined;
+    decimalScale?: number | undefined;
+    fixedDecimalScale?: boolean | undefined;
+    allowNegative?: boolean | undefined;
+    allowLeadingZeros?: boolean | undefined;
+    suffix?: string | undefined;
+    prefix?: string | undefined;
+} & Omit<import("react-number-format").InputAttributes, never> & Omit<unknown, "defaultValue" | "value" | "type" | "onChange" | "prefix" | "inputMode" | "onFocus" | "onBlur" | "onKeyDown" | "onMouseUp" | "ref" | "displayType" | "renderText" | "getInputRef" | "valueIsNumericString" | "onValueChange" | "isAllowed" | "isCharacterSame" | "thousandSeparator" | "decimalSeparator" | "allowedDecimalSeparators" | "thousandsGroupStyle" | "decimalScale" | "fixedDecimalScale" | "allowNegative" | "allowLeadingZeros" | "suffix"> & {
+    customInput?: import("react").ComponentType<unknown> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/build/EditableTable/components/styled/InputAdornmentWrapper.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const InputAdornmentWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/EditableTable/components/styled/InputWrapper.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/EditableTable/components/styled/SmallError.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SmallError: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/build/assets/index-DCUzKTQq.css

@@ -0,0 +1,78 @@
+.input {
+  background: transparent;
+  border: 0;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  transition: border-bottom 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    margin-top 200ms cubic-bezier(0.4, 0, 0.2, 1) 0m;
+  margin-top: 0;
+  min-width: 3ch;
+  max-width: 20ch;
+  box-sizing: content-box;
+
+  &:hover {
+    border-bottom: 1px solid rgb(158, 158, 158);
+    margin-top: 1px;
+  }
+
+  &:focus {
+    outline: none;
+    border-bottom: 2px solid rgb(115, 196, 202);
+    margin-top: 2px;
+  }
+
+  &[data-valid="false"] {
+    border-bottom-color: #d32f2f !important;
+  }
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  width: fit-content;
+  margin: auto;
+}
+
+.error {
+  color: #d32f2f;
+  display: block;
+  text-align: center;
+}
+
+.checkbox {
+  accent-color: rgb(115, 196, 202);
+  margin: 0;
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  border-radius: 5rem;
+  width: 38px;
+  height: 38px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.03);
+  }
+
+  &:active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+}
+
+.disabled.label {
+  &:hover {
+    background: unset;
+  }
+
+  &:active {
+    background: unset;
+  }
+}