@binamik/components 0.1.0

package/dist/Assets/animations/Spinner/Spinner.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SpinnerProps {
+    size: string;
+    color?: string;
+    thickness?: number;
+}
+export declare const Spinner: React.FC<SpinnerProps>;
+export {};

package/dist/Assets/animations/Spinner/SpinnerStyles.d.ts

@@ -0,0 +1,16 @@
+interface SpinnerStylesProps {
+    size: string;
+}
+export declare const SpinnerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & SpinnerStylesProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SpinnerComponent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const Circle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").SVGProps<SVGCircleElement>, {}>;
+export {};

package/dist/Assets/animations/Spinner/index.d.ts

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

package/dist/Assets/animations/index.d.ts

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

package/dist/Assets/index.d.ts

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

package/dist/Buttons/DefaultButton/Button.d.ts

@@ -0,0 +1,9 @@
+import React, { ButtonHTMLAttributes } from 'react';
+declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    isLoading?: boolean;
+    loadingText?: string;
+    outlined?: boolean;
+    children: React.ReactNode;
+};
+export declare const Button: ({ disabled, isLoading, loadingText, outlined, className, children, ...rest }: ButtonProps) => React.ReactElement;
+export default Button;

package/dist/Buttons/DefaultButton/Button.styles.d.ts

@@ -0,0 +1,9 @@
+interface ButtonProps {
+    isLoading: boolean;
+    hasLoadingText: boolean;
+}
+export declare const DefaultButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export {};

package/dist/Buttons/DefaultButton/index.d.ts

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

package/dist/Buttons/index.d.ts

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

package/dist/Styles/binamikCssReset.d.ts

@@ -0,0 +1 @@
+export declare const binamikCssReset: import("@emotion/utils").SerializedStyles;

package/dist/Styles/binamikGlobalStyles.d.ts

@@ -0,0 +1 @@
+export declare const binamikGlobalStyles: import("@emotion/utils").SerializedStyles;

package/dist/Styles/binamikTheme.d.ts

@@ -0,0 +1 @@
+export declare const binamikTheme: import("@emotion/utils").SerializedStyles;

package/dist/Styles/index.d.ts

@@ -0,0 +1,5 @@
+export * from './binamikTheme';
+export * from './binamikCssReset';
+export * from './binamikGlobalStyles';
+export * from './utils/depthBuilder';
+export * from './utils/PreventScroll';

package/dist/Styles/utils/PreventScroll.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PreventScroll: () => React.ReactElement;

package/dist/Styles/utils/depthBuilder.d.ts

@@ -0,0 +1,3 @@
+declare type AvailableDepths = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+export declare const depth: (depthValue: AvailableDepths, strength?: 'light' | 'normal' | 'dark') => string;
+export {};

package/dist/binamik-components.es.js

