@roadtrip/components 2.27.0 → 2.29.0

package/dist/collection/components/icon/svg/work-order-wait-check-outline-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(10.32 3.645)"><path d="M30.3,56.71H3.52A3.524,3.524,0,0,1,0,53.19V11.195a3.524,3.524,0,0,1,3.52-3.52H6.06v2.5H3.52a1.02,1.02,0,0,0-1.02,1.02V53.19a1.021,1.021,0,0,0,1.02,1.02H30.3Z"/><path d="M43.36,31.939h-2.5V11.195a1.02,1.02,0,0,0-1.02-1.02H37.3v-2.5h2.54a3.524,3.524,0,0,1,3.52,3.52Z"/><path d="M34.28,13.85H9.08V9.195A4.66,4.66,0,0,1,13.735,4.54h2.291a5.791,5.791,0,0,1,11.308,0h2.291A4.66,4.66,0,0,1,34.28,9.195Zm-22.7-2.5h20.2V9.195A2.158,2.158,0,0,0,29.625,7.04H24.97V5.79a3.29,3.29,0,1,0-6.58,0V7.04H13.735A2.158,2.158,0,0,0,11.58,9.195Z"/><rect width="2.5" height="2.27" transform="translate(20.43 4.656)" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M20.789,36.342l-5.454-5.454L17.1,29.12l3.6,3.6,8.172-8.976,1.848,1.683Z" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M47.913,37.439h.978v-2.5H33.3v2.5h.976v6.033L39.1,47.325l-4.818,3.854V57.21H33.3v2.5h15.59v-2.5h-.978V51.179L43.1,47.325l4.817-3.854Zm-2.5,14.941v4.83H36.777V52.38L41.1,48.925Zm0-10.11L41.1,45.724,36.777,42.27V37.439h8.636Z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(10.32 3.645)"><path d="M30.3,56.71H3.52A3.524,3.524,0,0,1,0,53.19V11.195a3.524,3.524,0,0,1,3.52-3.52H6.06v2.5H3.52a1.02,1.02,0,0,0-1.02,1.02V53.19a1.021,1.021,0,0,0,1.02,1.02H30.3Z"/><path d="M43.36,31.939h-2.5V11.195a1.02,1.02,0,0,0-1.02-1.02H37.3v-2.5h2.54a3.524,3.524,0,0,1,3.52,3.52Z"/><path d="M34.28,13.85H9.08V9.195A4.66,4.66,0,0,1,13.735,4.54h2.291a5.791,5.791,0,0,1,11.308,0h2.291A4.66,4.66,0,0,1,34.28,9.195Zm-22.7-2.5h20.2V9.195A2.158,2.158,0,0,0,29.625,7.04H24.97V5.79a3.29,3.29,0,1,0-6.58,0V7.04H13.735A2.158,2.158,0,0,0,11.58,9.195Z"/><rect width="2.5" height="2.27" transform="translate(20.43 4.656)" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M20.789,36.342l-5.454-5.454L17.1,29.12l3.6,3.6,8.172-8.976,1.848,1.683Z" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M47.913,37.439h.978v-2.5H33.3v2.5h.976v6.033L39.1,47.325l-4.818,3.854V57.21H33.3v2.5h15.59v-2.5h-.978V51.179L43.1,47.325l4.817-3.854Zm-2.5,14.941v4.83H36.777V52.38L41.1,48.925Zm0-10.11L41.1,45.724,36.777,42.27V37.439h8.636Z"/></g></svg>

package/dist/collection/components/icon/svg/world-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(0 71.912)"><path d="M41.31-39.912c0,10.413-2.952,19.843-7.045,22.637a22.562,22.562,0,0,0,4.237-.839c3.265-4.626,5.308-12.679,5.308-21.8S41.767-57.084,38.5-61.71a22.578,22.578,0,0,0-4.237-.839C38.358-59.755,41.31-50.324,41.31-39.912Z" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M22.691-39.912c0-10.412,2.951-19.843,7.043-22.637a22.567,22.567,0,0,0-4.236.839c-3.265,4.626-5.307,12.679-5.307,21.8s2.042,17.172,5.307,21.8a22.567,22.567,0,0,0,4.236.839C25.642-20.069,22.691-29.5,22.691-39.912Z" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M53.408-47.606a22.45,22.45,0,0,0-1.079-2.5H11.671a22.638,22.638,0,0,0-1.079,2.5Z" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M10.592-32.219a22.556,22.556,0,0,0,1.079,2.5H52.329a22.369,22.369,0,0,0,1.079-2.5Z" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M32-14.662A25.278,25.278,0,0,1,6.75-39.912,25.278,25.278,0,0,1,32-65.162a25.278,25.278,0,0,1,25.25,25.25A25.278,25.278,0,0,1,32-14.662Zm0-48A22.776,22.776,0,0,0,9.25-39.912,22.776,22.776,0,0,0,32-17.162a22.775,22.775,0,0,0,22.75-22.75A22.776,22.776,0,0,0,32-62.662Z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(0 71.912)"><path d="M41.31-39.912c0,10.413-2.952,19.843-7.045,22.637a22.562,22.562,0,0,0,4.237-.839c3.265-4.626,5.308-12.679,5.308-21.8S41.767-57.084,38.5-61.71a22.578,22.578,0,0,0-4.237-.839C38.358-59.755,41.31-50.324,41.31-39.912Z" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M22.691-39.912c0-10.412,2.951-19.843,7.043-22.637a22.567,22.567,0,0,0-4.236.839c-3.265,4.626-5.307,12.679-5.307,21.8s2.042,17.172,5.307,21.8a22.567,22.567,0,0,0,4.236.839C25.642-20.069,22.691-29.5,22.691-39.912Z" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M53.408-47.606a22.45,22.45,0,0,0-1.079-2.5H11.671a22.638,22.638,0,0,0-1.079,2.5Z" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M10.592-32.219a22.556,22.556,0,0,0,1.079,2.5H52.329a22.369,22.369,0,0,0,1.079-2.5Z" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M32-14.662A25.278,25.278,0,0,1,6.75-39.912,25.278,25.278,0,0,1,32-65.162a25.278,25.278,0,0,1,25.25,25.25A25.278,25.278,0,0,1,32-14.662Zm0-48A22.776,22.776,0,0,0,9.25-39.912,22.776,22.776,0,0,0,32-17.162a22.775,22.775,0,0,0,22.75-22.75A22.776,22.776,0,0,0,32-62.662Z"/></g></svg>

