@gyramais/gyra-design 0.1.19 → 0.1.21

package/dist/components/StatusTag/StatusTag.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./index.css";
+type StatusTagProps = {
+    id?: string;
+    className?: string;
+    color?: string;
+    title?: string;
+};
+declare const StatusTag: ({ id, className, color, title, }: StatusTagProps) => React.JSX.Element;
+export { StatusTag };

package/dist/components/StatusTag/index.d.ts

@@ -0,0 +1 @@
+export * from "./StatusTag";

package/dist/components/StatusTag/index.js

@@ -0,0 +1,7 @@
+"use client";import r,{useMemo as t}from"react";function e(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var n,o={exports:{}};
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/n=o,function(){var r={}.hasOwnProperty;function t(){for(var r="",t=0;t<arguments.length;t++){var n=arguments[t];n&&(r=o(r,e(n)))}return r}function e(e){if("string"==typeof e||"number"==typeof e)return e;if("object"!=typeof e)return"";if(Array.isArray(e))return t.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var n="";for(var a in e)r.call(e,a)&&e[a]&&(n=o(n,a));return n}function o(r,t){return t?r?r+" "+t:r+t:r}n.exports?(t.default=t,n.exports=t):window.classNames=t}();var a=e(o.exports),s=function(e){var n=e.id,o=e.className,s=e.color,u=e.title,i=t((function(){return!!s&&(!!["#FBBB3B","#FF6B6C","#74DA42"].includes(s.toUpperCase())||function(r){var t=r.replace("#","");return(299*parseInt(t.substr(0,2),16)+587*parseInt(t.substr(2,2),16)+114*parseInt(t.substr(4,2),16))/1e3<=128}(s))}),[s]);return r.createElement("div",{id:n,className:a("gyramais-status-tag",o),style:{color:i?"white":"black",backgroundColor:s}},null==u?void 0:u.toUpperCase())};export{s as StatusTag};
+//# sourceMappingURL=index.js.map

package/dist/components/StatusTag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/StatusTag/StatusTag.tsx","../../../src/theme.ts"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { useMemo } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport \"./index.css\";\r\n\r\nimport { isColorDark } from '../../theme'; \r\n\r\ntype StatusTagProps = {\r\n  id?: string;\r\n  className?: string;\r\n  color?: string;\r\n  title?: string;\r\n}\r\n\r\nconst StatusTag = ({\r\n  id,\r\n  className,\r\n  color,\r\n  title,\r\n}: StatusTagProps) => {\r\n  const colorIsDark = useMemo(() => {\r\n    if (!color) {\r\n      return false;\r\n    }\r\n\r\n    if (['#FBBB3B', '#FF6B6C', '#74DA42'].includes(color.toUpperCase())) {\r\n      return true;\r\n    }\r\n\r\n    return isColorDark(color);\r\n  }, [color]); \r\n\r\n  return (\r\n    <div\r\n      id={id}\r\n      className={classNames(\r\n        \"gyramais-status-tag\",\r\n        className,\r\n      )}\r\n      style={{\r\n        color: colorIsDark ? 'white' : 'black',\r\n        backgroundColor: color,\r\n      }}\r\n    >\r\n      {title?.toUpperCase()}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport { StatusTag };","interface Colors {\r\n  backgroundColor: string;\r\n  primaryButton: string;\r\n  secondaryButton: string;\r\n  linkButton: string;\r\n}\r\n\r\ninterface Images {\r\n  whiteLogoUrl: string;\r\n  darkLogoUrl: string;\r\n  iconUrl: string;\r\n}\r\n\r\nconst isColorDark = (hexColor: string) => {\r\n  const color = hexColor.replace('#', '');\r\n\r\n  const r = parseInt(color.substr(0, 2), 16);\r\n  const g = parseInt(color.substr(2, 2), 16);\r\n  const b = parseInt(color.substr(4, 2), 16);\r\n  \r\n  const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;\r\n  return (yiq <= 128);\r\n};\r\n\r\nconst getContrastYIQ = (hexColor: string) => (isColorDark(hexColor) ? '#ffffff' : '#2b2b2b');\r\n\r\nconst getTintedColor: (hexColor: string, v: number) => string = (hexColor, v) => {\r\n  if (hexColor.length > 6) {\r\n    hexColor= hexColor.substring(1, hexColor.length)\r\n  }\r\n\r\n  const rgb = parseInt(hexColor, 16); \r\n  \r\n  let r = Math.abs(((rgb >> 16) & 0xFF) + v);\r\n  if (r > 255) {\r\n    r = r - (r - 255);\r\n  }\r\n  \r\n  let g = Math.abs(((rgb >> 8) & 0xFF) + v);\r\n  if (g > 255) {\r\n    g = g - (g - 255);\r\n  }\r\n  \r\n  let b = Math.abs((rgb & 0xFF) + v);\r\n  if (b > 255) {\r\n    b = b - (b - 255);\r\n  }\r\n\r\n  const rString = (`${Number(r < 0 || isNaN(r)) ? 0 : ((r > 255) ? 255 : r).toString(16)}`).padStart(2, '0');\r\n  const gString = (`${Number(g < 0 || isNaN(g)) ? 0 : ((g > 255) ? 255 : g).toString(16)}`).padStart(2, '0'); \r\n  const bString = (`${Number(b < 0 || isNaN(b)) ? 0 : ((b > 255) ? 255 : b).toString(16)}`).padStart(2 ,'0'); \r\n  \r\n  return \"#\" + rString + gString + bString;\r\n} \r\n\r\nconst setTheme = ({ colors, images }: {\r\n  colors: Colors;\r\n  images: Images;\r\n}) => {\r\n  const {\r\n    backgroundColor,\r\n    primaryButton,\r\n    secondaryButton,\r\n    linkButton,\r\n  } = colors;\r\n\r\n  if (backgroundColor) {\r\n    document.documentElement.style.setProperty('--background-color', backgroundColor);\r\n    document.documentElement.style.setProperty('--background-text-color', getContrastYIQ(backgroundColor));\r\n  }\r\n\r\n  if (primaryButton) {\r\n    document.documentElement.style.setProperty('--primary-button-color', primaryButton);\r\n    document.documentElement.style.setProperty('--primary-button-text-color', getContrastYIQ(primaryButton));\r\n\r\n    document.documentElement.style.setProperty('--dark-button-color', `${primaryButton}66`);\r\n    document.documentElement.style.setProperty('--dark-button-text-color', getContrastYIQ(primaryButton));\r\n\r\n    const primaryButtonIsDark = isColorDark(primaryButton);\r\n    for (let x = 0; x < 5; x += 1) {\r\n      const variant = getTintedColor(primaryButton, ((x * 35) * (primaryButtonIsDark ? 1 : -1)));\r\n      \r\n      document.documentElement.style.setProperty(`--primary-button-color-${x}00`, variant);\r\n    }\r\n  }\r\n\r\n  if (secondaryButton) {\r\n    document.documentElement.style.setProperty('--secondary-button-color', secondaryButton);\r\n    document.documentElement.style.setProperty('--secondary-button-text-color', getContrastYIQ(secondaryButton));\r\n  }\r\n\r\n  if (linkButton) {\r\n    document.documentElement.style.setProperty('--link-button-color', linkButton);\r\n  }\r\n\r\n  const {\r\n    darkLogoUrl,\r\n    whiteLogoUrl,\r\n    iconUrl,\r\n  } = images;\r\n\r\n  if (darkLogoUrl) {\r\n    document.documentElement.style.setProperty('--dark-logo-url', `url(${darkLogoUrl})`);\r\n  }\r\n\r\n  if (whiteLogoUrl) {\r\n    document.documentElement.style.setProperty('--white-logo-url', `url(${whiteLogoUrl})`);\r\n  }\r\n\r\n  if (iconUrl) {\r\n    document.documentElement.style.setProperty('--icon-url', `url(${iconUrl})`);\r\n  }\r\n\r\n  if (backgroundColor && darkLogoUrl && whiteLogoUrl) {\r\n    const backgroundColorIsDark = isColorDark(backgroundColor);\r\n\r\n    document.documentElement.style.setProperty('--background-logo-url', `${backgroundColorIsDark ? `url(${whiteLogoUrl})` : `url(${darkLogoUrl})`}`)\r\n  }\r\n};\r\n\r\nexport {\r\n  isColorDark,\r\n}\r\n\r\nexport default {\r\n  setTheme,\r\n};"],"names":["hasOwn","hasOwnProperty","classNames","classes","i","arguments","length","arg","appendClass","parseValue","Array","isArray","apply","toString","Object","prototype","includes","key","call","value","newClass","module","exports","default","window","StatusTag","_a","id","className","color","title","colorIsDark","useMemo","toUpperCase","hexColor","replace","parseInt","substr","isColorDark","React","createElement","style","backgroundColor"],"mappings":";;;;;MAOC,WAGA,IAAIA,EAAS,CAAE,EAACC,eAEhB,SAASC,IAGR,IAFA,IAAIC,EAAU,GAELC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAC1C,IAAIG,EAAMF,UAAUD,GAChBG,IACHJ,EAAUK,EAAYL,EAASM,EAAWF,IAE3C,CAED,OAAOJ,CACP,CAED,SAASM,EAAYF,GACpB,GAAmB,iBAARA,GAAmC,iBAARA,EACrC,OAAOA,EAGR,GAAmB,iBAARA,EACV,MAAO,GAGR,GAAIG,MAAMC,QAAQJ,GACjB,OAAOL,EAAWU,MAAM,KAAML,GAG/B,GAAIA,EAAIM,WAAaC,OAAOC,UAAUF,WAAaN,EAAIM,SAASA,WAAWG,SAAS,iBACnF,OAAOT,EAAIM,WAGZ,IAAIV,EAAU,GAEd,IAAK,IAAIc,KAAOV,EACXP,EAAOkB,KAAKX,EAAKU,IAAQV,EAAIU,KAChCd,EAAUK,EAAYL,EAASc,IAIjC,OAAOd,CACP,CAED,SAASK,EAAaW,EAAOC,GAC5B,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQR,CAEoCE,EAAOC,SAC3CpB,EAAWqB,QAAUrB,EACrBmB,EAAAC,QAAiBpB,GAOjBsB,OAAOtB,WAAaA,CAEtB,CArEA,sBCMMuB,EAAY,SAACC,OACjBC,EAAED,EAAAC,GACFC,EAASF,EAAAE,UACTC,EAAKH,EAAAG,MACLC,EAAKJ,EAAAI,MAECC,EAAcC,GAAQ,WAC1B,QAAKH,MAID,CAAC,UAAW,UAAW,WAAWb,SAASa,EAAMI,gBCXrC,SAACC,GACnB,IAAML,EAAQK,EAASC,QAAQ,IAAK,IAOpC,OADkB,IAJRC,SAASP,EAAMQ,OAAO,EAAG,GAAI,IAIT,IAHpBD,SAASP,EAAMQ,OAAO,EAAG,GAAI,IAGG,IAFhCD,SAASP,EAAMQ,OAAO,EAAG,GAAI,KAEW,KACnC,GACjB,CDMWC,CAAYT,GACrB,GAAG,CAACA,IAEJ,OACEU,EACEC,cAAA,MAAA,CAAAb,GAAIA,EACJC,UAAW1B,EACT,sBACA0B,GAEFa,MAAO,CACLZ,MAAOE,EAAc,QAAU,QAC/BW,gBAAiBb,IAGlBC,aAAA,EAAAA,EAAOG,cAGd","x_google_ignoreList":[0]}

