ariadne_view_components 0.0.43-arm64-darwin → 0.0.45-arm64-darwin

data/app/components/ariadne/tooltip_component.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text.
+  # Use tooltips sparingly and as a last resort.
+  #
+  # When using a tooltip, follow the provided guidelines to avoid accessibility issues.
+  #
+  # - Tooltip text should be brief and to the point. The tooltip content must be a string.
+  # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never
+  #  use tooltips to convey critical information.
+  #
+  # @accessibility
+  #   - **Never set tooltips on static elements.** Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
+  #   and screen reader users.
+  #   - Place `Tooltip` adjacent after its trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
+  #   content.
+  #   ### Which `type` should I set?
+  #   Setting `:description` establishes an `aria-describedby` relationship, while `:label` establishes an `aria-labelledby` relationship between the trigger element and the tooltip,
+  #
+  #   The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
+  #   - When there is already a visible label text on the trigger element, the tooltip is likely intended to supplement the existing text, so set `type: :description`.
+  #   The majority of tooltips will fall under this category.
+  #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
+  #   This type is usually only appropriate for an icon-only control.
+  class TooltipComponent < Ariadne::Component
+    DEFAULT_TAG = :tooltip
+    DEFAULT_PLACEMENT = :top
+    VALID_PLACEMENTS = [DEFAULT_PLACEMENT, :right, :bottom, :left].freeze
+
+    DEFAULT_CLASSES = "ariadne-invisible ariadne-absolute ariadne-bg-slate-900 ariadne-text-white ariadne-font-semibold ariadne-max-w-xs ariadne-py-1 ariadne-px-2 ariadne-rounded ariadne-z-max"
+
+    DATA_CONTROLLER = "tooltip-component"
+    DATA_ACTION = "mouseover->tooltip-component#show mouseout->tooltip-component#hide"
+
+    TYPE_DEFAULT = :description
+    VALID_TYPES = [:label, TYPE_DEFAULT].freeze
+
+    # DEFAULT_DATA_ATTRIBUTES = {
+    #   "data-controller": DATA_CONTROLLER,
+    #   "data-action": "mouseover->tooltip-component#show mouseout->tooltip-component#hide",
+    #   "data-tooltip-component-placement": DEFAULT_PLACEMENT,
+    # }
+
+    # @example As a description for an icon-only button
+    #   @description
+    #     If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
+    #     The trigger element should also have a _concise_ accessible label via `aria-label`.
+    #   @code
+    #     <%= render(Ariadne::HeroiconComponent.new(icon: :moon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { id: "bold-button-0" })) %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :top)) %>
+    # @example As a label for an icon-only button
+    #   @description
+    #     If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
+    #   @code
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: { id: "like-button" })) { "👍" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "like-button", type: :label, text: "Like", direction: :top)) %>
+    #
+    # @example As a description for a button with visible label
+    #   @description
+    #     If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
+    #   @code
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "save-button"}, scheme: :success)) { "Save" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :right)) %>
+    # @example With direction
+    #   @description
+    #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
+    #   @code
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "North", m: 2})) { "North" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :top)) %>
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "South", m: 2})) { "South" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :bottom)) %>
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "East", m: 2})) { "East" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :right)) %>
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "West", m: 2})) { "West" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "West""", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :left)) %>
+    # @example With relative parent
+    #   @description
+    #     When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
+    #   @code
+    #     <span style="position: relative;">
+    #       <%= render(Ariadne::ButtonComponent.new(attributes: {id: "test-button"}, scheme: :info)) { "Test" } %>
+    #       <%= render(Ariadne::TooltipComponent.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :bottom)) %>
+    #     </span>
+    # @param tag [Symbol, String] The rendered tag name
+    # @param for_id [String] The ID of the element that the tooltip should be attached to.
+    # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
+    # @param type [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_TYPES) %>
+    # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, for_id:, text:, type: TYPE_DEFAULT, direction: DEFAULT_PLACEMENT, classes: "", attributes: {})
+      raise TypeError, "tooltip text must be a string" unless text.is_a?(String)
+
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+
+      @text = text
+      @classes = merge_class_names(DEFAULT_CLASSES, classes)
+
+      @attributes = attributes
+      @attributes[:for] = for_id
+
+      @attributes[:"data-tooltip-component-placement"] = fetch_or_raise(VALID_PLACEMENTS, direction)
+      @attributes[:"data-type"] = fetch_or_raise(VALID_TYPES, type)
+      @attributes[:"data-tooltip-component-target"] = "tooltip"
+    end
+  end
+end

