oneslash-design-system 1.4.0 → 1.6.0

package/dist/output.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
 
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
@@ -506,35 +506,58 @@ video {
   scrollbar-color: initial;
   scrollbar-width: initial;
 }
+.\!container{
+  width: 100% !important;
+}
 .container{
   width: 100%;
 }
 @media (min-width: 640px){
 
+  .\!container{
+    max-width: 640px !important;
+  }
+
   .container{
     max-width: 640px;
   }
 }
 @media (min-width: 768px){
 
+  .\!container{
+    max-width: 768px !important;
+  }
+
   .container{
     max-width: 768px;
   }
 }
 @media (min-width: 1024px){
 
+  .\!container{
+    max-width: 1024px !important;
+  }
+
   .container{
     max-width: 1024px;
   }
 }
 @media (min-width: 1280px){
 
+  .\!container{
+    max-width: 1280px !important;
+  }
+
   .container{
     max-width: 1280px;
   }
 }
 @media (min-width: 1536px){
 
+  .\!container{
+    max-width: 1536px !important;
+  }
+
   .container{
     max-width: 1536px;
   }
@@ -545,6 +568,9 @@ video {
 .pointer-events-auto{
   pointer-events: auto;
 }
+.\!visible{
+  visibility: visible !important;
+}
 .visible{
   visibility: visible;
 }
@@ -609,6 +635,10 @@ video {
 .hidden{
   display: none;
 }
+.size-4{
+  width: 1rem;
+  height: 1rem;
+}
 .size-5{
   width: 1.25rem;
   height: 1.25rem;
@@ -626,6 +656,9 @@ video {
 .h-3{
   height: 0.75rem;
 }
+.h-3\.5{
+  height: 0.875rem;
+}
 .h-4{
   height: 1rem;
 }
@@ -653,6 +686,9 @@ video {
 .w-3{
   width: 0.75rem;
 }
+.w-3\.5{
+  width: 0.875rem;
+}
 .w-4{
   width: 1rem;
 }
@@ -689,10 +725,28 @@ video {
 .flex-shrink-0{
   flex-shrink: 0;
 }
+.-translate-y-3{
+  --tw-translate-y: -0.75rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-0{
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-180{
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -714,6 +768,9 @@ video {
 .cursor-wait{
   cursor: wait;
 }
+.resize{
+  resize: both;
+}
 .flex-row{
   flex-direction: row;
 }
@@ -911,10 +968,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(242 196 196 / var(--tw-bg-opacity));
 }
-.bg-light-error-light{
-  --tw-bg-opacity: 1;
-  background-color: rgb(242 119 119 / var(--tw-bg-opacity));
-}
 .bg-light-error-main{
   --tw-bg-opacity: 1;
   background-color: rgb(211 47 47 / var(--tw-bg-opacity));
@@ -980,6 +1033,9 @@ video {
 .object-cover{
   object-fit: cover;
 }
+.p-0\.5{
+  padding: 0.125rem;
+}
 .p-1{
   padding: 0.25rem;
 }
@@ -992,6 +1048,14 @@ video {
 .p-\[10px\]{
   padding: 10px;
 }
+.px-1{
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.px-1\.5{
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .px-2{
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1004,6 +1068,14 @@ video {
   padding-left: 6px;
   padding-right: 6px;
 }
+.py-0{
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.py-0\.5{
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .py-1{
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1024,6 +1096,10 @@ video {
   padding-top: 3px;
   padding-bottom: 3px;
 }
+.py-px{
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
 .text-left{
   text-align: left;
 }
@@ -1045,6 +1121,9 @@ video {
 .text-h5{
   font-size: 24px;
 }
+.leading-\[16px\]{
+  line-height: 16px;
+}
 .leading-\[18px\]{
   line-height: 18px;
 }
@@ -1070,6 +1149,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.text-light-error-dark{
+  --tw-text-opacity: 1;
+  color: rgb(178 35 35 / var(--tw-text-opacity));
+}
 .text-light-error-main{
   --tw-text-opacity: 1;
   color: rgb(211 47 47 / var(--tw-text-opacity));
@@ -1182,6 +1265,16 @@ video {
 .filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition-\[opacity\2c transform\]{
+  transition-property: opacity,transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-\[transform\2c width\2c height\]{
+  transition-property: transform,width,height;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1192,11 +1285,6 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-opacity{
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
 .transition-transform{
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1205,12 +1293,15 @@ video {
 .duration-200{
   transition-duration: 200ms;
 }
+.duration-300{
+  transition-duration: 300ms;
+}
+.ease-\[cubic-bezier\(0\.16\2c 1\2c 0\.3\2c 1\)\]{
+  transition-timing-function: cubic-bezier(0.16,1,0.3,1);
+}
 .ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ease-out{
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
 .scrollbar::-webkit-scrollbar-track{
   background-color: var(--scrollbar-track);
   border-radius: var(--scrollbar-track-radius);
@@ -1281,6 +1372,10 @@ body {
   background-color: rgb(206 134 2 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-light-accent-dark\/75:hover{
+  background-color: rgb(206 134 2 / 0.75);
+}
+
 .hover\:bg-light-background-accent100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(241 241 241 / var(--tw-bg-opacity));
@@ -1291,17 +1386,21 @@ body {
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-light-background-accent200\/75:hover{
+  background-color: rgb(247 247 247 / 0.75);
+}
+
 .hover\:bg-light-error-dark:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(178 35 35 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-light-error-main\/10:hover{
-  background-color: rgb(211 47 47 / 0.1);
+.hover\:bg-light-error-light\/60:hover{
+  background-color: rgb(242 119 119 / 0.6);
 }
 
-.hover\:bg-light-error-main\/20:hover{
-  background-color: rgb(211 47 47 / 0.2);
+.hover\:bg-light-error-main\/10:hover{
+  background-color: rgb(211 47 47 / 0.1);
 }
 
 .hover\:bg-light-secondary-dark:hover{
@@ -1309,8 +1408,8 @@ body {
   background-color: rgb(136 136 136 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-opacity-75:hover{
-  --tw-bg-opacity: 0.75;
+.hover\:bg-light-secondary-dark\/75:hover{
+  background-color: rgb(136 136 136 / 0.75);
 }
 
 .hover\:text-light-error-dark:hover{
@@ -1333,6 +1432,13 @@ body {
   color: rgb(204 83 2 / var(--tw-text-opacity));
 }
 
+@media (prefers-reduced-motion: reduce){
+
+  .motion-reduce\:transition-none{
+    transition-property: none;
+  }
+}
+
 .dark\:border-dark-accent-main:is(.dark *){
   --tw-border-opacity: 1;
   border-color: rgb(255 205 41 / var(--tw-border-opacity));
@@ -1451,11 +1557,6 @@ body {
   background-color: rgb(92 26 26 / var(--tw-bg-opacity));
 }
 
-.dark\:bg-dark-error-light:is(.dark *){
-  --tw-bg-opacity: 1;
-  background-color: rgb(242 119 119 / var(--tw-bg-opacity));
-}
-
 .dark\:bg-dark-error-main:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(231 76 76 / var(--tw-bg-opacity));
@@ -1550,6 +1651,11 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark\:text-dark-error-light:is(.dark *){
+  --tw-text-opacity: 1;
+  color: rgb(242 119 119 / var(--tw-text-opacity));
+}
+
 .dark\:text-dark-error-main:is(.dark *){
   --tw-text-opacity: 1;
   color: rgb(231 76 76 / var(--tw-text-opacity));
@@ -1639,12 +1745,12 @@ body {
   background-color: rgb(69 69 69 / var(--tw-bg-opacity));
 }
 
-.dark\:hover\:bg-dark-error-main\/10:hover:is(.dark *){
-  background-color: rgb(231 76 76 / 0.1);
+.dark\:hover\:bg-dark-error-dark\/60:hover:is(.dark *){
+  background-color: rgb(178 35 35 / 0.6);
 }
 
-.dark\:hover\:bg-dark-error-main\/20:hover:is(.dark *){
-  background-color: rgb(231 76 76 / 0.2);
+.dark\:hover\:bg-dark-error-main\/10:hover:is(.dark *){
+  background-color: rgb(231 76 76 / 0.1);
 }
 
 .dark\:hover\:bg-dark-secondary-dark:hover:is(.dark *){
@@ -1657,6 +1763,10 @@ body {
   background-color: rgb(206 134 2 / var(--tw-bg-opacity));
 }
 
+.hover\:dark\:bg-dark-accent-dark\/75:is(.dark *):hover{
+  background-color: rgb(206 134 2 / 0.75);
+}
+
 .hover\:dark\:bg-dark-background-accent100:is(.dark *):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(51 51 51 / var(--tw-bg-opacity));
@@ -1667,14 +1777,17 @@ body {
   background-color: rgb(69 69 69 / var(--tw-bg-opacity));
 }
 
+.hover\:dark\:bg-dark-background-accent200\/75:is(.dark *):hover{
+  background-color: rgb(69 69 69 / 0.75);
+}
+
 .hover\:dark\:bg-dark-error-dark:is(.dark *):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(178 35 35 / var(--tw-bg-opacity));
 }
 
-.hover\:dark\:bg-dark-secondary-dark:is(.dark *):hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(69 69 69 / var(--tw-bg-opacity));
+.hover\:dark\:bg-dark-secondary-dark\/75:is(.dark *):hover{
+  background-color: rgb(69 69 69 / 0.75);
 }
 
 .hover\:dark\:text-dark-error-dark:is(.dark *):hover{

package/dist/stories/Button.stories.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Button from "../components/button";
 var meta = {
     title: "Components/Button",
@@ -5,7 +6,7 @@ var meta = {
     argTypes: {
         size: {
             control: "select",
-            options: ["small", "medium", "large"],
+            options: ["tiny", "small", "medium", "large"],
         },
         type: {
             control: "select",

package/dist/stories/Icon.stories.jsx

@@ -10,7 +10,7 @@ var meta = {
         },
         size: {
             control: "select",
-            options: ["small", "medium", "large"],
+            options: ["tiny", "small", "medium", "large"],
         },
         color: {
             control: "select",

package/dist/stories/IconButton.stories.jsx

@@ -14,7 +14,7 @@ var meta = {
         },
         size: {
             control: "select",
-            options: ["large", "medium", "small"],
+            options: ["large", "medium", "small", "tiny"],
         },
         iconName: { control: "text" },
         loading: { control: "boolean" },
@@ -80,6 +80,7 @@ export var Loading = {
 };
 export var AllSizes = {
     render: function () { return (<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <IconButton color="primary" state="enabled" size="tiny" iconName="Star"/>
       <IconButton color="primary" state="enabled" size="small" iconName="Star"/>
       <IconButton color="primary" state="enabled" size="medium" iconName="Star"/>
       <IconButton color="primary" state="enabled" size="large" iconName="Star"/>

package/dist/stories/MenuItem.stories.jsx

@@ -10,7 +10,7 @@ var meta = {
         isSelected: { control: "boolean" },
         size: {
             control: "select",
-            options: ["medium", "large"],
+            options: ["tiny", "small", "medium"],
         },
         iconRight: { control: "text" },
     },

package/dist/stories/TabsContainer.stories.d.ts

@@ -8,3 +8,5 @@ export declare const TwoTabs: Story;
 export declare const ManyTabs: Story;
 export declare const WithIcons: Story;
 export declare const WithSecondLabel: Story;
+export declare const AllSizes: Story;
+export declare const Overflowing: Story;

package/dist/stories/TabsContainer.stories.jsx

@@ -7,10 +7,10 @@ var meta = {
 };
 export default meta;
 var TabsWrapper = function (_a) {
-    var tabs = _a.tabs;
+    var tabs = _a.tabs, size = _a.size;
     var _b = useState(0), selected = _b[0], setSelected = _b[1];
     return (<TabsContainer>
-      {tabs.map(function (tab, index) { return (<Tab key={tab} label={tab} isSelected={selected === index} onClickTab={function () { return setSelected(index); }}/>); })}
+      {tabs.map(function (tab, index) { return (<Tab key={tab} label={tab} size={size} isSelected={selected === index} onClickTab={function () { return setSelected(index); }}/>); })}
     </TabsContainer>);
 };
 export var Default = {
@@ -50,3 +50,15 @@ var TabsWithSecondLabelWrapper = function () {
 export var WithSecondLabel = {
     render: function () { return <TabsWithSecondLabelWrapper />; },
 };
+export var AllSizes = {
+    render: function () { return (<div style={{ display: "flex", flexDirection: "column", gap: "16px", alignItems: "flex-start" }}>
+      <TabsWrapper tabs={["Overview", "Analytics", "Reports"]} size="medium"/>
+      <TabsWrapper tabs={["Overview", "Analytics", "Reports"]} size="small"/>
+      <TabsWrapper tabs={["Overview", "Analytics", "Reports"]} size="tiny"/>
+    </div>); },
+};
+export var Overflowing = {
+    render: function () { return (<div style={{ width: "260px" }}>
+      <TabsWrapper tabs={["Overview", "Analytics", "Reports", "Settings", "Users", "Billing"]}/>
+    </div>); },
+};

package/dist/stories/Tag.stories.jsx

@@ -15,7 +15,7 @@ var meta = {
         },
         size: {
             control: "select",
-            options: ["medium", "small"],
+            options: ["medium", "small", "tiny"],
         },
         state: {
             control: "select",

package/dist/stories/TextField.stories.jsx

@@ -12,7 +12,7 @@ var meta = {
         maxRows: { control: "number" },
         size: {
             control: "select",
-            options: ["large", "medium", "small"],
+            options: ["large", "medium", "small", "tiny"],
         },
         type: {
             control: "select",

package/dist/stories/Textarea.stories.jsx

@@ -10,7 +10,7 @@ var meta = {
         maxRows: { control: "number" },
         size: {
             control: "select",
-            options: ["medium", "small"],
+            options: ["medium", "small", "tiny"],
         },
     },
 };