package/dist/collection/components/icon/svg/wrench-hand-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(-1.246 0.378)"><path d="M25.754,26.821l1.7-1.7L25.689,23.35l-1.7,1.7c-2.25,2.25-1.589,5.817-.9,8.3a4.9,4.9,0,0,1-.683,4.506c-.663.663-2.062,2.01-2.064,2.011l1.734,1.8s1.423-1.37,2.1-2.045A7.317,7.317,0,0,0,25.5,32.686C24.676,29.734,24.76,27.815,25.754,26.821Z"/><path d="M55.446,32.266a4.4,4.4,0,0,0-2.152-2.581,4.047,4.047,0,0,0-.195-3.322A4.451,4.451,0,0,0,50.081,24a4.32,4.32,0,0,0-1.013-2.12,5.259,5.259,0,0,0-3.112-1.806A5.216,5.216,0,0,0,42.922,16.7,4.84,4.84,0,0,0,37.5,17.818L27.8,27.538l1.769,1.768,9.707-9.721a2.358,2.358,0,0,1,2.694-.578,2.7,2.7,0,0,1,1.6,1.83L41.4,23.006l1.768,1.768L45.4,22.54a2.692,2.692,0,0,1,1.762.951,1.639,1.639,0,0,1,.449,1.085L45.288,26.9l1.768,1.767,2.255-2.255a1.975,1.975,0,0,1,1.557,1.083,1.565,1.565,0,0,1-.316,1.923h0L49.18,30.788l1.767,1.768.837-.837a2.036,2.036,0,0,1,1.262,1.247,2.167,2.167,0,0,1-.738,2.1l-6.582,6.581a36.019,36.019,0,0,1-6.971,5,27.668,27.668,0,0,0-5.142,3.6c-.9.9-1.427,1.34-1.433,1.345l1.591,1.927c.025-.02.611-.5,1.61-1.5a26.261,26.261,0,0,1,4.662-3.224,37.872,37.872,0,0,0,7.45-5.378l6.582-6.581A4.633,4.633,0,0,0,55.446,32.266Z"/><path d="M19.554,42.465,32.887,55.8l-3.615,3.614L15.94,46.079l3.614-3.614m0-3.536L12.4,46.079,29.272,62.947l7.15-7.15L19.554,38.929Z" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M30.094,4.027A11.645,11.645,0,0,0,19.812.8,2.521,2.521,0,0,0,17.85,2.54a2.551,2.551,0,0,0,.628,2.577L22.823,9.53,19.087,13.2,14.74,8.854a2.557,2.557,0,0,0-2.577-.628,2.522,2.522,0,0,0-1.735,1.964A11.644,11.644,0,0,0,13.65,20.47a10.813,10.813,0,0,0,11.6,2.423l3.559,3.627,1.781-1.754L27.02,21.132a2.558,2.558,0,0,0-2.675-.589A8.22,8.22,0,0,1,15.418,18.7a8.869,8.869,0,0,1-2.444-8.08l4.346,4.346a2.552,2.552,0,0,0,3.6,0l3.67-3.67a2.551,2.551,0,0,0,0-3.6L20.253,3.265a9.152,9.152,0,0,1,8.073,2.529,8.22,8.22,0,0,1,1.84,8.928,2.56,2.56,0,0,0,.585,2.67L34.315,21l1.777-1.757-3.565-3.706A10.733,10.733,0,0,0,30.094,4.027Z"/><path d="M56.621,39.717l-2.793-2.745-1.752,1.783,2.785,2.737a2.642,2.642,0,1,1-3.744,3.728l-2.793-2.745-1.752,1.783,2.785,2.737a5.141,5.141,0,1,0,7.264-7.278Z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(-1.246 0.378)"><path d="M25.754,26.821l1.7-1.7L25.689,23.35l-1.7,1.7c-2.25,2.25-1.589,5.817-.9,8.3a4.9,4.9,0,0,1-.683,4.506c-.663.663-2.062,2.01-2.064,2.011l1.734,1.8s1.423-1.37,2.1-2.045A7.317,7.317,0,0,0,25.5,32.686C24.676,29.734,24.76,27.815,25.754,26.821Z"/><path d="M55.446,32.266a4.4,4.4,0,0,0-2.152-2.581,4.047,4.047,0,0,0-.195-3.322A4.451,4.451,0,0,0,50.081,24a4.32,4.32,0,0,0-1.013-2.12,5.259,5.259,0,0,0-3.112-1.806A5.216,5.216,0,0,0,42.922,16.7,4.84,4.84,0,0,0,37.5,17.818L27.8,27.538l1.769,1.768,9.707-9.721a2.358,2.358,0,0,1,2.694-.578,2.7,2.7,0,0,1,1.6,1.83L41.4,23.006l1.768,1.768L45.4,22.54a2.692,2.692,0,0,1,1.762.951,1.639,1.639,0,0,1,.449,1.085L45.288,26.9l1.768,1.767,2.255-2.255a1.975,1.975,0,0,1,1.557,1.083,1.565,1.565,0,0,1-.316,1.923h0L49.18,30.788l1.767,1.768.837-.837a2.036,2.036,0,0,1,1.262,1.247,2.167,2.167,0,0,1-.738,2.1l-6.582,6.581a36.019,36.019,0,0,1-6.971,5,27.668,27.668,0,0,0-5.142,3.6c-.9.9-1.427,1.34-1.433,1.345l1.591,1.927c.025-.02.611-.5,1.61-1.5a26.261,26.261,0,0,1,4.662-3.224,37.872,37.872,0,0,0,7.45-5.378l6.582-6.581A4.633,4.633,0,0,0,55.446,32.266Z"/><path d="M19.554,42.465,32.887,55.8l-3.615,3.614L15.94,46.079l3.614-3.614m0-3.536L12.4,46.079,29.272,62.947l7.15-7.15L19.554,38.929Z" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M30.094,4.027A11.645,11.645,0,0,0,19.812.8,2.521,2.521,0,0,0,17.85,2.54a2.551,2.551,0,0,0,.628,2.577L22.823,9.53,19.087,13.2,14.74,8.854a2.557,2.557,0,0,0-2.577-.628,2.522,2.522,0,0,0-1.735,1.964A11.644,11.644,0,0,0,13.65,20.47a10.813,10.813,0,0,0,11.6,2.423l3.559,3.627,1.781-1.754L27.02,21.132a2.558,2.558,0,0,0-2.675-.589A8.22,8.22,0,0,1,15.418,18.7a8.869,8.869,0,0,1-2.444-8.08l4.346,4.346a2.552,2.552,0,0,0,3.6,0l3.67-3.67a2.551,2.551,0,0,0,0-3.6L20.253,3.265a9.152,9.152,0,0,1,8.073,2.529,8.22,8.22,0,0,1,1.84,8.928,2.56,2.56,0,0,0,.585,2.67L34.315,21l1.777-1.757-3.565-3.706A10.733,10.733,0,0,0,30.094,4.027Z"/><path d="M56.621,39.717l-2.793-2.745-1.752,1.783,2.785,2.737a2.642,2.642,0,1,1-3.744,3.728l-2.793-2.745-1.752,1.783,2.785,2.737a5.141,5.141,0,1,0,7.264-7.278Z"/></g></svg>