data/app/lib/ariadne/action_view_extensions/form_helper.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module ActionViewExtensions
+    # :nodoc:
+    module FormHelper
+      include ClassNameHelper
+
+      DEFAULT_FORM_CLASSES = "ariadne-space-y-8 sm:ariadne-space-y-5"
+      def ariadne_form_with(model: nil, scope: nil, url: nil, format: nil, classes: "", attributes: {}, **options, &block)
+        options[:class] = merge_class_names(DEFAULT_FORM_CLASSES, options[:class])
+        options[:builder] ||= Ariadne::FormBuilder
+        options[:html] = attributes
+
+        data_controller = options[:html].fetch(:"data-controller", "")
+        options[:html][:"data-controller"] = if data_controller.present?
+          "#{data_controller} ariadne-form"
+        else
+          "ariadne-form"
+        end
+
+        form_with(model: model, scope: scope, url: url, format: format, **options, &block)
+      end
+    end
+  end
+end
+
+ActiveSupport.on_load(:action_view) do
+  include Ariadne::ActionViewExtensions::FormHelper
+end

data/app/lib/ariadne/audited/dsl.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Ariadne
+  # :nodoc:
+  module Audited
+    # DSL to register when a component has passed an accessibility audit.
+    #
+    # Example:
+    #
+    # class MyComponent < ViewComponent::Base
+    #   include Ariadne::Audited::Dsl
+    #   audited_at 'YYYY-MM-DD'
+    # end
+    module Dsl
+      extend ActiveSupport::Concern
+
+      included do
+        class_attribute :audit_date, instance_writer: false
+      end
+
+      class_methods do
+        def audited_at(date = nil)
+          return audit_date if date.nil?
+
+          self.audit_date = date
+        end
+      end
+    end
+  end
+end

data/app/lib/ariadne/class_name_helper.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Helps build a list of conditional class names
+module Ariadne
+  # :nodoc:
+  module ClassNameHelper
+    def merge_class_names(*args)
+      [].tap do |classes|
+        args.each do |class_name|
+          next if class_name.blank?
+
+          case class_name
+          when String
+            classes << class_name
+          else
+            raise ArgumentError, "Expected String class name, got #{class_name.class}"
+          end
+        end
+      end.join(" ")
+    end
+  end
+end