package/dist/index.css

@@ -551,9 +551,6 @@ video {
 .ml-auto {
   margin-left: auto;
 }
-.mr-4 {
-  margin-right: 1rem;
-}
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -614,12 +611,18 @@ video {
 .h-\[800px\] {
   height: 800px;
 }
+.h-\[var\(--radix-select-trigger-height\)\] {
+  height: var(--radix-select-trigger-height);
+}
 .h-full {
   height: 100%;
 }
 .h-px {
   height: 1px;
 }
+.max-h-96 {
+  max-height: 24rem;
+}
 .max-h-\[300px\] {
   max-height: 300px;
 }
@@ -665,12 +668,18 @@ video {
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
+.min-w-\[var\(--radix-select-trigger-width\)\] {
+  min-width: var(--radix-select-trigger-width);
+}
 .shrink-0 {
   flex-shrink: 0;
 }
 .cursor-default {
   cursor: default;
 }
+.cursor-pointer {
+  cursor: pointer;
+}
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -679,9 +688,15 @@ video {
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
+.justify-between {
+  justify-content: space-between;
+}
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -755,6 +770,10 @@ video {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
 .pl-8 {
   padding-left: 2rem;
 }
@@ -777,6 +796,10 @@ video {
 .text-\[24px\] {
   font-size: 24px;
 }
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -797,6 +820,10 @@ video {
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.text-\[\#3B3940\] {
+  --tw-text-opacity: 1;
+  color: rgb(59 57 64 / var(--tw-text-opacity));
+}
 .text-\[var\(--primary-button-color\)\] {
   color: var(--primary-button-color);
 }
@@ -806,6 +833,9 @@ video {
 .opacity-20 {
   opacity: 0.2;
 }
+.opacity-50 {
+  opacity: 0.5;
+}
 .opacity-60 {
   opacity: 0.6;
 }
@@ -912,6 +942,9 @@ video {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
   outline: none !important;  
 }
+*:focus {
+  box-shadow: none !important;
+}
 
 ::-webkit-scrollbar {
   height: 0.5rem;
@@ -1051,6 +1084,21 @@ h6 {
   }
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1090,6 +1138,26 @@ h6 {
   pointer-events: none;
 }
 
+.data-\[side\=bottom\]\:translate-y-1[data-side=bottom] {
+  --tw-translate-y: 0.25rem;
+  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));
+}
+
+.data-\[side\=left\]\:-translate-x-1[data-side=left] {
+  --tw-translate-x: -0.25rem;
+  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));
+}
+
+.data-\[side\=right\]\:translate-x-1[data-side=right] {
+  --tw-translate-x: 0.25rem;
+  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));
+}
+
+.data-\[side\=top\]\:-translate-y-1[data-side=top] {
+  --tw-translate-y: -0.25rem;
+  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));
+}
+
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
@@ -1150,6 +1218,13 @@ h6 {
 
 .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
   --tw-enter-translate-y: 0.5rem;
+}
+
+.\[\&\>span\]\:line-clamp-1>span {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 :root {
   --toastify-color-light: #fff;
@@ -2552,128 +2627,157 @@ h6 {
 
     cursor: pointer
 }
-.gyramais-filter .gyramais-filter-filters-container {
-
-    width: 360px
-}
-
 .gyramais-filter .gyramais-filter-button-container {
-
-    position: relative;
-
-    width: -moz-fit-content;
-
-    width: fit-content
+  position: relative;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
 .gyramais-filter .gyramais-filter-button {
-
-    border-radius: 24px !important;
-
-    border-color: var(--primary-button-color) !important;
-
-    padding-left: 0.5rem !important;
-
-    padding-right: 0.5rem !important;
-
-    padding-top: 0.25rem !important;
-
-    padding-bottom: 0.25rem !important;
-
-    font-size: 0.75rem !important;
-
-    line-height: 1rem !important;
-
-    font-weight: 500 !important
+  border-radius: 24px !important;
+  border-color: var(--primary-button-color) !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+  font-weight: 500 !important;
 }
 .gyramais-filter .gyramais-filter-button.gyramais-button-white {
-
-    color: var(--primary-button-color)
+  color: var(--primary-button-color);
 }
 
 .gyramais-filter .gyramais-button-icon-container {
-
-    margin-right: 0.25rem !important
+  margin-right: 0.25rem !important;
 }
 
 .gyramais-filter .gyramais-filter-button-icon {
-
-    font-size: 1rem !important;
-
-    line-height: 1.5rem !important
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
 }
 
 .gyramais-filter .gyramais-filter-filters-count {
-
-    position: absolute;
-
-    right: -4px;
-
-    top: -4px;
-
-    z-index: 10;
-
-    display: flex;
-
-    height: 1rem;
-
-    min-height: 16px;
-
-    width: 1rem;
-
-    min-width: 16px;
-
-    cursor: default;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-radius: 9999px;
-
-    background-color: var(--primary-button-color);
-
-    font-size: 10px;
-
-    color: var(--primary-button-text-color)
+  position: absolute;
+  right: -4px;
+  top: -4px;
+  z-index: 10;
+  display: flex;
+  height: 1rem;
+  min-height: 16px;
+  width: 1rem;
+  min-width: 16px;
+  cursor: default;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: var(--primary-button-color);
+  font-size: 10px;
+  color: var(--primary-button-text-color);
 }
 
-.gyramais-filter .gyramais-filter-label {
-
-    font-weight: 600;
-
-    line-height: 1.25rem;
-
-    color: var(--primary-button-color)
+.gyramais-filter .gyramais-filter-filters-container {
+  margin-bottom: 1rem;
+  max-height: 300px;
+  width: 790px;
+  max-width: calc(100vw - 4rem);
+  overflow-y: auto;
 }
 
-.gyramais-filter .gyramais-filter-switch-area {
-
-    display: flex;
 
-    justify-content: flex-end
+.gyramais-filter .gyramais-filter-container {
+  position: relative;
 }
 
-.gyramais-filter .gyramais-input {
-
-    min-height: -moz-fit-content !important;
-
-    min-height: fit-content !important;
-
-    border-radius: 16px !important;
-
-    padding-top: 0.75rem !important;
+.gyramais-filter .gyramais-filter-item-label {
+  position: absolute;
+  top: -10px;
+  left: 1.5rem;
+  z-index: 2;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  color: var(--primary-button-color);
+}
+.gyramais-filter .gyramais-filter-item-label::before {
+  position: absolute;
+  top: 50%;
+  left: 0px;
+  z-index: -1;
+  height: 2px;
+  width: 100%;
+  --tw-scale-x: 115%;
+  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));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-content: '';
+  content: var(--tw-content);
+}
 
-    padding-bottom: 0.75rem !important
+.gyramais-filter .gyramais-filter-item {
+  border-radius: 20px;
+  border-width: 1px;
+  border-color: var(--border-color);
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.gyramais-filter .gyramais-filter-item + .gyramais-filter-item {
+  margin-top: 0.5rem;
 }
 
-.gyramais-filter .gyramais-filter-filters-footer {
+.gyramais-filter .gyramais-filter-item .gyramais-filter-item-condition,
+.gyramais-filter .gyramais-filter-item .gyramais-filter-item-value {
+  animation: filter-entry .5s 1;
+}
 
-    display: flex;
+.gyramais-filter .gyramais-filter-item .gyramais-select {
+  min-height: 34px;
+  min-width: 0px;
+  border-radius: 10px;
+  --tw-border-opacity: 1;
+  border-color: rgb(237 240 238 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 240 238 / var(--tw-bg-opacity));
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
 
-    align-items: center;
+.gyramais-filter .gyramais-filter-item .gyramais-input {
+  min-height: 40px;
+  min-width: 0px;
+  border-radius: 10px;
+  --tw-border-opacity: 1;
+  border-color: rgb(237 240 238 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 240 238 / var(--tw-bg-opacity));
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.gyramais-filter .gyramais-filter-item .gyramais-input-placeholder {
+  left: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
 
-    justify-content: flex-end
+@keyframes filter-entry {
+  0% {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 #gyramais-form-message {
     color: var(--danger-color)
@@ -3594,6 +3698,78 @@ h6 {
 
   align-items: flex-end
 }
+.gyramais-select {
+    min-height: 40px;
+    width: 100%;
+    min-width: 230px;
+    border-radius: 16px;
+    border-width: 1px;
+    border-color: var(--border-color);
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 400;
+    transition-duration: 300ms;
+    animation-duration: 300ms
+}
+@media (min-width: 768px) {
+    .gyramais-select {
+        min-height: 58px;
+        border-radius: 20px;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        font-size: 1rem;
+        line-height: 1.5rem
+    }
+}
+.gyramais-select:hover:not(:disabled) {
+    border-color: var(--primary-button-color);
+    --tw-shadow: inset 0 0 0 1px var(--primary-button-color);
+    --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+.gyramais-select span {
+    text-align: left
+}
+
+.gyramais-select svg {
+    color: var(--primary-button-color);
+    opacity: 1
+}
+
+.gyramais-select-content {
+    margin-left: 0.5rem;
+    border-radius: 16px;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    transition-duration: 300ms;
+    animation-duration: 300ms
+}
+
+.gyramais-select-content .gyramais-select-item {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    transition-duration: 300ms;
+    animation-duration: 300ms
+}
+
+.gyramais-select-content .gyramais-select-item:hover {
+    background-color: var(--dark-button-color)
+}
+.gyramais-select-content .gyramais-select-item:first-child {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px
+}
+.gyramais-select-content .gyramais-select-item:last-child {
+    border-bottom-right-radius: 16px;
+    border-bottom-left-radius: 16px
+}
 .gyramais-switch {
     position: relative;
     height: 25px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gyramais/gyra-design",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Gyramais Design System",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -35,6 +35,7 @@
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",