package/dist/collection/components/icon/svg/wrench-hand-dual-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(-4.337 -74.628)"><path d="M21.845,101.826l1.7-1.7L21.78,98.356l-1.7,1.7c-2.25,2.25-1.589,5.817-.9,8.3a4.894,4.894,0,0,1-.683,4.506c-.663.663-2.062,2.011-2.064,2.012l1.734,1.8s1.423-1.371,2.1-2.045a7.318,7.318,0,0,0,1.323-6.945C20.767,104.739,20.851,102.82,21.845,101.826Z"/><path d="M51.537,107.271a4.394,4.394,0,0,0-2.152-2.58,4.047,4.047,0,0,0-.195-3.322A4.448,4.448,0,0,0,46.172,99a4.316,4.316,0,0,0-1.013-2.12,5.26,5.26,0,0,0-3.112-1.807A5.215,5.215,0,0,0,39.013,91.7a4.841,4.841,0,0,0-5.418,1.12l-9.708,9.721,1.769,1.767,9.707-9.72a2.356,2.356,0,0,1,2.694-.578,2.7,2.7,0,0,1,1.6,1.829l-2.17,2.17,1.768,1.767,2.234-2.234a2.694,2.694,0,0,1,1.762.952,1.639,1.639,0,0,1,.449,1.085l-2.321,2.32,1.768,1.768,2.255-2.255a1.971,1.971,0,0,1,1.557,1.083,1.565,1.565,0,0,1-.316,1.923h0l-1.372,1.373,1.767,1.767.837-.836a2.036,2.036,0,0,1,1.262,1.247,2.165,2.165,0,0,1-.738,2.1l-6.582,6.581a35.934,35.934,0,0,1-6.971,5,27.716,27.716,0,0,0-5.142,3.6c-.9.9-1.428,1.34-1.433,1.345l1.591,1.926c.025-.019.611-.5,1.61-1.5a26.208,26.208,0,0,1,4.662-3.224,37.872,37.872,0,0,0,7.45-5.378l6.582-6.581A4.635,4.635,0,0,0,51.537,107.271Z"/><path d="M15.645,117.47,28.978,130.8l-3.615,3.614L12.031,121.085l3.614-3.615m0-3.535L8.5,121.085l16.867,16.867,7.15-7.149L15.645,113.935Z" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M26.185,79.032A11.647,11.647,0,0,0,15.9,75.81a2.521,2.521,0,0,0-1.962,1.736,2.551,2.551,0,0,0,.628,2.577l4.345,4.412-3.736,3.67-4.347-4.346a2.559,2.559,0,0,0-2.577-.628,2.525,2.525,0,0,0-1.735,1.964A11.646,11.646,0,0,0,9.741,95.476a10.813,10.813,0,0,0,11.6,2.422l3.559,3.628,1.781-1.754-3.566-3.634a2.556,2.556,0,0,0-2.675-.589,8.222,8.222,0,0,1-8.927-1.841,8.869,8.869,0,0,1-2.444-8.08l4.346,4.346a2.552,2.552,0,0,0,3.6,0l3.67-3.67a2.552,2.552,0,0,0,0-3.6L16.344,78.27a9.152,9.152,0,0,1,8.073,2.53,8.219,8.219,0,0,1,1.84,8.927,2.558,2.558,0,0,0,.585,2.67l3.564,3.613,1.777-1.758-3.565-3.705A10.735,10.735,0,0,0,26.185,79.032Z"/><path d="M46.66,132.5a11.642,11.642,0,0,0,10.281,3.223,2.521,2.521,0,0,0,1.963-1.736,2.553,2.553,0,0,0-.629-2.578L53.93,127l3.737-3.67,4.346,4.346a2.556,2.556,0,0,0,2.577.628,2.522,2.522,0,0,0,1.736-1.964,11.641,11.641,0,0,0-3.223-10.28,10.812,10.812,0,0,0-11.6-2.423l-1.621-1.69L48.1,113.7l1.629,1.7a2.56,2.56,0,0,0,2.676.589,8.221,8.221,0,0,1,8.927,1.841,8.871,8.871,0,0,1,2.444,8.08l-4.347-4.346a2.551,2.551,0,0,0-3.6,0l-3.67,3.67a2.549,2.549,0,0,0,0,3.6l4.338,4.431a9.156,9.156,0,0,1-8.074-2.529,8.222,8.222,0,0,1-1.84-8.928,2.558,2.558,0,0,0-.584-2.67l-1.564-1.612-1.777,1.758,1.564,1.705A10.735,10.735,0,0,0,46.66,132.5Z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(-4.337 -74.628)"><path d="M21.845,101.826l1.7-1.7L21.78,98.356l-1.7,1.7c-2.25,2.25-1.589,5.817-.9,8.3a4.894,4.894,0,0,1-.683,4.506c-.663.663-2.062,2.011-2.064,2.012l1.734,1.8s1.423-1.371,2.1-2.045a7.318,7.318,0,0,0,1.323-6.945C20.767,104.739,20.851,102.82,21.845,101.826Z"/><path d="M51.537,107.271a4.394,4.394,0,0,0-2.152-2.58,4.047,4.047,0,0,0-.195-3.322A4.448,4.448,0,0,0,46.172,99a4.316,4.316,0,0,0-1.013-2.12,5.26,5.26,0,0,0-3.112-1.807A5.215,5.215,0,0,0,39.013,91.7a4.841,4.841,0,0,0-5.418,1.12l-9.708,9.721,1.769,1.767,9.707-9.72a2.356,2.356,0,0,1,2.694-.578,2.7,2.7,0,0,1,1.6,1.829l-2.17,2.17,1.768,1.767,2.234-2.234a2.694,2.694,0,0,1,1.762.952,1.639,1.639,0,0,1,.449,1.085l-2.321,2.32,1.768,1.768,2.255-2.255a1.971,1.971,0,0,1,1.557,1.083,1.565,1.565,0,0,1-.316,1.923h0l-1.372,1.373,1.767,1.767.837-.836a2.036,2.036,0,0,1,1.262,1.247,2.165,2.165,0,0,1-.738,2.1l-6.582,6.581a35.934,35.934,0,0,1-6.971,5,27.716,27.716,0,0,0-5.142,3.6c-.9.9-1.428,1.34-1.433,1.345l1.591,1.926c.025-.019.611-.5,1.61-1.5a26.208,26.208,0,0,1,4.662-3.224,37.872,37.872,0,0,0,7.45-5.378l6.582-6.581A4.635,4.635,0,0,0,51.537,107.271Z"/><path d="M15.645,117.47,28.978,130.8l-3.615,3.614L12.031,121.085l3.614-3.615m0-3.535L8.5,121.085l16.867,16.867,7.15-7.149L15.645,113.935Z" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M26.185,79.032A11.647,11.647,0,0,0,15.9,75.81a2.521,2.521,0,0,0-1.962,1.736,2.551,2.551,0,0,0,.628,2.577l4.345,4.412-3.736,3.67-4.347-4.346a2.559,2.559,0,0,0-2.577-.628,2.525,2.525,0,0,0-1.735,1.964A11.646,11.646,0,0,0,9.741,95.476a10.813,10.813,0,0,0,11.6,2.422l3.559,3.628,1.781-1.754-3.566-3.634a2.556,2.556,0,0,0-2.675-.589,8.222,8.222,0,0,1-8.927-1.841,8.869,8.869,0,0,1-2.444-8.08l4.346,4.346a2.552,2.552,0,0,0,3.6,0l3.67-3.67a2.552,2.552,0,0,0,0-3.6L16.344,78.27a9.152,9.152,0,0,1,8.073,2.53,8.219,8.219,0,0,1,1.84,8.927,2.558,2.558,0,0,0,.585,2.67l3.564,3.613,1.777-1.758-3.565-3.705A10.735,10.735,0,0,0,26.185,79.032Z"/><path d="M46.66,132.5a11.642,11.642,0,0,0,10.281,3.223,2.521,2.521,0,0,0,1.963-1.736,2.553,2.553,0,0,0-.629-2.578L53.93,127l3.737-3.67,4.346,4.346a2.556,2.556,0,0,0,2.577.628,2.522,2.522,0,0,0,1.736-1.964,11.641,11.641,0,0,0-3.223-10.28,10.812,10.812,0,0,0-11.6-2.423l-1.621-1.69L48.1,113.7l1.629,1.7a2.56,2.56,0,0,0,2.676.589,8.221,8.221,0,0,1,8.927,1.841,8.871,8.871,0,0,1,2.444,8.08l-4.347-4.346a2.551,2.551,0,0,0-3.6,0l-3.67,3.67a2.549,2.549,0,0,0,0,3.6l4.338,4.431a9.156,9.156,0,0,1-8.074-2.529,8.222,8.222,0,0,1-1.84-8.928,2.558,2.558,0,0,0-.584-2.67l-1.564-1.612-1.777,1.758,1.564,1.705A10.735,10.735,0,0,0,46.66,132.5Z"/></g></svg>