data/app/lib/ariadne/fetch_or_fallback_helper.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+# Ariadne::FetchOrFallbackHelper
+# A little helper to enable graceful fallbacks
+#
+# Use this helper to quietly ensure a value is
+# one that you expect:
+#
+# allowed_values    - allowed options for *value*
+# given_value       - input being coerced
+# fallback          - returned if *given_value* is not included in *allowed_values*
+#
+# fetch_or_raise([1,2,3], 5) => 2
+# fetch_or_raise([1,2,3], 1) => 1
+# fetch_or_raise([1,2,3], nil) => 2
+module Ariadne
+  # :nodoc:
+  module FetchOrFallbackHelper
+    include LoggerHelper
+
+    mattr_accessor :fallback_raises, default: true
+
+    InvalidValueError = Class.new(StandardError)
+
+    TRUE_OR_FALSE = Set.new([true, false]).freeze
+
+    INTEGER_TYPES = Set.new(["Integer"]).freeze
+
+    def fetch_or_raise(allowed_values, given_value, against: nil)
+      if !allowed_values.is_a?(Array) && !allowed_values.is_a?(Set)
+        raise ArgumentError, "allowed_values must be an array or a set; it was #{allowed_values.class}"
+      end
+
+      check_against_given_value = against || given_value
+      if allowed_values.include?(check_against_given_value)
+        given_value
+      else
+        raise InvalidValueError, <<~MSG
+          fetch_or_raise was called with an invalid value.
+
+          Expected one of: #{allowed_values.inspect}
+          Got: #{given_value.inspect}
+        MSG
+      end
+    end
+
+    # TODO: use these two more
+    def fetch_or_raise_boolean(given_value)
+      fetch_or_raise(TRUE_OR_FALSE, given_value)
+    end
+
+    def fetch_or_raise_integer(given_value)
+      fetch_or_raise(INTEGER_TYPES, given_value, against: given_value.class.name)
+    end
+
+    # TODO: test this
+    def check_incoming_tag(preferred_tag, given_tag)
+      return preferred_tag if given_tag.blank? || preferred_tag == given_tag
+
+      unless silence_warnings?
+        message = <<~MSG
+          Ariadne: note that `#{preferred_tag}` is the preferred tag here;
+          you passed `#{given_tag}` (which will still be used)
+        MSG
+
+        logger.warn(message)
+      end
+
+      given_tag
+    end
+
+    # TODO: test this
+    def check_incoming_attribute(preferred_attribute, given_attribute)
+      return preferred_attribute if given_attribute.blank? || preferred_attribute != given_attribute
+
+      unless silence_warnings?
+        message = <<~MSG
+          Ariadne: note that `#{preferred_attribute}` is the preferred attribute here;
+          you passed `#{given_attribute}` (which will still be used)
+        MSG
+
+        logger.warn(message)
+      end
+
+      given_attribute
+    end
+
+    # TODO: test this
+    def check_incoming_value(preferred_value, given_pair)
+      return preferred_value if given_pair.blank? || !given_pair.is_a?(Hash)
+
+      given_key = given_pair.keys.first
+      given_value = given_pair.values.first
+
+      return preferred_value if given_value.blank?
+
+      unless silence_warnings?
+
+        message = <<~MSG
+          Ariadne: note that `#{preferred_value}` is the preferred value for `#{given_key}` here;
+          you passed `#{given_value}` (which will still be used)
+        MSG
+
+        logger.warn(message)
+      end
+
+      given_value
+    end
+  end
+end