@@ -0,0 +1,696 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { keyframes, css, Global } from "@emotion/react";
+import styled from "@emotion/styled";
+import require$$0 from "react";
+const dashAnimation = keyframes`
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+`;
+const rotate = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const SpinnerContainer = styled.div`
+  position: relative;
+  margin: 0 auto;
+  width: ${({ size }) => size || "1.5rem"};
+
+  &:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+`;
+const SpinnerComponent = styled.svg`
+  animation: ${rotate} 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+`;
+const Circle = styled.circle`
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  animation: ${dashAnimation} 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+`;
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production_min = {};
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+function toObject(val) {
+  if (val === null || val === void 0) {
+    throw new TypeError("Object.assign cannot be called with null or undefined");
+  }
+  return Object(val);
+}
+function shouldUseNative() {
+  try {
+    if (!Object.assign) {
+      return false;
+    }
+    var test1 = new String("abc");
+    test1[5] = "de";
+    if (Object.getOwnPropertyNames(test1)[0] === "5") {
+      return false;
+    }
+    var test2 = {};
+    for (var i = 0; i < 10; i++) {
+      test2["_" + String.fromCharCode(i)] = i;
+    }
+    var order2 = Object.getOwnPropertyNames(test2).map(function(n2) {
+      return test2[n2];
+    });
+    if (order2.join("") !== "0123456789") {
+      return false;
+    }
+    var test3 = {};
+    "abcdefghijklmnopqrst".split("").forEach(function(letter) {
+      test3[letter] = letter;
+    });
+    if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
+      return false;
+    }
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+shouldUseNative() ? Object.assign : function(target, source) {
+  var from;
+  var to = toObject(target);
+  var symbols;
+  for (var s = 1; s < arguments.length; s++) {
+    from = Object(arguments[s]);
+    for (var key in from) {
+      if (hasOwnProperty.call(from, key)) {
+        to[key] = from[key];
+      }
+    }
+    if (getOwnPropertySymbols) {
+      symbols = getOwnPropertySymbols(from);
+      for (var i = 0; i < symbols.length; i++) {
+        if (propIsEnumerable.call(from, symbols[i])) {
+          to[symbols[i]] = from[symbols[i]];
+        }
+      }
+    }
+  }
+  return to;
+};
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var f = require$$0, g = 60103;
+reactJsxRuntime_production_min.Fragment = 60107;
+if (typeof Symbol === "function" && Symbol.for) {
+  var h = Symbol.for;
+  g = h("react.element");
+  reactJsxRuntime_production_min.Fragment = h("react.fragment");
+}
+var m = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, n = Object.prototype.hasOwnProperty, p = { key: true, ref: true, __self: true, __source: true };
+function q(c, a, k) {
+  var b, d = {}, e = null, l = null;
+  k !== void 0 && (e = "" + k);
+  a.key !== void 0 && (e = "" + a.key);
+  a.ref !== void 0 && (l = a.ref);
+  for (b in a)
+    n.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+  if (c && c.defaultProps)
+    for (b in a = c.defaultProps, a)
+      d[b] === void 0 && (d[b] = a[b]);
+  return { $$typeof: g, type: c, key: e, ref: l, props: d, _owner: m.current };
+}
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
+{
+  jsxRuntime.exports = reactJsxRuntime_production_min;
+}
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+const Spinner = ({
+  size,
+  color,
+  thickness
+}) => {
+  return /* @__PURE__ */ jsx(SpinnerContainer, {
+    size,
+    children: /* @__PURE__ */ jsx(SpinnerComponent, {
+      viewBox: "25 25 50 50",
+      children: /* @__PURE__ */ jsx(Circle, {
+        className: "path",
+        cx: "50",
+        cy: "50",
+        r: "20",
+        fill: "none",
+        stroke: color || "currentColor",
+        opacity: "0.5",
+        strokeWidth: thickness || 5,
+        strokeMiterlimit: "10"
+      })
+    })
+  });
+};
+const pulse = keyframes`
+  100% {
+    opacity: 0.5;
+  }
+`;
+const DefaultButtonContainer = styled.button`
+  --button-hover-brightness: 0.88;
+
+  position: relative;
+  padding: ${({ isLoading, hasLoadingText }) => isLoading && hasLoadingText ? "0.75em 1.125em 0.75em 2.5em" : "0.75em 1.25em"};
+  border-radius: 30px;
+  border: 0;
+
+  font-size: 1rem;
+  font-weight: 700;
+  background-color: var(--clr-primary);
+  color: var(--clr-white);
+
+  transition: all 250ms;
+
+  cursor: pointer;
+
+  .button__text_wrapper {
+    animation: ${({ isLoading }) => isLoading ? pulse : "none"} 0.75s infinite
+      alternate;
+  }
+
+  span svg {
+    width: 3.25em;
+    height: 3.25em;
+  }
+
+  &.button__outline {
+    border: 1px solid var(--clr-primary);
+    background-color: transparent;
+    color: var(--clr-primary);
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 30px;
+      transition: opacity 250ms;
+      box-shadow: 0 0 10px 1px var(--clr-primary);
+      opacity: 0;
+    }
+  }
+
+  &:hover {
+    filter: brightness(var(--button-hover-brightness));
+
+    &.button__outline::after {
+      opacity: 0.25;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.7;
+    filter: saturate(0.7);
+    cursor: default;
+    --button-hover-brightness: 1;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+
+    width: ${({ isLoading, hasLoadingText }) => isLoading && hasLoadingText ? "2em" : "0"};
+  }
+
+  .button__spinner_wrapper {
+    margin: -0.5em 0;
+    display: ${({ isLoading }) => isLoading ? "block" : "none"};
+    ${({ hasLoadingText }) => hasLoadingText && css`
+        top: calc(50% + 0.5em);
+        transform: translateY(-50%);
+        position: absolute;
+        left: 0.5rem;
+      `}
+  }
+`;
+const Button = (_a) => {
+  var _b = _a, {
+    disabled = false,
+    isLoading = false,
+    loadingText = "",
+    outlined = false,
+    className = "",
+    children
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "isLoading",
+    "loadingText",
+    "outlined",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(DefaultButtonContainer, __spreadProps(__spreadValues({
+    disabled: disabled || isLoading,
+    isLoading,
+    hasLoadingText: !!loadingText,
+    className: `${className} ${outlined ? "button__outline" : ""}`,
+    type: "button"
+  }, rest), {
+    children: [/* @__PURE__ */ jsx("div", {
+      className: "button__spinner_wrapper",
+      children: /* @__PURE__ */ jsx(Spinner, {
+        size: "1.5em"
+      })
+    }), /* @__PURE__ */ jsx("span", {
+      className: "button__text_wrapper",
+      children: isLoading ? loadingText || "" : children
+    })]
+  }));
+};
+const binamikTheme = css`
+  :root {
+    --clr-white: #ffffff;
+    --clr-black: #000000;
+
+    --clr-white-overlay: rgba(255, 255, 255, 0.8);
+
+    --clr-gray1: #4D4D4D;
+    --clr-gray2: #666666;
+    --clr-gray3: #6A6A6A;
+    --clr-gray4: #959595;
+    --clr-gray5: #AAAAAA;
+    --clr-gray6: #BABABA;
+    --clr-gray7: #D6D6D6;
+    --clr-gray8: #E6E6E6;
+    --clr-gray9: #EAEAEA;
+    --clr-gray10: #EDEDED;
+    --clr-gray11: #F0F0F0;
+    --clr-gray12: #F4F4F4;
+    --clr-gray13: #F7F7F7;
+    --clr-gray14: #FAFAFA;
+    --clr-gray15: #FCFCFC;
+
+    --clr-blue1: #286C81;
+    --clr-blue2: #55A6AC;
+    --clr-blue3: #1ED6BB;
+    --clr-blue4: #007aff;
+    --clr-blue-grad1: linear-gradient(90deg, rgba(85,166,172,1) 0%, rgba(40,108,129,1) 100%);
+    --clr-blue-grad2: linear-gradient(46deg, #0096A2 0%, #1ED6BB 100%);
+    --clr-blue-grad3: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 100%);
+
+    --clr-green1: #188955;
+    --clr-green2: #10bd6d;
+    --clr-green3: #38B54B;
+    --clr-green4: #F4FAFA;
+    --clr-green5: #E2F4EC;
+    --clr-green6: #218430;
+    --clr-green7: #2aa747;
+    --clr-green-grad1: linear-gradient(90deg, rgba(16,189,109,1) 0%, rgba(24,137,85,1) 100%);
+
+    --clr-indigo1: #4D4DFF;
+    --clr-indigo1-t08: rgba(77, 77, 255, 0.05);
+    --clr-indigo2: #7E7EFC;
+    --clr-indigo3: #EDEDFF;
+    --clr-indigoGradient1: linear-gradient(90deg, rgba(126,126,252,1) 0%, rgba(77,77,255,1) 100%);
+
+    --clr-orange1: #FF8000;
+    --clr-orange2: #DD9E41;
+    --clr-orange3: #F6A742;
+    --clr-orange4: #FFC164;
+    --clr-orange5: #FAF2E7;
+    --clr-orange6: #CB901A;
+
+    --clr-red1: #E22521;
+    --clr-red2: #FF0000;
+    --clr-red3: #FF6461;
+    --clr-red4: #F64242;
+    --clr-red5: #F26D6D;
+    --clr-red6: #FBEBEB;
+    --clr-red-grad1: linear-gradient(90deg, rgb(246, 66, 66) 0%, rgb(242, 109, 109) 100%);
+
+    --clr-yellow1: #FDBB4E;
+    --clr-yellow2: #F8A520;
+    --clr-yellow3: #F2BB4E;
+
+    --clr-purple1: #7E7EFCFA;
+    --clr-purple2: #8080FC;
+
+    --clr-primary: var(--clr-indigo1);
+    --clr-primary-t08: var(--clr-indigo1-t08);
+    --clr-primary2: var(--clr-indigo2);
+    --clr-secondary: var(--clr-yellow1);
+
+    --clr-warning: var(--clr-orange4);
+    --clr-warning2: var(--clr-orange5);
+
+    --clr-success: var(--clr-green3);
+    --clr-success2: var(--clr-green5);
+
+    --clr-danger: var(--clr-red3);
+    --clr-danger2: var(--clr-red6);
+
+    --clr-info: var(--clr-gray5);
+    --clr-info2: var(--clr-gray14);
+
+    --clr-dark: var(--clr-gray2);
+    --clr-disabled: var(--clr-gray11);
+
+    --fs-2xs: 0.625rem; // 10px
+    --fs-xs: 0.75rem; // 12px
+    --fs-sm: 0.875rem; // 14px
+    --fs-md: 1rem; // 16px
+    --fs-lg: 1.125rem; // 18px
+    --fs-xl: 1.25rem; // 20px
+    --fs-2xl: 1.5rem; // 24px
+    --fs-3xl: 2rem; // 32px
+    --fs-4xl: 3rem; // 48px
+
+    --bp-tablet: 64rem; // 1024px
+  }
+`;
+const binamikCssReset = css`
+  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
+  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
+  img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,
+  i, center, dl, dt, dd, menu, ol, ul, li, fieldset, form, label, legend, table,
+  caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
+  embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output,
+  ruby, section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article, aside, details, figcaption, figure, footer, header, hgroup, main,
+  menu, nav, section {
+    display: block;
+  }
+
+  menu, ol, ul {
+    list-style: none;
+  }
+
+  blockquote, q {
+    quotes: none;
+  }
+
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  // Custom values
+  *, :before, :after {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    box-sizing: border-box;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  @keyframes autofill {
+    0%,100% {
+      background: transparent;
+    }
+  }
+
+  @-webkit-keyframes autofill {
+    0%,100% {
+      background: transparent;
+    }
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    animation-delay: 9999999s;
+    -webkit-animation-delay: 9999999s; /* 115 days without the anoying auto complete background */
+    animation-name: autofill;
+    -webkit-animation-name: autofill;
+    animation-fill-mode: both;
+    -webkit-animation-fill-mode: both;
+    background-clip: text;
+    -webkit-background-clip: text;
+  }
+`;
+const binamikGlobalStyles = css`
+  body {
+    line-height: 1;
+    color: #444;
+    position: relative;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  body, input, textarea, select, textarea, button {
+    font-family: "Mulish", sans-serif;
+    font-size: inherit;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+  }
+
+  h1 { font-size: var(--fs-3xl); }
+  h2 { font-size: var(--fs-2xl); }
+  h3 { font-size: var(--fs-xl);  }
+  h4 { font-size: var(--fs-l);   }
+
+  img {
+    position: relative;
+  }
+
+  img[alt]:after {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #D6D6D6;
+    content: '';
+  }
+
+
+  *:focus-visible {
+    outline: 2px solid #007aff;
+    outline-offset: 1px;
+    border-radius: 2px;
+  }
+
+  .noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+  }
+
+  .primary_color_txt {
+    color: var(--clr-primary);
+  }
+`;
+const UMBRA_COLOR = (shadowStyles = "normal") => {
+  if (shadowStyles === "light")
+    return "rgba(0, 0, 0, 0.05)";
+  if (shadowStyles === "normal")
+    return "rgba(0, 0, 0, 0.1)";
+  return "rgba(0, 0, 0, 0.2)";
+};
+const PENUMBRA_COLOR = (shadowStyles = "normal") => {
+  if (shadowStyles === "light")
+    return "rgba(0, 0, 0, 0.03)";
+  if (shadowStyles === "normal")
+    return "rgba(0, 0, 0, 0.07)";
+  return "rgba(0, 0, 0, 0.14)";
+};
+const AMBIENT_COLOR = (shadowStyles = "normal") => {
+  if (shadowStyles === "light")
+    return "rgba(0, 0, 0, 0.02)";
+  if (shadowStyles === "normal")
+    return "rgba(0, 0, 0, 0.06)";
+  return "rgba(0, 0, 0, 0.12)";
+};
+const UMBRA_MAP = {
+  0: "0px 0px 0px 0px",
+  1: "0px 2px 1px -1px",
+  2: "0px 3px 1px -2px",
+  3: "0px 3px 3px -2px",
+  4: "0px 2px 4px -1px",
+  5: "0px 3px 5px -1px",
+  6: "0px 3px 5px -1px",
+  7: "0px 4px 5px -2px",
+  8: "0px 5px 5px -3px",
+  9: "0px 5px 6px -3px",
+  10: "0px 6px 6px -3px",
+  11: "0px 6px 7px -4px",
+  12: "0px 7px 8px -4px",
+  13: "0px 7px 8px -4px",
+  14: "0px 7px 9px -4px",
+  15: "0px 8px 9px -5px",
+  16: "0px 8px 10px -5px",
+  17: "0px 8px 11px -5px",
+  18: "0px 9px 11px -5px",
+  19: "0px 9px 12px -6px",
+  20: "0px 10px 13px -6px",
+  21: "0px 10px 13px -6px",
+  22: "0px 10px 14px -6px",
+  23: "0px 11px 14px -7px",
+  24: "0px 11px 15px -7px"
+};
+const PENUMBRA_MAP = {
+  0: "0px 0px 0px 0px",
+  1: "0px 1px 1px 0px",
+  2: "0px 2px 2px 0px",
+  3: "0px 3px 4px 0px",
+  4: "0px 4px 5px 0px",
+  5: "0px 5px 8px 0px",
+  6: "0px 6px 10px 0px",
+  7: "0px 7px 10px 1px",
+  8: "0px 8px 10px 1px",
+  9: "0px 9px 12px 1px",
+  10: "0px 10px 14px 1px",
+  11: "0px 11px 15px 1px",
+  12: "0px 12px 17px 2px",
+  13: "0px 13px 19px 2px",
+  14: "0px 14px 21px 2px",
+  15: "0px 15px 22px 2px",
+  16: "0px 16px 24px 2px",
+  17: "0px 17px 26px 2px",
+  18: "0px 18px 28px 2px",
+  19: "0px 19px 29px 2px",
+  20: "0px 20px 31px 3px",
+  21: "0px 21px 33px 3px",
+  22: "0px 22px 35px 3px",
+  23: "0px 23px 36px 3px",
+  24: "0px 24px 38px 3px"
+};
+const AMBIENT_MAP = {
+  0: "0px 0px 0px 0px",
+  1: "0px 1px 3px 0px",
+  2: "0px 1px 5px 0px",
+  3: "0px 1px 8px 0px",
+  4: "0px 1px 10px 0px",
+  5: "0px 1px 14px 0px",
+  6: "0px 1px 18px 0px",
+  7: "0px 2px 16px 1px",
+  8: "0px 3px 14px 2px",
+  9: "0px 3px 16px 2px",
+  10: "0px 4px 18px 3px",
+  11: "0px 4px 20px 3px",
+  12: "0px 5px 22px 4px",
+  13: "0px 5px 24px 4px",
+  14: "0px 5px 26px 4px",
+  15: "0px 6px 28px 5px",
+  16: "0px 6px 30px 5px",
+  17: "0px 6px 32px 5px",
+  18: "0px 7px 34px 6px",
+  19: "0px 7px 36px 6px",
+  20: "0px 8px 38px 7px",
+  21: "0px 8px 40px 7px",
+  22: "0px 8px 42px 7px",
+  23: "0px 9px 44px 8px",
+  24: "0px 9px 46px 8px"
+};
+const depth = (depthValue, strength = "light") => {
+  return `box-shadow: ${UMBRA_MAP[depthValue]} ${UMBRA_COLOR(strength)},
+                      ${PENUMBRA_MAP[depthValue]} ${PENUMBRA_COLOR(strength)},
+                      ${AMBIENT_MAP[depthValue]} ${AMBIENT_COLOR(strength)};`;
+};
+const PreventScroll = () => {
+  return /* @__PURE__ */ jsx(Global, {
+    styles: css`
+        body {
+          overflow: hidden;
+        }
+      `
+  });
+};
+export { Button, PreventScroll, Spinner, binamikCssReset, binamikGlobalStyles, binamikTheme, depth };

package/dist/binamik-components.umd.js

@@ -0,0 +1,391 @@
+(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("@emotion/react"),require("@emotion/styled"),require("react")):typeof define=="function"&&define.amd?define(["exports","@emotion/react","@emotion/styled","react"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.BinamikCompoents={},e["emotion-react"],e.styled,e.React))})(this,function(e,t,a,x){"use strict";var nr=Object.defineProperty,ar=Object.defineProperties;var ir=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var F=(e,t,a)=>t in e?nr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,O=(e,t)=>{for(var a in t||(t={}))E.call(t,a)&&F(e,a,t[a]);if(b)for(var a of b(t))A.call(t,a)&&F(e,a,t[a]);return e},j=(e,t)=>ar(e,ir(t));var B=(e,t)=>{var a={};for(var x in e)E.call(e,x)&&t.indexOf(x)<0&&(a[x]=e[x]);if(e!=null&&b)for(var x of b(e))t.indexOf(x)<0&&A.call(e,x)&&(a[x]=e[x]);return a};function m(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var d=m(a),C=m(x);const D=t.keyframes`
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+`,S=t.keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`,$=d.default.div`
+  position: relative;
+  margin: 0 auto;
+  width: ${({size:r})=>r||"1.5rem"};
+
+  &:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+`,P=d.default.svg`
+  animation: ${S} 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+`,q=d.default.circle`
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  animation: ${D} 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+`;var g={exports:{}},u={};/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/var y=Object.getOwnPropertySymbols,R=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;function N(r){if(r==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(r)}function T(){try{if(!Object.assign)return!1;var r=new String("abc");if(r[5]="de",Object.getOwnPropertyNames(r)[0]==="5")return!1;for(var p={},o=0;o<10;o++)p["_"+String.fromCharCode(o)]=o;var n=Object.getOwnPropertyNames(p).map(function(l){return p[l]});if(n.join("")!=="0123456789")return!1;var i={};return"abcdefghijklmnopqrst".split("").forEach(function(l){i[l]=l}),Object.keys(Object.assign({},i)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}T();/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var z=C.default,h=60103;if(u.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var v=Symbol.for;h=v("react.element"),u.Fragment=v("react.fragment")}var I=z.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,L=Object.prototype.hasOwnProperty,U={key:!0,ref:!0,__self:!0,__source:!0};function k(r,p,o){var n,i={},l=null,s=null;o!==void 0&&(l=""+o),p.key!==void 0&&(l=""+p.key),p.ref!==void 0&&(s=p.ref);for(n in p)L.call(p,n)&&!U.hasOwnProperty(n)&&(i[n]=p[n]);if(r&&r.defaultProps)for(n in p=r.defaultProps,p)i[n]===void 0&&(i[n]=p[n]);return{$$typeof:h,type:r,key:l,ref:s,props:i,_owner:I.current}}u.jsx=k,u.jsxs=k,g.exports=u;const c=g.exports.jsx,G=g.exports.jsxs,w=({size:r,color:p,thickness:o})=>c($,{size:r,children:c(P,{viewBox:"25 25 50 50",children:c(q,{className:"path",cx:"50",cy:"50",r:"20",fill:"none",stroke:p||"currentColor",opacity:"0.5",strokeWidth:o||5,strokeMiterlimit:"10"})})}),H=t.keyframes`
+  100% {
+    opacity: 0.5;
+  }
+`,W=d.default.button`
+  --button-hover-brightness: 0.88;
+
+  position: relative;
+  padding: ${({isLoading:r,hasLoadingText:p})=>r&&p?"0.75em 1.125em 0.75em 2.5em":"0.75em 1.25em"};
+  border-radius: 30px;
+  border: 0;
+
+  font-size: 1rem;
+  font-weight: 700;
+  background-color: var(--clr-primary);
+  color: var(--clr-white);
+
+  transition: all 250ms;
+
+  cursor: pointer;
+
+  .button__text_wrapper {
+    animation: ${({isLoading:r})=>r?H:"none"} 0.75s infinite
+      alternate;
+  }
+
+  span svg {
+    width: 3.25em;
+    height: 3.25em;
+  }
+
+  &.button__outline {
+    border: 1px solid var(--clr-primary);
+    background-color: transparent;
+    color: var(--clr-primary);
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 30px;
+      transition: opacity 250ms;
+      box-shadow: 0 0 10px 1px var(--clr-primary);
+      opacity: 0;
+    }
+  }
+
+  &:hover {
+    filter: brightness(var(--button-hover-brightness));
+
+    &.button__outline::after {
+      opacity: 0.25;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.7;
+    filter: saturate(0.7);
+    cursor: default;
+    --button-hover-brightness: 1;
+  }
+
+  &:before {
+    content: '';
+    display: block;
+
+    width: ${({isLoading:r,hasLoadingText:p})=>r&&p?"2em":"0"};
+  }
+
+  .button__spinner_wrapper {
+    margin: -0.5em 0;
+    display: ${({isLoading:r})=>r?"block":"none"};
+    ${({hasLoadingText:r})=>r&&t.css`
+        top: calc(50% + 0.5em);
+        transform: translateY(-50%);
+        position: absolute;
+        left: 0.5rem;
+      `}
+  }
+`,Y=f=>{var _=f,{disabled:r=!1,isLoading:p=!1,loadingText:o="",outlined:n=!1,className:i="",children:l}=_,s=B(_,["disabled","isLoading","loadingText","outlined","className","children"]);return G(W,j(O({disabled:r||p,isLoading:p,hasLoadingText:!!o,className:`${i} ${n?"button__outline":""}`,type:"button"},s),{children:[c("div",{className:"button__spinner_wrapper",children:c(w,{size:"1.5em"})}),c("span",{className:"button__text_wrapper",children:p?o||"":l})]}))},J=t.css`
+  :root {
+    --clr-white: #ffffff;
+    --clr-black: #000000;
+
+    --clr-white-overlay: rgba(255, 255, 255, 0.8);
+
+    --clr-gray1: #4D4D4D;
+    --clr-gray2: #666666;
+    --clr-gray3: #6A6A6A;
+    --clr-gray4: #959595;
+    --clr-gray5: #AAAAAA;
+    --clr-gray6: #BABABA;
+    --clr-gray7: #D6D6D6;
+    --clr-gray8: #E6E6E6;
+    --clr-gray9: #EAEAEA;
+    --clr-gray10: #EDEDED;
+    --clr-gray11: #F0F0F0;
+    --clr-gray12: #F4F4F4;
+    --clr-gray13: #F7F7F7;
+    --clr-gray14: #FAFAFA;
+    --clr-gray15: #FCFCFC;
+
+    --clr-blue1: #286C81;
+    --clr-blue2: #55A6AC;
+    --clr-blue3: #1ED6BB;
+    --clr-blue4: #007aff;
+    --clr-blue-grad1: linear-gradient(90deg, rgba(85,166,172,1) 0%, rgba(40,108,129,1) 100%);
+    --clr-blue-grad2: linear-gradient(46deg, #0096A2 0%, #1ED6BB 100%);
+    --clr-blue-grad3: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 100%);
+
+    --clr-green1: #188955;
+    --clr-green2: #10bd6d;
+    --clr-green3: #38B54B;
+    --clr-green4: #F4FAFA;
+    --clr-green5: #E2F4EC;
+    --clr-green6: #218430;
+    --clr-green7: #2aa747;
+    --clr-green-grad1: linear-gradient(90deg, rgba(16,189,109,1) 0%, rgba(24,137,85,1) 100%);
+
+    --clr-indigo1: #4D4DFF;
+    --clr-indigo1-t08: rgba(77, 77, 255, 0.05);
+    --clr-indigo2: #7E7EFC;
+    --clr-indigo3: #EDEDFF;
+    --clr-indigoGradient1: linear-gradient(90deg, rgba(126,126,252,1) 0%, rgba(77,77,255,1) 100%);
+
+    --clr-orange1: #FF8000;
+    --clr-orange2: #DD9E41;
+    --clr-orange3: #F6A742;
+    --clr-orange4: #FFC164;
+    --clr-orange5: #FAF2E7;
+    --clr-orange6: #CB901A;
+
+    --clr-red1: #E22521;
+    --clr-red2: #FF0000;
+    --clr-red3: #FF6461;
+    --clr-red4: #F64242;
+    --clr-red5: #F26D6D;
+    --clr-red6: #FBEBEB;
+    --clr-red-grad1: linear-gradient(90deg, rgb(246, 66, 66) 0%, rgb(242, 109, 109) 100%);
+
+    --clr-yellow1: #FDBB4E;
+    --clr-yellow2: #F8A520;
+    --clr-yellow3: #F2BB4E;
+
+    --clr-purple1: #7E7EFCFA;
+    --clr-purple2: #8080FC;
+
+    --clr-primary: var(--clr-indigo1);
+    --clr-primary-t08: var(--clr-indigo1-t08);
+    --clr-primary2: var(--clr-indigo2);
+    --clr-secondary: var(--clr-yellow1);
+
+    --clr-warning: var(--clr-orange4);
+    --clr-warning2: var(--clr-orange5);
+
+    --clr-success: var(--clr-green3);
+    --clr-success2: var(--clr-green5);
+
+    --clr-danger: var(--clr-red3);
+    --clr-danger2: var(--clr-red6);
+
+    --clr-info: var(--clr-gray5);
+    --clr-info2: var(--clr-gray14);
+
+    --clr-dark: var(--clr-gray2);
+    --clr-disabled: var(--clr-gray11);
+
+    --fs-2xs: 0.625rem; // 10px
+    --fs-xs: 0.75rem; // 12px
+    --fs-sm: 0.875rem; // 14px
+    --fs-md: 1rem; // 16px
+    --fs-lg: 1.125rem; // 18px
+    --fs-xl: 1.25rem; // 20px
+    --fs-2xl: 1.5rem; // 24px
+    --fs-3xl: 2rem; // 32px
+    --fs-4xl: 3rem; // 48px
+
+    --bp-tablet: 64rem; // 1024px
+  }
+`,K=t.css`
+  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
+  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
+  img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,
+  i, center, dl, dt, dd, menu, ol, ul, li, fieldset, form, label, legend, table,
+  caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
+  embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output,
+  ruby, section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article, aside, details, figcaption, figure, footer, header, hgroup, main,
+  menu, nav, section {
+    display: block;
+  }
+
+  menu, ol, ul {
+    list-style: none;
+  }
+
+  blockquote, q {
+    quotes: none;
+  }
+
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  // Custom values
+  *, :before, :after {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    box-sizing: border-box;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  @keyframes autofill {
+    0%,100% {
+      background: transparent;
+    }
+  }
+
+  @-webkit-keyframes autofill {
+    0%,100% {
+      background: transparent;
+    }
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    animation-delay: 9999999s;
+    -webkit-animation-delay: 9999999s; /* 115 days without the anoying auto complete background */
+    animation-name: autofill;
+    -webkit-animation-name: autofill;
+    animation-fill-mode: both;
+    -webkit-animation-fill-mode: both;
+    background-clip: text;
+    -webkit-background-clip: text;
+  }
+`,Q=t.css`
+  body {
+    line-height: 1;
+    color: #444;
+    position: relative;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  body, input, textarea, select, textarea, button {
+    font-family: "Mulish", sans-serif;
+    font-size: inherit;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+  }
+
+  h1 { font-size: var(--fs-3xl); }
+  h2 { font-size: var(--fs-2xl); }
+  h3 { font-size: var(--fs-xl);  }
+  h4 { font-size: var(--fs-l);   }
+
+  img {
+    position: relative;
+  }
+
+  img[alt]:after {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #D6D6D6;
+    content: '';
+  }
+
+
+  *:focus-visible {
+    outline: 2px solid #007aff;
+    outline-offset: 1px;
+    border-radius: 2px;
+  }
+
+  .noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+  }
+
+  .primary_color_txt {
+    color: var(--clr-primary);
+  }
+`,X=(r="normal")=>r==="light"?"rgba(0, 0, 0, 0.05)":r==="normal"?"rgba(0, 0, 0, 0.1)":"rgba(0, 0, 0, 0.2)",Z=(r="normal")=>r==="light"?"rgba(0, 0, 0, 0.03)":r==="normal"?"rgba(0, 0, 0, 0.07)":"rgba(0, 0, 0, 0.14)",V=(r="normal")=>r==="light"?"rgba(0, 0, 0, 0.02)":r==="normal"?"rgba(0, 0, 0, 0.06)":"rgba(0, 0, 0, 0.12)",rr={0:"0px 0px 0px 0px",1:"0px 2px 1px -1px",2:"0px 3px 1px -2px",3:"0px 3px 3px -2px",4:"0px 2px 4px -1px",5:"0px 3px 5px -1px",6:"0px 3px 5px -1px",7:"0px 4px 5px -2px",8:"0px 5px 5px -3px",9:"0px 5px 6px -3px",10:"0px 6px 6px -3px",11:"0px 6px 7px -4px",12:"0px 7px 8px -4px",13:"0px 7px 8px -4px",14:"0px 7px 9px -4px",15:"0px 8px 9px -5px",16:"0px 8px 10px -5px",17:"0px 8px 11px -5px",18:"0px 9px 11px -5px",19:"0px 9px 12px -6px",20:"0px 10px 13px -6px",21:"0px 10px 13px -6px",22:"0px 10px 14px -6px",23:"0px 11px 14px -7px",24:"0px 11px 15px -7px"},er={0:"0px 0px 0px 0px",1:"0px 1px 1px 0px",2:"0px 2px 2px 0px",3:"0px 3px 4px 0px",4:"0px 4px 5px 0px",5:"0px 5px 8px 0px",6:"0px 6px 10px 0px",7:"0px 7px 10px 1px",8:"0px 8px 10px 1px",9:"0px 9px 12px 1px",10:"0px 10px 14px 1px",11:"0px 11px 15px 1px",12:"0px 12px 17px 2px",13:"0px 13px 19px 2px",14:"0px 14px 21px 2px",15:"0px 15px 22px 2px",16:"0px 16px 24px 2px",17:"0px 17px 26px 2px",18:"0px 18px 28px 2px",19:"0px 19px 29px 2px",20:"0px 20px 31px 3px",21:"0px 21px 33px 3px",22:"0px 22px 35px 3px",23:"0px 23px 36px 3px",24:"0px 24px 38px 3px"},tr={0:"0px 0px 0px 0px",1:"0px 1px 3px 0px",2:"0px 1px 5px 0px",3:"0px 1px 8px 0px",4:"0px 1px 10px 0px",5:"0px 1px 14px 0px",6:"0px 1px 18px 0px",7:"0px 2px 16px 1px",8:"0px 3px 14px 2px",9:"0px 3px 16px 2px",10:"0px 4px 18px 3px",11:"0px 4px 20px 3px",12:"0px 5px 22px 4px",13:"0px 5px 24px 4px",14:"0px 5px 26px 4px",15:"0px 6px 28px 5px",16:"0px 6px 30px 5px",17:"0px 6px 32px 5px",18:"0px 7px 34px 6px",19:"0px 7px 36px 6px",20:"0px 8px 38px 7px",21:"0px 8px 40px 7px",22:"0px 8px 42px 7px",23:"0px 9px 44px 8px",24:"0px 9px 46px 8px"},pr=(r,p="light")=>`box-shadow: ${rr[r]} ${X(p)},
+                      ${er[r]} ${Z(p)},
+                      ${tr[r]} ${V(p)};`,or=()=>c(t.Global,{styles:t.css`
+        body {
+          overflow: hidden;
+        }
+      `});e.Button=Y,e.PreventScroll=or,e.Spinner=w,e.binamikCssReset=K,e.binamikGlobalStyles=Q,e.binamikTheme=J,e.depth=pr,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Buttons/';
+export * from './Styles';
+export * from './Assets';

package/dist/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@binamik/components",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:local": "tsc && vite build && node buildLocal.js prebuild && yarn pack && node buildLocal.js postbuild",
+    "preview": "vite preview",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "test": "jest",
+    "test:coverage": "jest --coverage"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@storybook/addon-actions": "^6.5.0-beta.5",
+    "@storybook/addon-essentials": "^6.5.0-beta.5",
+    "@storybook/addon-interactions": "^6.5.0-beta.5",
+    "@storybook/addon-links": "^6.5.0-beta.5",
+    "@storybook/builder-vite": "^0.1.33",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.0-beta.5",
+    "@storybook/testing-library": "^0.0.11",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@types/jest": "^28.1.1",
+    "@types/node": "^17.0.31",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "@vitejs/plugin-react": "^1.3.0",
+    "babel-jest": "^28.1.0",
+    "babel-loader": "^8.2.5",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.2.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "framer-motion": "^6.3.10",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "jest-mock": "^28.1.0",
+    "mutation-observer": "^1.0.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-icons": "^4.4.0",
+    "ts-jest": "^28.0.4",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.7",
+    "vite-plugin-dts": "^1.1.1"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.9.0",
+    "@emotion/styled": ">=11.8.1",
+    "framer-motion": ">=6.2.0",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2",
+    "react-icons": ">=4.3.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/binamik-components.umd.js",
+  "module": "./dist/binamik-components.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/binamik-components.es.js",
+      "require": "./dist/binamik-components.umd.js"
+    }
+  }
+}