package/dist/collection/components/icon/svg/wrench-outline-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M9.874,60.2a6.076,6.076,0,0,1-4.3-10.373L34.239,21.167A13.283,13.283,0,0,1,49.475,4.051a2.462,2.462,0,0,1,1.26,4.155l-5.521,5.521,5.12,5.059,5.46-5.522a2.463,2.463,0,0,1,4.155,1.26,13.31,13.31,0,0,1-17.13,15.261L14.171,58.422A6.035,6.035,0,0,1,9.874,60.2ZM47,6.263a10.965,10.965,0,0,0-7.76,3.2A10.778,10.778,0,0,0,36.6,20.417a2.472,2.472,0,0,1-.589,2.517L7.346,51.6a3.574,3.574,0,0,0,0,5.057,3.658,3.658,0,0,0,5.057,0L41.066,27.993a2.467,2.467,0,0,1,2.517-.589A10.808,10.808,0,0,0,57.5,15.01L52.04,20.554a2.459,2.459,0,0,1-3.473,0l-5.121-5.121a2.459,2.459,0,0,1,0-3.472l5.523-5.523A11.062,11.062,0,0,0,47,6.263Z" transform="translate(0.202 0.203)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/><rect width="2.5" height="2.5" transform="translate(11.25 51.482) rotate(45)" fill="var(--accent-hover, rgb(236, 160, 0))" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M9.874,60.2a6.076,6.076,0,0,1-4.3-10.373L34.239,21.167A13.283,13.283,0,0,1,49.475,4.051a2.462,2.462,0,0,1,1.26,4.155l-5.521,5.521,5.12,5.059,5.46-5.522a2.463,2.463,0,0,1,4.155,1.26,13.31,13.31,0,0,1-17.13,15.261L14.171,58.422A6.035,6.035,0,0,1,9.874,60.2ZM47,6.263a10.965,10.965,0,0,0-7.76,3.2A10.778,10.778,0,0,0,36.6,20.417a2.472,2.472,0,0,1-.589,2.517L7.346,51.6a3.574,3.574,0,0,0,0,5.057,3.658,3.658,0,0,0,5.057,0L41.066,27.993a2.467,2.467,0,0,1,2.517-.589A10.808,10.808,0,0,0,57.5,15.01L52.04,20.554a2.459,2.459,0,0,1-3.473,0l-5.121-5.121a2.459,2.459,0,0,1,0-3.472l5.523-5.523A11.062,11.062,0,0,0,47,6.263Z" transform="translate(0.202 0.203)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/><rect width="2.5" height="2.5" transform="translate(11.25 51.482) rotate(45)" fill="var(--road-secondary-500, rgb(252, 183, 49))" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></svg>