data/app/lib/ariadne/form_builder.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # :nodoc:
+  # Many of the form methods simply call out to the corresponding ActionView::Helpers::FormBuilder methods,
+  # documented at https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html, with
+  # default Tailwind classes applied.
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    include ClassNameHelper
+
+    DEFAULT_SECTION_CLASSES = "ariadne-space-y-6 ariadne-px-4"
+    def section(classes: "", attributes: {}, &block)
+      actual_classes = merge_class_names(DEFAULT_SECTION_CLASSES, classes)
+      options = { class: actual_classes, **attributes }
+      @template.content_tag(:div, **options, &block)
+    end
+
+    DEFAULT_SECTION_HEADING_CLASSES = "ariadne-text-lg ariadne-leading-6 ariadne-py-4 ariadne-font-medium ariadne-text-gray-900"
+    def heading(tag: :h3, classes: "", attributes: {}, &block)
+      actual_classes = merge_class_names(DEFAULT_SECTION_HEADING_CLASSES, classes)
+      options = { class: actual_classes, **attributes }
+      @template.content_tag(tag, **options, &block)
+    end
+
+    DEFAULT_SECTION_SUBHEADING_CLASSES = "ariadne-mt-1 ariadne-max-w-2xl ariadne-text-sm ariadne-text-gray-500"
+    def subheading(classes: "", attributes: {}, &block)
+      actual_classes = merge_class_names(DEFAULT_SECTION_SUBHEADING_CLASSES, classes)
+      options = { class: actual_classes, **attributes }
+      @template.content_tag(:p, **options, &block)
+    end
+
+    DEFAULT_LABEL_CLASSES = "ariadne-block ariadne-text-sm ariadne-font-medium ariadne-text-gray-700 ariadne-pl-2"
+    def label(method, text = nil, options = {}, &block)
+      options[:class] = merge_class_names(DEFAULT_LABEL_CLASSES, options.delete(:classes))
+      super(method, text, options, &block)
+    end
+
+    DEFAULT_TEXT_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-slate-500 focus:ariadne-border-slate-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border-gray-300 ariadne-rounded-md"
+    def text_field(method, options = {})
+      options[:class] = merge_class_names(DEFAULT_TEXT_CLASSES, options.delete(:classes))
+      super(method, **options)
+    end
+
+    DEFAULT_CHECKBOX_CLASSES = "focus:ariadne-ring-slate-500 ariadne-h-4 ariadne-w-4 ariadne-text-slate-600 ariadne-border-slate-300 ariadne-rounded"
+    def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+      options[:class] = merge_class_names(DEFAULT_CHECKBOX_CLASSES, options.delete(:classes))
+      super(method, options, checked_value, unchecked_value)
+    end
+
+    DEFAULT_RADIO_CLASSES = "focus:ariadne-ring-slate-500 ariadne-h-4 ariadne-w-4 ariadne-text-slate-600 ariadne-border-gray-300 ariadne-rounded"
+    def radio_button(method, tag_value, options = {})
+      options[:class] = merge_class_names(DEFAULT_RADIO_CLASSES, options.delete(:classes))
+      super(method, tag_value, **options)
+    end
+
+    DEFAULT_TEXTAREA_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-slate-500 focus:ariadne-border-slate-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border ariadne-border-gray-300 ariadne-rounded-md"
+    def text_area(method, options = {})
+      options[:class] = merge_class_names(DEFAULT_TEXTAREA_CLASSES, options.delete(:classes))
+      super(method, **options)
+    end
+
+    DEFAULT_EMAIL_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-slate-500 focus:ariadne-border-slate-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border-gray-300 ariadne-rounded-md"
+    def email_field(method, options = {})
+      options[:class] = merge_class_names(DEFAULT_EMAIL_CLASSES, options.delete(:classes))
+      super(method, **options)
+    end
+
+    DEFAULT_PASSWORD_CLASSES = "ariadne-appearance-none ariadne-block ariadne-w-full ariadne-px-3 ariadne-py-2 ariadne-border ariadne-border-gray-300 ariadne-rounded-md ariadne-shadow-sm ariadne-placeholder-gray-400 focus:ariadne-outline-none focus:ariadne-ring-slate-500 focus:ariadne-border-slate-500 sm:ariadne-text-sm"
+    def password_field(method, options = {})
+      options[:class] = merge_class_names(DEFAULT_PASSWORD_CLASSES, options.delete(:classes))
+      super(method, **options)
+    end
+  end
+end

data/app/lib/ariadne/icon_helper.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+# Ariadne::IconHelper
+# A helper that insists on certain values when
+# checking herocions and their varients.
+#
+# Use this helper to loudly ensure a value is
+# one that you expect.
+module Ariadne
+  # :nodoc:
+  module IconHelper
+    include FetchOrFallbackHelper
+
+    def check_icon_presence!(icon, variant)
+      return true unless has_partial_icon?(icon, variant)
+
+      icon_presence!(icon, variant)
+      variant_presence!(icon, variant)
+      ensure_valid_variant(variant)
+
+      true
+    end
+
+    def ensure_valid_variant(variant)
+      check_variant = if variant.blank? || !variant.respond_to?(:to_s)
+        ""
+      else
+        variant.to_s
+      end
+
+      fetch_or_raise(HeroiconsHelper::Icon::VALID_VARIANTS, check_variant)
+    end
+    module_function :ensure_valid_variant
+
+    def has_partial_icon?(icon, variant)
+      icon.present? || variant.present?
+    end
+
+    def icon_presence!(icon, variant)
+      raise(ArgumentError, "You must provide an `icon` when providing a `variant`.") if icon.blank? && variant.present?
+
+      true
+    end
+
+    def variant_presence!(icon, variant)
+      raise(ArgumentError, "You must provide a `variant` when providing an `icon`.") if icon.present? && variant.blank?
+
+      true
+    end
+  end
+end