package/dist/collection/components/icon/svg/wrench-tools-outline-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(-914.922 -748.1)"><path d="M953.127,788.6c-22.753-22.753-22.764-22.764-22.946-22.855l-3.817-1.285-4.607-6.911,2.611-2.611,6.911,4.607L932.5,763.2l.067.163c.092.183.1.194,22.856,22.946l1.767-1.767-22.412-22.412-1.4-4.187-9.329-6.22-5.51,5.51,6.221,9.329,4.186,1.4,22.412,22.412Z"/><rect width="2.5" height="2.5" transform="translate(924.323 801.3) rotate(-45)" fill="var(--accent-hover, rgb(236, 160, 0))"/><path d="M924.975,808.479a6.075,6.075,0,0,1-4.3-10.371l17.443-17.444,1.768,1.768-17.444,17.444a3.577,3.577,0,0,0,5.058,5.058l17.443-17.444,1.768,1.768L929.271,806.7A6.055,6.055,0,0,1,924.975,808.479Z"/><path d="M956.079,779.9l-1.767-1.768,1.854-1.855a2.47,2.47,0,0,1,2.518-.588,10.809,10.809,0,0,0,13.913-12.4l-5.456,5.543a2.516,2.516,0,0,1-3.475,0l-5.119-5.118a2.459,2.459,0,0,1,0-3.474l5.521-5.521a10.992,10.992,0,0,0-9.725,3.022A10.78,10.78,0,0,0,951.7,768.7a2.471,2.471,0,0,1-.589,2.518l-1.854,1.854-1.768-1.767,1.855-1.855a13.282,13.282,0,0,1,15.235-17.116,2.463,2.463,0,0,1,1.261,4.155l-5.522,5.522,5.121,5.057,5.46-5.52a2.463,2.463,0,0,1,4.155,1.26,13.309,13.309,0,0,1-17.13,15.26Z"/><path d="M970.225,808.481a5.045,5.045,0,0,1-3.591-1.487L956.169,796.53c-1.072-.009-3.536,0-3.537,0l-.812,0-.331-.741c-1.718-3.84-1.718-3.84-1.1-4.462l7.525-7.526c.6-.555.6-.556,4.593.821l.844.291,0,.893s0,2.462,0,3.537l10.463,10.465a5.078,5.078,0,0,1-3.59,8.668Zm-16.005-14.45c2.986,0,3.029.043,3.354.368L968.4,805.227a2.579,2.579,0,0,0,3.647-3.647l-10.827-10.827c-.349-.349-.373-.373-.368-4.053-.644-.221-1.263-.432-1.71-.584L952.76,792.5c.183.415.427.964.679,1.53Z" fill="var(--accent-hover, rgb(236, 160, 0))"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(-914.922 -748.1)"><path d="M953.127,788.6c-22.753-22.753-22.764-22.764-22.946-22.855l-3.817-1.285-4.607-6.911,2.611-2.611,6.911,4.607L932.5,763.2l.067.163c.092.183.1.194,22.856,22.946l1.767-1.767-22.412-22.412-1.4-4.187-9.329-6.22-5.51,5.51,6.221,9.329,4.186,1.4,22.412,22.412Z"/><rect width="2.5" height="2.5" transform="translate(924.323 801.3) rotate(-45)" fill="var(--road-secondary-500, rgb(252, 183, 49))"/><path d="M924.975,808.479a6.075,6.075,0,0,1-4.3-10.371l17.443-17.444,1.768,1.768-17.444,17.444a3.577,3.577,0,0,0,5.058,5.058l17.443-17.444,1.768,1.768L929.271,806.7A6.055,6.055,0,0,1,924.975,808.479Z"/><path d="M956.079,779.9l-1.767-1.768,1.854-1.855a2.47,2.47,0,0,1,2.518-.588,10.809,10.809,0,0,0,13.913-12.4l-5.456,5.543a2.516,2.516,0,0,1-3.475,0l-5.119-5.118a2.459,2.459,0,0,1,0-3.474l5.521-5.521a10.992,10.992,0,0,0-9.725,3.022A10.78,10.78,0,0,0,951.7,768.7a2.471,2.471,0,0,1-.589,2.518l-1.854,1.854-1.768-1.767,1.855-1.855a13.282,13.282,0,0,1,15.235-17.116,2.463,2.463,0,0,1,1.261,4.155l-5.522,5.522,5.121,5.057,5.46-5.52a2.463,2.463,0,0,1,4.155,1.26,13.309,13.309,0,0,1-17.13,15.26Z"/><path d="M970.225,808.481a5.045,5.045,0,0,1-3.591-1.487L956.169,796.53c-1.072-.009-3.536,0-3.537,0l-.812,0-.331-.741c-1.718-3.84-1.718-3.84-1.1-4.462l7.525-7.526c.6-.555.6-.556,4.593.821l.844.291,0,.893s0,2.462,0,3.537l10.463,10.465a5.078,5.078,0,0,1-3.59,8.668Zm-16.005-14.45c2.986,0,3.029.043,3.354.368L968.4,805.227a2.579,2.579,0,0,0,3.647-3.647l-10.827-10.827c-.349-.349-.373-.373-.368-4.053-.644-.221-1.263-.432-1.71-.584L952.76,792.5c.183.415.427.964.679,1.53Z" fill="var(--road-secondary-500, rgb(252, 183, 49))"/></g></svg>

package/dist/collection/components/icon/svg/zoom-in-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(8.167 7.702)"><path d="M40.6,12.74a19.181,19.181,0,1,0,0,27.124A19.118,19.118,0,0,0,40.6,12.74ZM38.339,37.6a15.984,15.984,0,1,1,0-22.6A15.872,15.872,0,0,1,38.339,37.6Z" transform="translate(-7.854 -7.121)"/><rect width="3.199" height="17.901" transform="translate(33.259 35.526) rotate(-45.032)"/><path d="M9967.832,2468.3v-8.355h-8.5v-3h8.5V2448.3h3v8.646h8.5v3h-8.5v8.355Z" transform="translate(-9949.795 -2439.262)" fill="var(--accent-hover, rgb(236, 160, 0))" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(8.167 7.702)"><path d="M40.6,12.74a19.181,19.181,0,1,0,0,27.124A19.118,19.118,0,0,0,40.6,12.74ZM38.339,37.6a15.984,15.984,0,1,1,0-22.6A15.872,15.872,0,0,1,38.339,37.6Z" transform="translate(-7.854 -7.121)"/><rect width="3.199" height="17.901" transform="translate(33.259 35.526) rotate(-45.032)"/><path d="M9967.832,2468.3v-8.355h-8.5v-3h8.5V2448.3h3v8.646h8.5v3h-8.5v8.355Z" transform="translate(-9949.795 -2439.262)" fill="var(--road-secondary-500, rgb(252, 183, 49))" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/></g></svg>

package/dist/collection/components/icon/svg/zoom-out-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(8.167 7.702)"><path d="M40.6,12.74a19.181,19.181,0,1,0,0,27.124A19.118,19.118,0,0,0,40.6,12.74ZM38.339,37.6a15.984,15.984,0,1,1,0-22.6A15.872,15.872,0,0,1,38.339,37.6Z" transform="translate(-7.854 -7.121)"/><rect width="3.199" height="17.901" transform="translate(33.259 35.526) rotate(-45.032)"/><rect width="20" height="3" transform="translate(9.183 17.681)" fill="var(--accent-hover, rgb(236, 160, 0))"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g transform="translate(8.167 7.702)"><path d="M40.6,12.74a19.181,19.181,0,1,0,0,27.124A19.118,19.118,0,0,0,40.6,12.74ZM38.339,37.6a15.984,15.984,0,1,1,0-22.6A15.872,15.872,0,0,1,38.339,37.6Z" transform="translate(-7.854 -7.121)"/><rect width="3.199" height="17.901" transform="translate(33.259 35.526) rotate(-45.032)"/><rect width="20" height="3" transform="translate(9.183 17.681)" fill="var(--road-secondary-500, rgb(252, 183, 49))"/></g></svg>

package/dist/collection/components/img/img.css

@@ -31,7 +31,7 @@
  -------------------- */
 
 :host(.placeholder) {
-  background: var(--background);
+  background: var(--road-grey-200);
 }
 
 :host(.placeholder) img {

package/dist/collection/components/input/input.css

@@ -5,7 +5,9 @@
  * - Input
  * - Textarea
  * - Label
+ * - Sizes
  * - Error
+ * - Helper
  */
 
 /**
@@ -25,8 +27,8 @@
   position: relative;
   display: block;
   margin-bottom: var(--margin-bottom);
-  font-family: var(--font, sans-serif);
-  color: var(--text);
+  font-family: var(--road-font, sans-serif);
+  color: var(--road-grey-900);
 }
 
 /* INPUT
@@ -40,10 +42,10 @@
   padding: 0.75rem 1rem 0;
   margin: 0;
   font-size: 1rem;
-  color: var(--text);
+  color: var(--road-grey-900);
   text-align: var(--input-text-align);
-  background: var(--white);
-  border: 1px solid var(--border-form);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-400);
   border-radius: var(--border-radius);
   box-shadow: none;
   -webkit-appearance: none;
@@ -82,10 +84,21 @@
  */
 
 .form-control::placeholder {
-  color: var(--text-second);
+  color: var(--road-grey-500);
   opacity: 1;
 }
 
+/**
+ * Hover state
+ */
+
+@media (hover: hover) {
+
+  .form-control:not(:disabled):hover {
+    border-color: var(--road-primary-700);
+  }
+}
+
 /**
  * Focus state
  */
@@ -111,8 +124,8 @@
 }
 /* stylelint-enable */
 
-.form-control:focus {
-  border-color: var(--secondary);
+.form-control:not(:disabled):focus {
+  border-color: var(--road-primary-700);
   outline: 0;
 }
 
@@ -122,9 +135,8 @@
 
 .form-control:disabled,
 .form-control[readonly] {
-  color: var(--text-disabled);
   cursor: not-allowed;
-  background: var(--background-second);
+  background: var(--road-grey-200);
   opacity: 1;
 }
 
@@ -138,7 +150,7 @@
   display: block;
   font-size: 1rem;
   line-height: 1.5;
-  color: var(--text-second);
+  color: var(--road-grey-500);
   pointer-events: none;
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
   transform-origin: 0 0;
@@ -152,6 +164,34 @@
   padding-top: 0;
 }
 
+/* SIZES
+ -------------------- */
+
+:host(.input-xl) {
+  --height: 3.5rem;
+}
+
+:host(.input-xl) .form-control {
+  padding: 1rem 1rem 0;
+}
+
+:host(.input-xl) .form-label {
+  top: 1rem;
+}
+
+:host(.input-xl) .form-control:focus ~ .form-label,
+:host(.input-xl) .form-control[required]:valid ~ .form-label,
+:host(.input-xl) .form-control.has-value ~ .form-label,
+:host(.input-xl) .form-control[type="date"] ~ .form-label,
+:host(.input-xl) .form-control[type="time"] ~ .form-label {
+  transform: scale(0.75) translateY(-0.625rem);
+}
+
+:host(.input-xl) .form-control:placeholder-shown ~ .form-label {
+  transform: scale(0.625) translateY(-0.625rem);
+}
+
+
 /* ERROR
  -------------------- */
 
@@ -160,15 +200,24 @@
   width: 100%;
   margin-top: 0.5rem;
   font-size: 0.75rem;
-  color: var(--danger);
+  color: var(--road-danger-text);
 }
 
 .form-control.is-invalid,
 .was-validated .form-control:invalid {
-  border-color: var(--danger);
+  border-color: var(--road-danger-default);
 }
 
 .form-control.is-invalid ~ .invalid-feedback,
 .was-validated .form-control:invalid ~ .invalid-feedback {
   display: block;
 }
+
+/* HELPER
+ -------------------- */
+
+.helper {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--road-grey-500);
+}