data/app/lib/ariadne/logger_helper.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # :nodoc:
+  module LoggerHelper
+    def logger
+      return Rails.logger if defined?(Rails) && Rails.logger
+
+      require "logger"
+      Logger.new($stderr)
+    end
+
+    # TODO: test
+    def silence_deprecations?
+      Rails.application.config.ariadne_view_components.silence_deprecations
+    end
+
+    # TODO: test
+    def silence_warnings?
+      Rails.application.config.ariadne_view_components.silence_warnings
+    end
+  end
+end

data/app/lib/ariadne/status/dsl.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Ariadne
+  # :nodoc:
+  module Status
+    # DSL to allow components to register their status.
+    #
+    # Example:
+    #
+    # class MyComponent < ViewComponent::Base
+    #   include Ariadne::Status::Dsl
+    #   status :experimental
+    # end
+    module Dsl
+      extend ActiveSupport::Concern
+
+      STATUSES = {
+        experimental: :experimental,
+        stable: :stable,
+      }.freeze
+
+      class UnknownStatusError < StandardError; end
+
+      included do
+        class_attribute :component_status, instance_writer: false, default: STATUSES[:stable]
+      end
+
+      class_methods do
+        def status(status = nil)
+          return component_status if status.nil?
+
+          raise UnknownStatusError, "status #{status} does not exist" if STATUSES[status].nil?
+
+          self.component_status = STATUSES[status]
+        end
+      end
+    end
+  end
+end

data/app/lib/ariadne/view_helper.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# :nocov:
+module Ariadne
+  # Module to allow shorthand calls for Ariadne components
+  module ViewHelper
+    class ViewHelperNotFound < StandardError; end
+
+    HELPERS = {
+      heroicon: "Ariadne::HeroiconComponent",
+      heading: "Ariadne::HeadingComponent",
+      time_ago: "Ariadne::TimeAgoComponent",
+      image: "Ariadne::ImageComponent",
+    }.freeze
+
+    HELPERS.each do |name, component|
+      define_method "ariadne_#{name}" do |*args, **kwargs, &block|
+        render component.constantize.new(*args, **kwargs), &block
+      end
+    end
+  end
+end

data/lib/ariadne/view_components/engine.rb

@@ -46,28 +46,6 @@ module Ariadne
       end
 
       config.after_initialize do |_app|
-        # TODO: is any of this necessary???
-        ActionView::Base.field_error_proc = proc do |html_tag, instance_tag|
-          fragment = Nokogiri::HTML.fragment(html_tag)
-          field = fragment.at("input,select,textarea")
-
-          model = instance_tag.object
-          error_message = model.errors.full_messages.join(", ")
-
-          html = if field
-            field["class"] = "#{field["class"]} invalid"
-            html = <<-HTML
-                      #{fragment}
-                      <p class="error">#{error_message}</p>
-            HTML
-            html
-          else
-            html_tag
-          end
-
-          html.html_safe # rubocop:disable Rails/OutputSafety
-        end
-
         Ariadne::ViewComponents.tailwind_merger = TailwindMerge::Merger.new
       end
     end

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.43"
+    VERSION = "0.0.45"
   end
 end

data/tailwind.config.js

@@ -19,7 +19,7 @@ module.exports = {
       resolve(__dirname, 'app/components/**/*.erb'),
       resolve(__dirname, 'app/components/**/*.rb'),
       resolve(__dirname, 'app/lib/ariadne'),
-      resolve(__dirname, 'static/classes.yml')
+      resolve(__dirname, 'static/classes.yml'),
     ],
     extract: {
       yml: content => {
@@ -38,15 +38,10 @@ module.exports = {
           return rez
         }
         return []
-      }
-    }
+      },
+    },
   },
-  plugins: [
-    require('@tailwindcss/aspect-ratio'),
-    require('@tailwindcss/line-clamp'),
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography')
-  ],
+  plugins: [require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms'), require('@tailwindcss/typography')],
   theme: {
     extend: {
       colors: {
@@ -62,14 +57,14 @@ module.exports = {
         'internal-message': colors.amber['100'],
 
         'state-closed': '#da1e28',
-        'state-open': '#198038'
+        'state-open': '#198038',
       },
       fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
       },
       flexBasis: {
-        160: '40rem'
-      }
-    }
-  }
+        160: '40rem',
+      },
+    },
+  },
 }