package/dist/collection/components/input/input.js

@@ -55,6 +55,10 @@ export class Input {
      * If `true`, the element will have its spelling and grammar checked.
      */
     this.spellcheck = false;
+    /**
+     * The sizes of the input.
+     */
+    this.sizes = 'lg';
     /**
      * The type of control to display. The default type is text.
      */
@@ -110,10 +114,11 @@ export class Input {
     const hasValueClass = this.value !== '' ? 'has-value' : '';
     const lessLabelClass = this.label !== '' ? '' : 'less-label';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null },
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` },
       h("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }),
       h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label),
-      this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error)));
+      this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error),
+      this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper)));
   }
   static get is() { return "road-input"; }
   static get encapsulation() { return "scoped"; }
@@ -479,6 +484,24 @@ export class Input {
       "attribute": "size",
       "reflect": false
     },
+    "sizes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'lg' | 'xl'",
+        "resolved": "\"lg\" | \"xl\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The sizes of the input."
+      },
+      "attribute": "sizes",
+      "reflect": false,
+      "defaultValue": "'lg'"
+    },
     "type": {
       "type": "string",
       "mutable": false,
@@ -555,6 +578,23 @@ export class Input {
       "attribute": "error",
       "reflect": false
     },
+    "helper": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Helper message for the field"
+      },
+      "attribute": "helper",
+      "reflect": false
+    },
     "debounce": {
       "type": "number",
       "mutable": false,

package/dist/collection/components/input/input.stories.js

@@ -28,6 +28,9 @@ export default {
     error: {
       control: 'text',
     },
+    helper: {
+      control: 'text',
+    },
     label: {
       control: 'text',
     },
@@ -59,7 +62,13 @@ export default {
       control: 'text',
     },
     value: {
-      control: 'number',
+      control: 'text',
+    },
+    sizes: {
+      options: ['lg', 'xl'],
+      control: {
+        type: 'select',
+      },
     },
     type: {
       options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'time'],
@@ -160,6 +169,7 @@ export default {
   },
   args: {
     label: 'Label',
+    sizes: 'xl',
     disabled: null,
     readonly: null,
     required: null,
@@ -176,7 +186,9 @@ const Template = (args) => html`
     required="${ifDefined(args.required)}"
     autofocus="${ifDefined(args.autofocus)}"
     error="${ifDefined(args.error)}"
+    helper="${ifDefined(args.helper)}"
     size="${ifDefined(args.size)}"
+    sizes="${ifDefined(args.sizes)}"
     min="${ifDefined(args.min)}" 
     max="${ifDefined(args.max)}" 
     maxlength="${ifDefined(args.maxlength)}"
@@ -224,3 +236,8 @@ export const Error = Template.bind({});
 Error.args = {
   error: 'This field is required',
 };
+
+export const Helper = Template.bind({});
+Helper.args = {
+  helper: 'This field is required',
+};

package/dist/collection/components/input-group/input-group.css

@@ -27,7 +27,7 @@
   flex-wrap: wrap;
   align-items: stretch;
   width: 100%;
-  font-family: var(--font, sans-serif);
+  font-family: var(--road-font, sans-serif);
 }
 
 ::slotted(road-input),
@@ -47,7 +47,7 @@
 
 ::slotted([slot="prepend"]) {
   margin-right: -3px;
-  border-color: var(--border-form);
+  border-color: var(--road-grey-400);
   border-right-color: transparent;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -55,21 +55,38 @@
 
 ::slotted([slot="append"]) {
   margin-left: -0.25rem;
-  border-color: var(--border-form);
+  border-color: var(--road-grey-400);
   border-left-width: 0;
 }
 
+/**
+ * Hover state
+ */
+
+@media (hover: hover) {
+
+  .input-group:not(.is-disabled):hover ::slotted([slot="prepend"]) {
+    border-color: var(--road-primary-700);
+    border-right-color: transparent;
+  }
+
+  .input-group:not(.is-disabled):hover ::slotted([slot="append"]) {
+    border-color: var(--road-primary-700);
+    border-left-color: transparent;
+  }
+}
+
 /**
  * Focus state
  */
 
 .input-group:focus-within ::slotted([slot="prepend"]) {
-  border-color: var(--secondary);
+  border-color: var(--road-primary-700);
   border-right-color: transparent;
 }
 
 .input-group:focus-within ::slotted([slot="append"]) {
-  border-color: var(--secondary);
+  border-color: var(--road-primary-700);
   border-left-color: transparent;
 }
 
@@ -105,7 +122,6 @@
 .input-group-append {
   position: relative;
   z-index: 1;
-  background: var(--white);
   border-radius: 0 0.25rem 0.25rem 0;
 }
 
@@ -117,12 +133,12 @@
   align-items: center;
   padding: 0 0.5rem;
   margin-bottom: 0;
-  color: var(--icon);
+  color: var(--road-grey-900);
   text-align: center;
   white-space: nowrap;
   cursor: text;
-  background: var(--white);
-  border: 1px solid var(--border-form);
+  background: var(--road-grey-000);
+  border: 1px solid var(--road-grey-400);
   border-radius: 0.25rem;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -151,12 +167,24 @@
   margin-right: calc(-1rem + 1px);
 }
 
+/* SIZES
+ -------------------- */
+
+.size-xl .input-group-prepend,
+.size-xl .input-group-append {
+  height: 3.5rem;
+}
+
+.size-xl ::slotted(road-button) {
+  height: 3.5rem;
+}
+
 /* ERROR
  -------------------- */
 
 .input-group.is-invalid ::slotted([slot="append"]),
 .input-group.is-invalid ::slotted([slot="prepend"]) {
-  border-color: var(--danger);
+  border-color: var(--road-danger-default);
 }
 
 /* DISABLED
@@ -164,9 +192,8 @@
 
 .input-group.is-disabled ::slotted([slot="append"]),
 .input-group.is-disabled ::slotted([slot="prepend"]) {
-  color: var(--text-disabled);
   cursor: not-allowed;
-  background: var(--background-second);
+  background: var(--road-grey-200);
 }
 
 .is-disabled ::slotted(road-button) {

package/dist/collection/components/input-group/input-group.js

@@ -14,10 +14,11 @@ export class InputGroup {
   render() {
     const errorClass = this.el.querySelector("road-input[error]") ? 'is-invalid' : '';
     const disabledClass = this.el.querySelector("road-input[disabled]") ? 'is-disabled' : '';
-    return (h("div", { class: `input-group ${errorClass} ${disabledClass}` },
+    const sizeClass = this.el.querySelector("road-input[sizes]") ? `size-${this.el.querySelector("road-input").sizes}` : '';
+    return (h("div", { class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` },
+      h("slot", null),
       h("div", { class: "input-group-prepend" },
         h("slot", { name: "prepend" })),
-      h("slot", null),
       h("div", { class: "input-group-append" },
         h("slot", { name: "append" }))));
   }

package/dist/collection/components/input-group/input-group.stories.js

@@ -27,7 +27,7 @@ const Template = (args) => html`
 
 export const Playground = Template.bind({});
 Playground.args = {
-  ' ': `<road-input input-id="cardNumber" label="Card Number"></road-input>`,
+  ' ': `<road-input input-id="cardNumber" sizes="xl" label="Card Number"></road-input>`,
   append: `<label slot="append" for="cardNumber">
     <road-icon name="payment-card"></road-icon>
   </label>`,
@@ -35,7 +35,7 @@ Playground.args = {
 
 export const Button = Template.bind({});
 Button.args = {
-  ' ': `<road-input input-id="newsletter" label="Newsletter"></road-input>`,
+  ' ': `<road-input input-id="newsletter" sizes="xl" label="Newsletter"></road-input>`,
   append: `<road-button slot="append" outline="true">
   OK
 </road-button>`,
@@ -43,7 +43,7 @@ Button.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  ' ': `<road-input input-id="inputGroupDisabled" label="Label" disabled></road-input>`,
+  ' ': `<road-input input-id="inputGroupDisabled" sizes="xl" label="Label" disabled="true"></road-input>`,
   append: `<road-button slot="append" outline="true">
   <road-icon color="secondary" name="alert-info-outline"></road-icon>
 </road-button>`,
@@ -51,7 +51,7 @@ Disabled.args = {
 
 export const Error = Template.bind({});
 Error.args = {
-  ' ': `<road-input input-id="inputGroupError" label="Label" error="error message here"></road-input>`,
+  ' ': `<road-input input-id="inputGroupError" sizes="xl" label="Label" error="error message here"></road-input>`,
   append: `<label slot="append" for="inputGroupError">
   <road-icon name="payment-card"></road-icon>
 </label>`,

package/dist/collection/components/item/item.css

@@ -22,7 +22,7 @@
 :host {
   --border-radius: 0.25rem;
   --background-color: transparent;
-  --detail-color: var(--icon);
+  --detail-color: var(--road-grey-900);
   --inner-padding: 1rem 0.5rem 1rem 0;
   --min-height: 3.5rem;
   --padding-left: 1rem;
@@ -54,9 +54,9 @@
   overflow: inherit;
   font-family: inherit;
   font-size: inherit;
-  color: var(--text);
+  color: var(--road-grey-900);
   background-color: var(--background-color);
-  border-color: var(--border);
+  border-color: var(--road-grey-300);
   border-style: solid;
   border-width: var(--border-width, 0);
   border-radius: var(--border-radius);
@@ -70,7 +70,7 @@
  */
 
 .item-active {
-  background-color: var(--background-second);
+  background-color: var(--road-grey-100);
 }
 
 /**
@@ -79,7 +79,7 @@
 
 button.item-native:not(:disabled):not(.item-active):hover,
 button.item-native:not(:disabled):not(.item-active):focus {
-  background-color: var(--background-second);
+  background-color: var(--road-grey-100);
 }
 
 /**
@@ -116,7 +116,7 @@ a {
   overflow: inherit;
   text-align: inherit;
   text-decoration: none;
-  border-color: var(--border);
+  border-color: var(--road-grey-300);
   border-style: solid;
   border-width: var(--inner-border-width, 0);
   outline: 0;

package/dist/collection/components/item/item.stories.js

@@ -115,7 +115,7 @@ Playground.argTypes = {
   },
   '--detail-color': {
     table: {
-      defaultValue: { summary: 'var(--icon)' },
+      defaultValue: { summary: 'var(--road-grey-900)' },
     },
     control: {
       type: null,
@@ -153,7 +153,7 @@ Playground.argTypes = {
 };
 
 export const Compatibility = () => html`
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-label>
     <p class="h8 my-4">OPEL Insignia</p>
     <p class="text-small text-truncate m-0">hatchback 2.0 CDTI 16V 130 cv</p>
@@ -162,7 +162,7 @@ export const Compatibility = () => html`
   <road-button slot="end" size="sm" color="secondary" class="mr-8">Modify</road-button>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="alert-valid-outline" color="success" class="mr-16"></road-icon>
 
   <road-label>
@@ -174,7 +174,7 @@ export const Compatibility = () => html`
   <road-button slot="end" size="sm" color="secondary" class="mr-8">Modify</road-button>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="alert-error-outline" color="danger" class="mr-16"></road-icon>
 
   <road-label>
@@ -189,7 +189,7 @@ export const Compatibility = () => html`
 `;
 
 export const ShoppingGuides = () => html`
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="vehicle-car-outline" class="mr-16"></road-icon>
 
   <road-label>
@@ -200,7 +200,7 @@ export const ShoppingGuides = () => html`
   <road-icon slot="end" name="edit" color="secondary" size="sm" class="mr-8"></road-icon>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="vehicle-car-outline-front" class="mr-16"></road-icon>
 
   <road-label>
@@ -211,7 +211,7 @@ export const ShoppingGuides = () => html`
   <road-icon slot="end" name="edit" color="secondary" size="sm" class="mr-8"></road-icon>
 </road-item>
 
-<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--white)">
+<road-item class="mb-16" style="--border-width: 1px;--background-color: var(--road-grey-000)">
   <road-icon slot="start" name="light" class="mr-16"></road-icon>
 
   <road-label>

package/dist/collection/components/list/list.css

@@ -32,7 +32,7 @@
  */
 
 :host(.list-lines-full) {
-  border: 1px solid var(--border);
+  border: 1px solid var(--road-grey-300);
   border-bottom: 0;
 }